102 lines
5.5 KiB
PHP
102 lines
5.5 KiB
PHP
<?php
|
|
|
|
$station_id = (string)$station->id;
|
|
$station_name = (string)$station->name;
|
|
$station_slogan = (string)$station->slogan;
|
|
$station_logo = (string)$station->logo;
|
|
$station_stream = (string)$station->stream;
|
|
$station_streamhls = (string)$station->streamhls;
|
|
$station_contentplayer = (string)$station->contentplayer;
|
|
$station_apiradio = (string)$station->apiradio;
|
|
|
|
?>
|
|
|
|
<div class="radio-player-container" style="background-color: #ffffff;height: calc(100% - 217px);position: absolute;left: calc(50%);display: flex;flex-direction: column;max-width: 750px;transform: translateX(-50%);width: 100%;">
|
|
|
|
<div class="radio-header" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
|
|
<div class="left-controls" style="display: flex; align-items: center;">
|
|
<a href="<?php echo $base_path; ?>/radio" data-page="radio" class="linkBox nav-link" style="color: #333; display: flex; align-items: center; text-decoration: none;">
|
|
<span class="material-icons" style="font-size: 28px;">arrow_back</span>
|
|
</a>
|
|
<span style="font-size: 18px; font-weight: 600; color: #333; margin-left: 15px;"><?php echo $station_name; ?></span>
|
|
</div>
|
|
|
|
<?php if(!empty($station_logo)): ?>
|
|
<div class="right-controls">
|
|
<img src="<?php echo $station_logo; ?>" alt="Logo" style="height: 30px; width: auto;">
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php
|
|
if($station->contentplayer == ""){
|
|
?>
|
|
<style>
|
|
.staticpage{
|
|
background: linear-gradient(45deg, #3849a8, #f7b835);
|
|
padding: 22px 35px 10px 35px;
|
|
display: block;
|
|
z-index: 1;
|
|
height: calc(100vh - 393px);
|
|
color: white;
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 750px;
|
|
}
|
|
.staticpage > .logo{
|
|
width: 200px;
|
|
border-radius: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.staticpage > p{
|
|
margin: 0;
|
|
}
|
|
.staticpage > p.titleRadio{
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
<div class="staticpage">
|
|
<img src="<?php echo $station->logo; ?>" class="logo" alt="logo radio">
|
|
<p class="titleRadio"><?php echo $station->name; ?></p>
|
|
<p class="subtitleRadio"><?php echo $station->slogan; ?></p>
|
|
</div>
|
|
<?php
|
|
}else{
|
|
?>
|
|
<iframe src="<?=$station_contentplayer?>" class="contentplayer" frameborder="0"></iframe>
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
<div class="footer_player" <?php if($is_mobile){ echo "style=\"bottom: 84px;\""; } ?>>
|
|
<div class="row align-items-center">
|
|
<div class="col-2" style="width: 70px;">
|
|
<img id="albumsong" src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;height: 60px;">
|
|
</div>
|
|
<div class="col">
|
|
<div id="songs" style="font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;"><?php echo $station->name; ?></div>
|
|
<div id="artist" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical ;overflow: hidden;"><?php echo $station->slogan; ?></div>
|
|
</div>
|
|
<div class="col-auto" style="text-align: center; margin-top: 1px; padding-right: 0;">
|
|
<button id="formatToggleBtn" title="Cambia formato audio">
|
|
<span id="formatLabel" style="font-size: 12px;font-weight: 600;border-radius: 6px;border: 2px solid #ffffff;padding: 4px 6px;background: rgba(247, 184, 53, 0.3);color: #2a377e;">HLS</span>
|
|
</button>
|
|
</div>
|
|
<div class="col-2" style="text-align: center; margin-top: 1px; margin-right: 5px; width: 67px;">
|
|
<button id="playPauseBtn"
|
|
data-stream-hls="<?php echo $station->streamhls; ?>"
|
|
data-stream-fallback="<?php echo $station->stream; ?>"
|
|
data-station-name="<?php echo htmlspecialchars($station->name); ?>"
|
|
data-station-logo="<?php echo $station->logo; ?>"
|
|
data-station-slogan="<?php echo htmlspecialchars($station->slogan); ?>"
|
|
data-api-url="<?php echo $station_apiradio; ?>">
|
|
<i class="material-icons play-icon" id="play-pause" style="font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">play_arrow</i>
|
|
<i class="material-icons pause-icon" id="play-pause" style="display:none; font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">pause</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<audio id="hlsAudioPlayer" preload="none"></audio>
|