From 6a5276820b7d1bfeefc43df4c06b0d4ccf63e56a Mon Sep 17 00:00:00 2001 From: Buster Neece Date: Wed, 28 Dec 2022 09:49:12 -0600 Subject: [PATCH] Fixes #4721 -- Base elapsed time in players on server time, not client time. --- config/events.php | 1 + frontend/vue/components/Public/History.vue | 2 +- frontend/vue/components/Public/Player.vue | 107 +++++++----------- frontend/vue/components/Public/playerProps.js | 2 +- frontend/vue/functions/useNowPlaying.js | 75 ++++++++++-- .../Frontend/PublicPages/HistoryAction.php | 20 +--- .../Frontend/PublicPages/PlayerAction.php | 29 +---- src/Service/Centrifugo.php | 40 +++++-- src/Sync/Task/SendTimeOnSocketTask.php | 34 ++++++ src/VueComponent/NowPlayingComponent.php | 53 +++++++++ util/docker/web/centrifugo/config.yaml.tmpl | 7 ++ 11 files changed, 241 insertions(+), 129 deletions(-) create mode 100644 src/Sync/Task/SendTimeOnSocketTask.php create mode 100644 src/VueComponent/NowPlayingComponent.php diff --git a/config/events.php b/config/events.php index aaa4f50c4..f1e7dd4fb 100644 --- a/config/events.php +++ b/config/events.php @@ -142,6 +142,7 @@ return static function (CallableEventDispatcherInterface $dispatcher) { App\Sync\Task\RotateLogsTask::class, App\Sync\Task\RunAnalyticsTask::class, App\Sync\Task\RunBackupTask::class, + App\Sync\Task\SendTimeOnSocketTask::class, App\Sync\Task\UpdateGeoLiteTask::class, App\Sync\Task\UpdateStorageLocationSizesTask::class, ]); diff --git a/frontend/vue/components/Public/History.vue b/frontend/vue/components/Public/History.vue index b4e916781..9be40ed1d 100644 --- a/frontend/vue/components/Public/History.vue +++ b/frontend/vue/components/Public/History.vue @@ -17,7 +17,7 @@ const props = defineProps({ }, }); -const np = useNowPlaying(props); +const {np} = useNowPlaying(props); const history = computed(() => { return np.value.song_history ?? []; diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue index 854ba0910..ace64c87b 100644 --- a/frontend/vue/components/Public/Player.vue +++ b/frontend/vue/components/Public/Player.vue @@ -28,18 +28,18 @@

{{ np.now_playing.song.text }}

-
+
- {{ time_display_played }} + {{ currentTimeElapsedDisplay }}
+ :style="{ width: currentTrackPercent+'%' }">
- {{ time_display_total }} + {{ currentTimeTotalDisplay }}
@@ -48,14 +48,14 @@
- +
{ const {$gettext} = useTranslate(); const streams = computed(() => { - let all_streams = []; + let allStreams = []; let $np = np.value; if (enable_hls.value) { - all_streams.push({ + allStreams.push({ 'name': $gettext('HLS'), 'url': $np.station.hls_url, 'hls': true, @@ -252,60 +252,55 @@ const streams = computed(() => { } $np.station.mounts.forEach(function (mount) { - all_streams.push({ + allStreams.push({ 'name': mount.name, 'url': mount.url, 'hls': false, }); }); $np.station.remotes.forEach(function (remote) { - all_streams.push({ + allStreams.push({ 'name': remote.name, 'url': remote.url, 'hls': false, }); }); - return all_streams; + return allStreams; }); -const time_total = computed(() => { - let $np = np.value; - return $np?.now_playing?.duration ?? 0; -}); +const currentTrackPercent = computed(() => { + let $currentTrackElapsed = currentTrackElapsed.value; + let $currentTrackDuration = currentTrackDuration.value; -const time_percent = computed(() => { - let $np_elapsed = np_elapsed.value; - let $time_total = time_total.value; - - if (!$time_total) { + if (!$currentTrackDuration) { return 0; } - if ($np_elapsed > $time_total) { + if ($currentTrackElapsed > $currentTrackDuration) { return 100; } - return ($np_elapsed / $time_total) * 100; + return ($currentTrackElapsed / $currentTrackDuration) * 100; }); -const time_display_played = computed(() => { - let $np_elapsed = np_elapsed.value; - let $time_total = time_total.value; +const currentTimeElapsedDisplay = computed(() => { + let $currentTrackElapsed = currentTrackElapsed.value; + let $currentTrackDuration = currentTrackDuration.value; - if (!$time_total) { + if (!$currentTrackDuration) { return null; } - if ($np_elapsed > $time_total) { - $np_elapsed = $time_total; + if ($currentTrackElapsed > $currentTrackDuration) { + $currentTrackElapsed = $currentTrackDuration; } - return formatTime($np_elapsed); + return formatTime($currentTrackElapsed); }); -const time_display_total = computed(() => { - let $time_total = time_total.value; - return ($time_total) ? formatTime($time_total) : null; +const currentTimeTotalDisplay = computed(() => { + let $currentTrackDuration = currentTrackDuration.value; + return ($currentTrackDuration) ? formatTime($currentTrackDuration) : null; }); const isMounted = useMounted(); @@ -323,31 +318,13 @@ const fullVolume = () => { }; const switchStream = (new_stream) => { - current_stream.value = new_stream; + currentStream.value = new_stream; player.value.toggle(new_stream.url, true, new_stream.hls); }; onMounted(() => { - useIntervalFn( - () => { - let $np = np.value; - - let current_time = Math.floor(Date.now() / 1000); - let $np_elapsed = current_time - $np.now_playing.played_at; - - if ($np_elapsed < 0) { - $np_elapsed = 0; - } else if ($np_elapsed >= $np.now_playing.duration) { - $np_elapsed = $np.now_playing.duration; - } - - np_elapsed.value = $np_elapsed; - }, - 1000 - ); - if (props.autoplay) { - switchStream(current_stream.value); + switchStream(currentStream.value); } }); @@ -356,27 +333,27 @@ const onNowPlayingUpdated = (np_new) => { // Set a "default" current stream if none exists. let $streams = streams.value; - let $current_stream = current_stream.value; + let $currentStream = currentStream.value; - if ($current_stream.url === '' && $streams.length > 0) { + if ($currentStream.url === '' && $streams.length > 0) { if (props.hlsIsDefault && enable_hls.value) { - current_stream.value = $streams[0]; + currentStream.value = $streams[0]; } else { - $current_stream = null; + $currentStream = null; if (np_new.station.listen_url !== '') { $streams.forEach(function (stream) { if (stream.url === np_new.station.listen_url) { - $current_stream = stream; + $currentStream = stream; } }); } - if ($current_stream === null) { - $current_stream = $streams[0]; + if ($currentStream === null) { + $currentStream = $streams[0]; } - current_stream.value = $current_stream; + currentStream.value = $currentStream; } } }; diff --git a/frontend/vue/components/Public/playerProps.js b/frontend/vue/components/Public/playerProps.js index 3bf76d82d..4aebb8892 100644 --- a/frontend/vue/components/Public/playerProps.js +++ b/frontend/vue/components/Public/playerProps.js @@ -17,5 +17,5 @@ export default { autoplay: { type: Boolean, default: false - } + }, } diff --git a/frontend/vue/functions/useNowPlaying.js b/frontend/vue/functions/useNowPlaying.js index 000754c9d..2e848e2b3 100644 --- a/frontend/vue/functions/useNowPlaying.js +++ b/frontend/vue/functions/useNowPlaying.js @@ -1,7 +1,8 @@ import NowPlaying from '~/components/Entity/NowPlaying'; -import {onMounted, shallowRef, watch} from "vue"; -import {useEventSource} from "@vueuse/core"; +import {onMounted, ref, shallowRef, watch} from "vue"; +import {useEventSource, useIntervalFn} from "@vueuse/core"; import {useAxios} from "~/vendor/axios"; +import {has} from "lodash"; export const nowPlayingProps = { nowPlayingUri: { @@ -23,15 +24,25 @@ export const nowPlayingProps = { default() { return NowPlaying; } - } + }, + timeUri: { + type: String, + required: true + }, }; export default function useNowPlaying(props) { const np = shallowRef(props.initialNowPlaying); + const currentTime = ref(Math.floor(Date.now() / 1000)); + const currentTrackDuration = ref(0); + const currentTrackElapsed = ref(0); + const setNowPlaying = (np_new) => { np.value = np_new; + currentTrackDuration.value = np_new?.now_playing?.duration ?? 0; + // Update the browser metadata for browsers that support it (i.e. Mobile Chrome) if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ @@ -48,16 +59,21 @@ export default function useNowPlaying(props) { })); } + // Trigger initial NP set. + setNowPlaying(np.value); + if (props.useSse) { const {data} = useEventSource(props.sseUri); - watch(data, (sse_data_raw) => { - const sse_data = JSON.parse(sse_data_raw); - const sse_np = sse_data?.pub?.data?.np || null; + watch(data, (data_raw) => { + const json_data = JSON.parse(data_raw); + const json_data_np = json_data?.pub?.data ?? {}; - if (sse_np) { + if (has(json_data_np, 'np')) { setTimeout(() => { - setNowPlaying(sse_np); + setNowPlaying(json_data_np.np); }, 3000); + } else if (has(json_data_np, 'time')) { + currentTime.value = json_data_np.time; } }); } else { @@ -76,12 +92,51 @@ export default function useNowPlaying(props) { }).catch(() => { setTimeout(checkNowPlaying, (!document.hidden) ? 30000 : 120000); }); - } + }; + + const checkTime = () => { + axios.get(props.timeUri, { + headers: { + 'Cache-Control': 'no-cache', + 'Pragma': 'no-cache', + 'Expires': '0', + } + }).then((response) => { + currentTime.value = response.data.timestamp; + }).finally(() => { + setTimeout(checkTime, (!document.hidden) ? 300000 : 600000); + }); + }; onMounted(() => { + setTimeout(checkTime, 5000); setTimeout(checkNowPlaying, 5000); }); } - return np; + onMounted(() => { + useIntervalFn( + () => { + let currentTrackPlayedAt = np.value?.now_playing?.played_at ?? 0; + let elapsed = currentTime.value - currentTrackPlayedAt; + + if (elapsed < 0) { + elapsed = 0; + } else if (elapsed >= currentTrackDuration.value) { + elapsed = currentTrackDuration.value; + } + + currentTrackElapsed.value = elapsed; + currentTime.value = currentTime.value + 1; + }, + 1000 + ); + }); + + return { + np, + currentTime, + currentTrackDuration, + currentTrackElapsed + }; } diff --git a/src/Controller/Frontend/PublicPages/HistoryAction.php b/src/Controller/Frontend/PublicPages/HistoryAction.php index a1cfd15a9..f11c85f08 100644 --- a/src/Controller/Frontend/PublicPages/HistoryAction.php +++ b/src/Controller/Frontend/PublicPages/HistoryAction.php @@ -4,16 +4,16 @@ declare(strict_types=1); namespace App\Controller\Frontend\PublicPages; -use App\Entity; use App\Exception\StationNotFoundException; use App\Http\Response; use App\Http\ServerRequest; +use App\VueComponent\NowPlayingComponent; use Psr\Http\Message\ResponseInterface; final class HistoryAction { public function __construct( - private readonly Entity\ApiGenerator\NowPlayingApiGenerator $npApiGenerator + private readonly NowPlayingComponent $nowPlayingComponent ) { } @@ -28,14 +28,6 @@ final class HistoryAction throw new StationNotFoundException(); } - $np = $this->npApiGenerator->currentOrEmpty($station); - $np->resolveUrls($request->getRouter()->getBaseUrl()); - - $customization = $request->getCustomization(); - $router = $request->getRouter(); - - $useStatic = $customization->useStaticNowPlaying(); - return $request->getView()->renderVuePage( response: $response->withHeader('X-Frame-Options', '*'), component: 'Vue_PublicHistory', @@ -46,13 +38,7 @@ final class HistoryAction 'page_class' => 'embed station-' . $station->getShortName(), 'hide_footer' => true, ], - props: [ - 'initialNowPlaying' => $np, - 'showAlbumArt' => !$customization->hideAlbumArt(), - 'nowPlayingUri' => $useStatic - ? '/api/nowplaying_static/' . urlencode($station->getShortName()) . '.json' - : $router->named('api:nowplaying:index', ['station_id' => $station->getShortName()]), - ], + props: $this->nowPlayingComponent->getProps($request), ); } } diff --git a/src/Controller/Frontend/PublicPages/PlayerAction.php b/src/Controller/Frontend/PublicPages/PlayerAction.php index 09bcaa05f..d5c292ac6 100644 --- a/src/Controller/Frontend/PublicPages/PlayerAction.php +++ b/src/Controller/Frontend/PublicPages/PlayerAction.php @@ -8,15 +8,14 @@ use App\Entity; use App\Exception\StationNotFoundException; use App\Http\Response; use App\Http\ServerRequest; -use App\Service\Centrifugo; +use App\VueComponent\NowPlayingComponent; use Psr\Http\Message\ResponseInterface; final class PlayerAction { public function __construct( - private readonly Entity\ApiGenerator\NowPlayingApiGenerator $npApiGenerator, private readonly Entity\Repository\CustomFieldRepository $customFieldRepo, - private readonly Centrifugo $centrifugo + private readonly NowPlayingComponent $nowPlayingComponent ) { } @@ -36,32 +35,10 @@ final class PlayerAction throw new StationNotFoundException(); } - $baseUrl = $request->getRouter()->getBaseUrl(); - - $np = $this->npApiGenerator->currentOrEmpty($station); - $np->resolveUrls($baseUrl); - // Build Vue props. - $customization = $request->getCustomization(); $router = $request->getRouter(); - $backendConfig = $station->getBackendConfig(); - - $props = [ - 'initialNowPlaying' => $np, - 'showAlbumArt' => !$customization->hideAlbumArt(), - 'autoplay' => !empty($request->getQueryParam('autoplay')), - 'showHls' => $backendConfig->getHlsEnableOnPublicPlayer(), - 'hlsIsDefault' => $backendConfig->getHlsIsDefault(), - 'nowPlayingUri' => $customization->useStaticNowPlaying() - ? '/api/nowplaying_static/' . urlencode($station->getShortName()) . '.json' - : $router->named('api:nowplaying:index', ['station_id' => $station->getShortName()]), - ]; - - if ($customization->useStaticNowPlaying() && $this->centrifugo->isSupported()) { - $props['useSse'] = true; - $props['sseUri'] = $this->centrifugo->getSseUrl($station); - } + $props = $this->nowPlayingComponent->getProps($request); // Render embedded player. if (!empty($embed)) { diff --git a/src/Service/Centrifugo.php b/src/Service/Centrifugo.php index 2ecc10cf0..6bb82996f 100644 --- a/src/Service/Centrifugo.php +++ b/src/Service/Centrifugo.php @@ -10,6 +10,9 @@ use GuzzleHttp\Client; final class Centrifugo { + public const GLOBAL_TIME_CHANNEL = 'global:time'; + + public function __construct( private readonly Environment $environment, private readonly Client $client, @@ -21,20 +24,38 @@ final class Centrifugo return $this->environment->isDocker(); } + public function sendTime(): void + { + $this->send([ + 'method' => 'publish', + 'params' => [ + 'channel' => self::GLOBAL_TIME_CHANNEL, + 'data' => [ + 'time' => time(), + ], + ], + ]); + } + public function publishToStation(Station $station, mixed $message): void + { + $this->send([ + 'method' => 'publish', + 'params' => [ + 'channel' => $this->getChannelName($station), + 'data' => [ + 'np' => $message, + ], + ], + ]); + } + + private function send(array $body): void { $this->client->post( 'http://localhost:6025/api', [ - 'json' => [ - 'method' => 'publish', - 'params' => [ - 'channel' => $this->getChannelName($station), - 'data' => [ - 'np' => $message, - ], - ], - ], + 'json' => $body, ] ); } @@ -47,6 +68,7 @@ final class Centrifugo [ 'subs' => [ $this->getChannelName($station) => [], + self::GLOBAL_TIME_CHANNEL => [], ], ], JSON_UNESCAPED_SLASHES | JSON_THROW_ON_ERROR | JSON_FORCE_OBJECT diff --git a/src/Sync/Task/SendTimeOnSocketTask.php b/src/Sync/Task/SendTimeOnSocketTask.php new file mode 100644 index 000000000..40ff7d6b5 --- /dev/null +++ b/src/Sync/Task/SendTimeOnSocketTask.php @@ -0,0 +1,34 @@ +centrifugo->isSupported()) { + return; + } + + $this->centrifugo->sendTime(); + } +} diff --git a/src/VueComponent/NowPlayingComponent.php b/src/VueComponent/NowPlayingComponent.php new file mode 100644 index 000000000..1406b363c --- /dev/null +++ b/src/VueComponent/NowPlayingComponent.php @@ -0,0 +1,53 @@ +getStation(); + + $baseUrl = $request->getRouter()->getBaseUrl(); + + $np = $this->npApiGenerator->currentOrEmpty($station); + $np->resolveUrls($baseUrl); + + $customization = $request->getCustomization(); + $router = $request->getRouter(); + + $backendConfig = $station->getBackendConfig(); + + $props = [ + 'initialNowPlaying' => $np, + 'showAlbumArt' => !$customization->hideAlbumArt(), + 'autoplay' => !empty($request->getQueryParam('autoplay')), + 'showHls' => $backendConfig->getHlsEnableOnPublicPlayer(), + 'hlsIsDefault' => $backendConfig->getHlsIsDefault(), + 'nowPlayingUri' => $customization->useStaticNowPlaying() + ? '/api/nowplaying_static/' . urlencode($station->getShortName()) . '.json' + : $router->named('api:nowplaying:index', ['station_id' => $station->getShortName()]), + 'timeUri' => $router->named('api:index:time'), + 'useSse' => false, + ]; + + if ($customization->useStaticNowPlaying() && $this->centrifugo->isSupported()) { + $props['useSse'] = true; + $props['sseUri'] = $this->centrifugo->getSseUrl($station); + } + + return $props; + } +} diff --git a/util/docker/web/centrifugo/config.yaml.tmpl b/util/docker/web/centrifugo/config.yaml.tmpl index 1797c05c2..3eea0aab0 100644 --- a/util/docker/web/centrifugo/config.yaml.tmpl +++ b/util/docker/web/centrifugo/config.yaml.tmpl @@ -20,6 +20,13 @@ namespaces: allow_history_for_client: true allow_history_for_anonymous: true + - name: "global" + history_size: 0 + allow_subscribe_for_client: true + allow_subscribe_for_anonymous: true + allow_history_for_client: true + allow_history_for_anonymous: true + {{if isTrue .Env.ENABLE_REDIS }} engine: "redis" redis_address: "{{ .Env.REDIS_HOST }}:{{ default .Env.REDIS_PORT "6379" }}"