From 48eb2eadcb766f46cce7e07a0bfa8d4d09470d92 Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Thu, 23 Feb 2023 23:25:32 +0100
Subject: [PATCH] refactor: better video player routing

---
 frontend/locales/en-US.json                   |  4 +++
 .../src/components/Playback/OsdPlayer.vue     |  2 +-
 .../components/Playback/PiPVideoPlayer.vue    |  4 +--
 .../src/components/Playback/PlayerElement.vue | 25 +++++++++++++++++++
 frontend/src/layouts/default.vue              |  2 +-
 frontend/src/pages/playback/video/index.vue   |  8 +-----
 frontend/src/store/playbackManager.ts         | 19 +-------------
 frontend/src/store/playerElement.ts           |  8 +++---
 8 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index b92e52bee0b..8570208e901 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -70,6 +70,10 @@
       "errorCode": "Error code: {errorCode}",
       "videoPlayerError": "The video player encountered an unrecoverable error."
     },
+    "playback": {
+      "mediaError": "Fatal media error encountered, trying to recover",
+      "networkError": "Fatal network error encountered, trying to recover"
+    },
     "unauthorized": "You're not authorized to access this page"
   },
   "failedRetrievingDisplayPreferences": "Unable to get display preferences. Using last known settings.",
diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
index 9d3ddd84453..45d8ca64d09 100644
--- a/frontend/src/components/Playback/OsdPlayer.vue
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -13,7 +13,7 @@
             <v-btn :icon="IMdiClose" @click="playbackManager.stop" />
             <v-btn
               :icon="IMdiChevronDown"
-              @click="playerElement.toggleMinimize" />
+              @click="playerElement.toggleFullscreenVideoPlayer" />
           </div>
           <div class="d-flex ml-auto">
             <cast-button />
diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index 481bdf0a0db..2a2b0af9ffc 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -20,7 +20,7 @@
           width="100%">
           <div class="d-flex flex-column">
             <div class="d-flex flex-row">
-              <v-btn icon @click="playerElement.toggleMinimize">
+              <v-btn icon @click="playerElement.toggleFullscreenVideoPlayer">
                 <v-icon>
                   <i-mdi-arrow-expand-all />
                 </v-icon>
@@ -80,7 +80,7 @@ const playbackManager = playbackManagerStore();
 
 const keys = useMagicKeys();
 
-whenever(keys.f, () => playerElement.toggleMinimize);
+whenever(keys.f, () => playerElement.toggleFullscreenVideoPlayer);
 
 onMounted(() => {
   playerElement.isPiPMounted = true;
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 3cbf9e83422..7d4fea26ede 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { computed, watch, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import { isNil } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
 import Hls, { ErrorData, ErrorTypes, Events } from 'hls.js';
@@ -41,6 +42,7 @@ const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
 
 const { t } = useI18n();
+const router = useRouter();
 /**
  * Safari iOS doesn't support hls.js, so we need to handle the cases where we don't need hls.js
  */
@@ -118,11 +120,13 @@ function onHlsEror(_event: Events.ERROR, data: ErrorData): void {
     switch (data.type) {
       case ErrorTypes.NETWORK_ERROR: {
         // try to recover network error
+        useSnackbar(t('errors.playback.networkError'), 'error');
         console.error('fatal network error encountered, try to recover');
         hls.startLoad();
         break;
       }
       case ErrorTypes.MEDIA_ERROR: {
+        useSnackbar(t('errors.playback.mediaError'), 'error');
         console.error('fatal media error encountered, try to recover');
         hls.recoverMediaError();
         break;
@@ -152,6 +156,27 @@ watch(
   }
 );
 
+watch(
+  () => ({ currentItem: playbackManager.currentItem }),
+  (newValue, oldValue) => {
+    if (
+      (!newValue.currentItem &&
+        router.currentRoute.value.fullPath === '/playback/video') ||
+      (newValue.currentItem &&
+        !oldValue?.currentItem &&
+        playbackManager.currentlyPlayingMediaType === 'Video')
+    ) {
+      /**
+       * If no item is present, we either manually loaded this or playback is stopped
+       * OR
+       * If there was no item and there's now a video, default to going FS
+       */
+      playerElement.toggleFullscreenVideoPlayer();
+    }
+  },
+  { immediate: true }
+);
+
 watch(mediaElementRef, async () => {
   await nextTick();
   detachHls();
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
index 73861fa03cc..2eb248f344b 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -10,7 +10,7 @@
   <pi-p-video-player
     v-if="
       playbackManager.currentlyPlayingMediaType === 'Video' &&
-      playerElement.isMinimized
+      !playerElement.isFullscreenVideoPlayer
     " />
 </template>
 
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index 89331f5fc67..d621f845257 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -16,12 +16,10 @@ meta:
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
 import { playbackManagerStore, playerElementStore } from '@/store';
 import { mediaElementRef } from '@/store/playbackManager';
 
-const router = useRouter();
 const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
 
@@ -49,16 +47,12 @@ function toggleFullscreen(): void {
   }
 }
 
-if (!playbackManager.currentItem) {
-  router.replace('/');
-}
-
 onBeforeUnmount(() => {
   if (fullscreen.isFullscreen.value) {
     fullscreen.exit();
   }
 
-  if (!playerElement.isMinimized) {
+  if (playerElement.isFullscreenVideoPlayer) {
     playbackManager.stop();
   }
 
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 3c409859cd1..86e1988f4f3 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -1145,31 +1145,14 @@ class PlaybackManagerStore {
      */
     watch(
       () => this.currentItemIndex,
-      async (newIndex, oldIndex) => {
+      async (newIndex) => {
         await this.fetchCurrentMediaSource();
 
-        const router = useRouter();
-
         if (newIndex && !state.currentSourceUrl) {
           const { t } = usei18n();
 
           useSnackbar(t('errors.cantPlayItem'), 'error');
           this.stop();
-        } else if (
-          this.currentlyPlayingMediaType === 'Video' &&
-          oldIndex === undefined &&
-          newIndex !== undefined
-        ) {
-          router.push('/playback/video');
-        } else if (
-          router.currentRoute.value.fullPath === '/playback/video' &&
-          newIndex === undefined
-        ) {
-          router.replace(
-            typeof router.options.history.state.back === 'string'
-              ? router.options.history.state.back
-              : '/'
-          );
         }
 
         if (this.previousItem?.Id) {
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index 858e4a0bd48..abe42ba294d 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -60,14 +60,14 @@ class PlayerElementStore {
     state.isStretched = newisStretched;
   }
 
-  public get isMinimized(): boolean {
-    return useRouter().currentRoute.value.fullPath !== '/playback/video';
+  public get isFullscreenVideoPlayer(): boolean {
+    return useRouter().currentRoute.value.fullPath === '/playback/video';
   }
 
   /**
    * == ACTIONS ==
    */
-  public toggleMinimize = (): void => {
+  public toggleFullscreenVideoPlayer = (): void => {
     /**
      * Destroys SSO before chaning view cause the canvas needs to be destroyed to be recreated in the other view
      */
@@ -75,7 +75,7 @@ class PlayerElementStore {
 
     const router = useRouter();
 
-    if (this.isMinimized) {
+    if (!this.isFullscreenVideoPlayer) {
       router.push('/playback/video');
     } else {
       router.replace(