Move nowplaying items to Vue components.
This commit is contained in:
Buster "Silver Eagle" Neece
parent
c0e8d7c0cf
commit
96af3eb119
|
|
@ -12,28 +12,46 @@
|
|||
<?=$this->fetch('partials/radio_controls') ?>
|
||||
</ul>
|
||||
<div class="stations nowplaying">
|
||||
<div class="media media-left" id="station_<?=$station->getId() ?>">
|
||||
<div class="media media-left" id="station-nowplaying">
|
||||
<div class="pull-left">
|
||||
<a class="btn-audio" href="#" data-url="<?=$this->e($stream_url) ?>">
|
||||
<i class="zmdi zmdi-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading nowplaying-title"><?=_('Song Title') ?></h4>
|
||||
<div class="nowplaying-artist"><?=_('Song Artist') ?></div>
|
||||
<h4 class="media-heading">
|
||||
{{ np.now_playing.song.title }}
|
||||
</h4>
|
||||
<div>
|
||||
{{ np.now_playing.song.artist }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nowPlaying;
|
||||
|
||||
$(function() {
|
||||
nowPlaying = new Vue({
|
||||
el: '#station-nowplaying',
|
||||
data: {
|
||||
np: {
|
||||
now_playing: {
|
||||
song: {
|
||||
title: '<?= _('Song Title') ?>',
|
||||
artist: '<?= _('Song Artist') ?>'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var sub = new NchanSubscriber('/api/live/nowplaying/<?=$station->getId() ?>');
|
||||
|
||||
sub.on("message", function(message, message_metadata) {
|
||||
var row = JSON.parse(message);
|
||||
|
||||
var station_row = $('#station_'+row.station.id);
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: row.now_playing.song.title,
|
||||
|
|
@ -41,9 +59,9 @@ $(function() {
|
|||
});
|
||||
}
|
||||
|
||||
station_row.find('.nowplaying-title').text(row.now_playing.song.title);
|
||||
station_row.find('.nowplaying-artist').text(row.now_playing.song.artist);
|
||||
station_row.find('.nowplaying-listeners').text(row.listeners.total);
|
||||
nowPlaying.np = row;
|
||||
});
|
||||
|
||||
sub.start();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -23,21 +23,21 @@
|
|||
<h3 class="text-left"><?=$this->e($station->getName()) ?></h3>
|
||||
|
||||
<div class="stations nowplaying">
|
||||
<div class="media media-left" id="station_<?=$station->getId() ?>">
|
||||
<div class="media media-left" id="station-nowplaying">
|
||||
<div class="pull-left">
|
||||
<a class="btn-audio" href="#" data-url="<?=$this->e($stream_url) ?>">
|
||||
<i class="zmdi zmdi-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading nowplaying-title">
|
||||
<?= _('Song Title') ?>
|
||||
<h4 class="media-heading">
|
||||
{{ np.now_playing.song.title }}
|
||||
</h4>
|
||||
<div class="nowplaying-artist">
|
||||
<?= _('Song Artist') ?>
|
||||
<div>
|
||||
{{ np.now_playing.song.artist }}
|
||||
</div>
|
||||
<div class="nowplaying-progress" style="display: none;">
|
||||
|
||||
<div class="nowplaying-progress" v-if="time_display">
|
||||
{{ time_display }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,8 +75,11 @@
|
|||
<h4 class="modal-title" id="modal-history-label"><?=_('Song History') ?></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ol type="1" id="song-history">
|
||||
|
||||
<ol type="1" id="station-history">
|
||||
<li v-for="row in history">
|
||||
<b>{{ row.song.title }}</b><br>
|
||||
{{ row.song.artist }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -109,20 +112,15 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nowPlaying;
|
||||
|
||||
function iterateTimer() {
|
||||
$('.nowplaying-progress:visible').each(function () {
|
||||
var time_played = $(this).data('time-played') + 1;
|
||||
var time_total = $(this).data('time-total');
|
||||
var np_elapsed = nowPlaying.np.now_playing.elapsed;
|
||||
var np_total = nowPlaying.np.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
var time_display = formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
|
||||
$(this).data('time-played', time_played)
|
||||
.text(time_display)
|
||||
});
|
||||
if (np_elapsed < np_total) {
|
||||
nowPlaying.np.now_playing.elapsed = np_elapsed + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(time) {
|
||||
|
|
@ -145,13 +143,54 @@ function formatTime(time) {
|
|||
}
|
||||
|
||||
$(function() {
|
||||
nowPlaying = new Vue({
|
||||
el: '#station-nowplaying',
|
||||
data: {
|
||||
np: {
|
||||
now_playing: {
|
||||
song: {
|
||||
title: '<?= _('Song Title') ?>',
|
||||
artist: '<?= _('Song Artist') ?>'
|
||||
},
|
||||
is_request: false,
|
||||
elapsed: 0,
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
"time_display": function() {
|
||||
var time_played = this.np.now_playing.elapsed;
|
||||
var time_total = this.np.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
return formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
songHistory = new Vue({
|
||||
el: '#station-history',
|
||||
data: {
|
||||
history: [
|
||||
{
|
||||
song: {
|
||||
title: '<?= _('Song Title') ?>',
|
||||
artist: '<?= _('Song Artist') ?>'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
var sub = new NchanSubscriber('/api/live/nowplaying/<?=$station->getId() ?>');
|
||||
|
||||
sub.on("message", function(message, message_metadata) {
|
||||
var row = JSON.parse(message);
|
||||
|
||||
var station_row = $('#station_'+row.station.id);
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: row.now_playing.song.title,
|
||||
|
|
@ -159,38 +198,8 @@ $(function() {
|
|||
});
|
||||
}
|
||||
|
||||
var np_title = row.now_playing.song.title;
|
||||
if (row.now_playing.is_request) {
|
||||
np_title += '<span class="label label-default">Listener Request</span>';
|
||||
}
|
||||
station_row.find('.nowplaying-title').html(np_title);
|
||||
station_row.find('.nowplaying-artist').text(row.now_playing.song.artist);
|
||||
station_row.find('.nowplaying-listeners').text(row.listeners.total);
|
||||
|
||||
if (row.now_playing.duration) {
|
||||
var time_played = row.now_playing.elapsed;
|
||||
var time_total = row.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
var time_display = formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
|
||||
station_row.find('.nowplaying-progress')
|
||||
.data('time-played', time_played)
|
||||
.data('time-total', time_total)
|
||||
.text(time_display)
|
||||
.show();
|
||||
} else {
|
||||
station_row.find('.nowplaying-progress').hide();
|
||||
}
|
||||
|
||||
$('#song-history').empty();
|
||||
$.each(row.song_history, function(i, history_row) {
|
||||
var li = $('<li>').append('<b>'+history_row.song.title+'</b><br>'+history_row.song.artist);
|
||||
$('#song-history').append(li);
|
||||
});
|
||||
nowPlaying.np = row;
|
||||
songHistory.history = row.song_history;
|
||||
});
|
||||
|
||||
sub.start();
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="card-header ch-alt">
|
||||
<h2><?=_('On the Air') ?></h2>
|
||||
</div>
|
||||
<div class="card-body card-padding nowplaying" id="station_<?=$station->getId() ?>">
|
||||
<div class="card-body card-padding nowplaying" id="profile-nowplaying">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-4">
|
||||
|
|
@ -26,13 +26,15 @@
|
|||
|
||||
<h6><?=_('Now Playing') ?>:</h6>
|
||||
|
||||
<h4 class="media-heading nowplaying-title">
|
||||
<?= _('Song Title') ?>
|
||||
<h4 class="media-heading">
|
||||
{{ np.now_playing.song.title }}
|
||||
</h4>
|
||||
<div class="nowplaying-artist">
|
||||
<?= _('Song Artist') ?>
|
||||
<div>
|
||||
{{ np.now_playing.song.artist }}
|
||||
</div>
|
||||
<div class="nowplaying-progress" v-if="time_display">
|
||||
{{ time_display }}
|
||||
</div>
|
||||
<div class="nowplaying-progress" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -42,11 +44,11 @@
|
|||
|
||||
<h6><?=_('Playing Next') ?>:</h6>
|
||||
|
||||
<h4 class="media-heading nowplaying-next-title">
|
||||
<?= _('Song Title') ?>
|
||||
<h4 class="media-heading">
|
||||
{{ np.playing_next.song.title }}
|
||||
</h4>
|
||||
<div class="nowplaying-next-artist">
|
||||
<?= _('Song Artist') ?>
|
||||
<div>
|
||||
{{ np.playing_next.song.artist }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,9 +59,9 @@
|
|||
|
||||
<h6><?=_('Listeners') ?>:</h6>
|
||||
|
||||
<h4><span class="nowplaying-listeners">0</span> <?=_('Total') ?></h4>
|
||||
<h4><span>{{ np.listeners.total }}</span> <?=_('Total') ?></h4>
|
||||
<div>
|
||||
<span class="nowplaying-listeners-unique">0</span> <?=_('Unique') ?>
|
||||
<span>{{ np.listeners.unique }}</span> <?=_('Unique') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -289,20 +291,15 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nowPlaying;
|
||||
|
||||
function iterateTimer() {
|
||||
$('.nowplaying-progress:visible').each(function () {
|
||||
var time_played = $(this).data('time-played') + 1;
|
||||
var time_total = $(this).data('time-total');
|
||||
var np_elapsed = nowPlaying.np.now_playing.elapsed;
|
||||
var np_total = nowPlaying.np.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
var time_display = formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
|
||||
$(this).data('time-played', time_played)
|
||||
.text(time_display)
|
||||
});
|
||||
if (np_elapsed < np_total) {
|
||||
nowPlaying.np.now_playing.elapsed = np_elapsed + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(time) {
|
||||
|
|
@ -325,13 +322,50 @@ function formatTime(time) {
|
|||
}
|
||||
|
||||
$(function() {
|
||||
nowPlaying = new Vue({
|
||||
el: '#profile-nowplaying',
|
||||
data: {
|
||||
np: {
|
||||
now_playing: {
|
||||
song: {
|
||||
title: '<?= _('Song Title') ?>',
|
||||
artist: '<?= _('Song Artist') ?>'
|
||||
},
|
||||
is_request: false,
|
||||
elapsed: 0,
|
||||
duration: 0
|
||||
},
|
||||
listeners: {
|
||||
unique: 0,
|
||||
total: 0
|
||||
},
|
||||
playing_next: {
|
||||
song: {
|
||||
title: '<?= _('Song Title') ?>',
|
||||
artist: '<?= _('Song Artist') ?>'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
"time_display": function() {
|
||||
var time_played = this.np.now_playing.elapsed;
|
||||
var time_total = this.np.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
return formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var sub = new NchanSubscriber('/api/live/nowplaying/<?=$station->getId() ?>');
|
||||
|
||||
sub.on("message", function(message, message_metadata) {
|
||||
var row = JSON.parse(message);
|
||||
|
||||
var station_row = $('#station_'+row.station.id);
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: row.now_playing.song.title,
|
||||
|
|
@ -339,47 +373,7 @@ $(function() {
|
|||
});
|
||||
}
|
||||
|
||||
var np_title = row.now_playing.song.title;
|
||||
if (row.now_playing.is_request) {
|
||||
np_title += '<span class="label label-default">Listener Request</span>';
|
||||
}
|
||||
station_row.find('.nowplaying-title').html(np_title);
|
||||
station_row.find('.nowplaying-artist').text(row.now_playing.song.artist);
|
||||
|
||||
station_row.find('.nowplaying-listeners').text(row.listeners.total);
|
||||
station_row.find('.nowplaying-listeners-unique').text(row.listeners.unique);
|
||||
|
||||
var np_next_title = row.playing_next.song.title;
|
||||
if (row.playing_next.is_request) {
|
||||
np_next_title += '<span class="label label-default">Listener Request</span>';
|
||||
}
|
||||
station_row.find('.nowplaying-next-title').html(np_next_title);
|
||||
station_row.find('.nowplaying-next-artist').text(row.playing_next.song.artist);
|
||||
|
||||
if (row.now_playing.duration) {
|
||||
var time_played = row.now_playing.elapsed;
|
||||
var time_total = row.now_playing.duration;
|
||||
|
||||
if (time_played > time_total) {
|
||||
time_played = time_total;
|
||||
}
|
||||
|
||||
var time_display = formatTime(time_played) + ' / ' + formatTime(time_total);
|
||||
|
||||
station_row.find('.nowplaying-progress')
|
||||
.data('time-played', time_played)
|
||||
.data('time-total', time_total)
|
||||
.text(time_display)
|
||||
.show();
|
||||
} else {
|
||||
station_row.find('.nowplaying-progress').hide();
|
||||
}
|
||||
|
||||
$('#song-history').empty();
|
||||
$.each(row.song_history, function(i, history_row) {
|
||||
var li = $('<li>').append('<b>'+history_row.song.title+'</b><br>'+history_row.song.artist);
|
||||
$('#song-history').append(li);
|
||||
});
|
||||
nowPlaying.np = row;
|
||||
});
|
||||
|
||||
sub.start();
|
||||
|
|
|
|||
|
|
@ -13,37 +13,38 @@
|
|||
?>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<?php
|
||||
if ($title)
|
||||
$page_title = $title.' - '.$app_settings['name'];
|
||||
else
|
||||
$page_title = $app_settings['name'];
|
||||
<?php
|
||||
if ($title)
|
||||
$page_title = $title.' - '.$app_settings['name'];
|
||||
else
|
||||
$page_title = $app_settings['name'];
|
||||
|
||||
if (!APP_IN_PRODUCTION)
|
||||
$page_title = '('.ucfirst(APP_APPLICATION_ENV).') '.$page_title;
|
||||
?>
|
||||
<title><?=$page_title ?></title>
|
||||
if (!APP_IN_PRODUCTION)
|
||||
$page_title = '('.ucfirst(APP_APPLICATION_ENV).') '.$page_title;
|
||||
?>
|
||||
<title><?=$page_title ?></title>
|
||||
|
||||
<?=$this->fetch('partials/icons') ?>
|
||||
<?=$this->fetch('partials/icons') ?>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/animate.css/animate.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/light.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/animate.css/animate.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/light.css') ?>">
|
||||
|
||||
<?=$this->section('custom_css') ?>
|
||||
<?=$this->section('custom_css') ?>
|
||||
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?= $url->content('vendors/bower_components/vue/dist/' . (APP_IN_PRODUCTION ? 'vue.min.js' : 'vue.js')) ?>"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var APP_AppEnv = '<?=APP_APPLICATION_ENV ?>';
|
||||
var APP_BaseUrl = '<?=$url->named('home') ?>';
|
||||
var APP_ContentPath = '<?=$url->content('') ?>';
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var APP_AppEnv = '<?=APP_APPLICATION_ENV ?>';
|
||||
var APP_BaseUrl = '<?=$url->named('home') ?>';
|
||||
var APP_ContentPath = '<?=$url->content('') ?>';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="embed <?=$page_class ?>">
|
||||
|
|
|
|||
|
|
@ -32,12 +32,13 @@ if (!APP_IN_PRODUCTION)
|
|||
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/animate.css/animate.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/'.$customization->getTheme().'.css') ?>">
|
||||
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/'.$customization->getTheme().'.css') ?>">
|
||||
|
||||
<?=$this->section('custom_css') ?>
|
||||
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
|
||||
<script type="text/javascript" src="<?= $url->content('vendors/bower_components/vue/dist/' . (APP_IN_PRODUCTION ? 'vue.min.js' : 'vue.js')) ?>"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var APP_AppEnv = '<?=APP_APPLICATION_ENV ?>';
|
||||
|
|
|
|||
Loading…
Reference in New Issue