Merge pull request #123 from ttshivers/better_background

refactor(background): use v-img container for background
ttshivers · Sep 6, 2020 · 48dd320 · 48dd320
2 parents 3ecdd72 + c76bd1d
commit 48dd320
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 264 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -101,50 +101,61 @@
     </v-app-bar>
 
     <v-main
-      :style="mainStyle"
       class="main-content"
       app
     >
       <v-container
         align="start"
-        :style="containerStyle"
-        style="height: 100%;"
+        class="pa-0"
         fluid
       >
-        <v-container
-          v-if="!GET_CONFIG"
-          fill-height
+        <v-img
+          :src="GET_BACKGROUND"
+          :height="bgHeight"
+          @load="backgroundLoad"
+          @error="backgroundError"
         >
-          <v-row
-            justify="center"
-            align="center"
-            class="pt-4 text-center"
+          <v-sheet
+            :color="sheetColor"
+            class="overflow-y-auto pa-3"
+            :height="bgHeight"
           >
-            <v-col>
-              <v-progress-circular
-                indeterminate
-                size="60"
-                class="amber--text"
-              />
-            </v-col>
-          </v-row>
-        </v-container>
-
-        <router-view v-else />
-
-        <v-snackbar
-          :value="GET_SNACKBAR_OPEN"
-          color="green darken-2"
-          bottom
-          timeout="4000"
-          @input="SET_SNACKBAR_OPEN"
-        >
-          <div style="text-align: center; width: 100%;">
-            {{ GET_SNACKBAR_MESSAGE }}
-          </div>
-        </v-snackbar>
-
-        <upnext v-if="GET_UP_NEXT_POST_PLAY_DATA" />
+            <v-container
+              v-if="!GET_CONFIG"
+              fill-height
+            >
+              <v-row
+                justify="center"
+                align="center"
+                class="pt-4 text-center"
+              >
+                <v-col>
+                  <v-progress-circular
+                    indeterminate
+                    size="60"
+                    class="amber--text"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+
+            <router-view v-else />
+
+            <v-snackbar
+              :value="GET_SNACKBAR_OPEN"
+              color="green darken-2"
+              bottom
+              timeout="4000"
+              @input="SET_SNACKBAR_OPEN"
+            >
+              <div style="text-align: center; width: 100%;">
+                {{ GET_SNACKBAR_MESSAGE }}
+              </div>
+            </v-snackbar>
+
+            <upnext v-if="GET_UP_NEXT_POST_PLAY_DATA" />
+          </v-sheet>
+        </v-img>
       </v-container>
     </v-main>
   </v-app>
@@ -173,6 +184,12 @@ export default {
     redirection,
   ],
 
+  data() {
+    return {
+      numBackgroundErrors: 0,
+    };
+  },
+
   computed: {
     ...mapGetters([
       'GET_UP_NEXT_POST_PLAY_DATA',
@@ -240,16 +257,14 @@ export default {
       return `(max-width: ${this.$vuetify.breakpoint.thresholds.xs}px)`;
     },
 
-    mainStyle() {
+    sheetColor() {
       return this.GET_BACKGROUND
-        ? { backgroundImage: `url(${this.GET_BACKGROUND})` }
-        : {};
+        ? 'rgba(0,0,0,0.7)'
+        : 'transparent';
     },
 
-    containerStyle() {
-      return this.GET_BACKGROUND
-        ? { background: 'rgba(0,0,0,0.7)' }
-        : {};
+    bgHeight() {
+      return this.$vuetify.breakpoint.height - this.$vuetify.application.top;
     },
 
     inviteUrl() {
@@ -311,7 +326,7 @@ export default {
   async created() {
     if (this.GET_PLEX_AUTH_TOKEN) {
       // Kick off a bunch of requests that we need for later
-      this.setRandomBackground();
+      this.FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE();
 
       try {
         await Promise.all([
@@ -354,22 +369,32 @@ export default {
     ]),
 
     ...mapActions('plexservers', [
-      'FETCH_RANDOM_IMAGE_URL',
+      'FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE',
     ]),
 
     ...mapMutations([
       'SET_SNACKBAR_OPEN',
       'SET_NAVIGATE_TO_PLAYER',
-      'SET_BACKGROUND',
       'SET_NAVIGATE_HOME',
     ]),
 
     ...mapMutations('plex', [
       'SET_PLEX_AUTH_TOKEN',
     ]),
 
-    async setRandomBackground() {
-      this.SET_BACKGROUND(await this.FETCH_RANDOM_IMAGE_URL());
+    backgroundLoad() {
+      this.numBackgroundFailures = 0;
+    },
+
+    async backgroundError(e) {
+      this.numBackgroundFailures += 1;
+      if (this.numBackgroundFailures > 3) {
+        console.error(`Failed ${this.numBackgroundFailures} times finding a background. Giving up`);
+        return;
+      }
+
+      console.warn('Error loading background, trying again', e);
+      await this.FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE();
     },
 
     onInviteCopied() {
@@ -390,11 +415,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.main-content {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-</style>
diff --git a/src/player/index.js b/src/player/index.js
@@ -11,7 +11,7 @@ export const getControlsOffset = (fallbackHeight) => (areControlsShown()
   ? (getPlayer()?.getMediaElement()?.offsetHeight || fallbackHeight) * 0.025 + 48 || 0
   : 0);
 
-export const isPaused = () => getPlayer().getMediaElement().paused;
+export const isPaused = () => getPlayer()?.getMediaElement()?.paused;
 
 export const isPresentationPaused = () => isPaused()
   && !getOverlay().getControls().isSeeking();

diff --git a/src/store/modules/plexservers/actions.js b/src/store/modules/plexservers/actions.js
@@ -3,21 +3,34 @@ import { fetchJson, queryFetch } from '@/utils/fetchutils';
 import scoreMedia from './mediascoring';
 
 export default {
-  FETCH_RANDOM_ITEM: async ({ getters, dispatch }, { machineIdentifier, signal }) => {
+  FETCH_RANDOM_LIBRARY_KEY: async ({ getters, dispatch }, { machineIdentifier, signal }) => {
     await dispatch('FETCH_ALL_LIBRARIES_IF_NEEDED', { machineIdentifier, signal });
     const libraryKeys = getters.GET_PLEX_SERVER(machineIdentifier).libraries
       .map((library) => library.key);
 
-    const libraryKey = sample(libraryKeys);
+    return sample(libraryKeys);
+  },
+
+  FETCH_RANDOM_SERVER: async ({ getters, dispatch }) => {
+    await dispatch('plex/FETCH_PLEX_DEVICES_IF_NEEDED', null, { root: true });
+
+    const machineIdentifier = sample(getters.GET_CONNECTABLE_PLEX_SERVER_IDS);
+    if (!machineIdentifier) {
+      throw new Error('No valid servers found');
+    }
+
+    return machineIdentifier;
+  },
 
+  FETCH_RANDOM_LIBRARY_ITEM: async ({ dispatch }, { machineIdentifier, sectionId, signal }) => {
     const librarySize = await dispatch('FETCH_LIBRARY_SIZE', {
-      machineIdentifier, sectionId: libraryKey, signal,
+      machineIdentifier, sectionId, signal,
     });
     const randomItemIndex = randomInt(librarySize - 1);
 
     const contents = await dispatch('FETCH_LIBRARY_CONTENTS', {
       machineIdentifier,
-      sectionId: libraryKey,
+      sectionId,
       start: randomItemIndex,
       size: 1,
       signal,
@@ -26,26 +39,22 @@ export default {
     return contents[0];
   },
 
-  FETCH_RANDOM_IMAGE_URL: async ({ getters, dispatch }, signal) => {
-    await dispatch('plex/FETCH_PLEX_DEVICES_IF_NEEDED', null, { root: true });
+  FETCH_RANDOM_ITEM: async ({ dispatch }, { machineIdentifier, libraryKey, signal } = {}) => {
+    const chosenServerId = machineIdentifier || await dispatch('FETCH_RANDOM_SERVER');
 
-    const machineIdentifier = sample(getters.GET_CONNECTABLE_PLEX_SERVER_IDS);
-    if (!machineIdentifier) {
-      throw new Error('No valid servers found');
-    }
-
-    const result = await dispatch('FETCH_RANDOM_ITEM', { machineIdentifier, signal });
-    if (!result) {
-      throw new Error('No result found');
-    }
+    const chosenLibraryKey = libraryKey
+    || await dispatch('FETCH_RANDOM_LIBRARY_KEY', { machineIdentifier: chosenServerId, signal });
 
-    return getters.GET_MEDIA_IMAGE_URL({
-      machineIdentifier,
-      mediaUrl: result.art || result.thumb,
-      width: window.screen.width,
-      height: window.screen.height,
-      blur: 8,
+    const item = await dispatch('FETCH_RANDOM_LIBRARY_ITEM', {
+      machineIdentifier: chosenServerId,
+      sectionId: chosenLibraryKey,
+      signal,
     });
+
+    return {
+      ...item,
+      machineIdentifier: chosenServerId,
+    };
   },
 
   FETCH_PLEX_SERVER: ({ getters, rootGetters }, {
@@ -377,4 +386,14 @@ export default {
     },
     signal,
   }),
+
+  SET_MEDIA_AS_BACKGROUND: async ({ getters, commit }, media) => {
+    const url = getters.GET_MEDIA_BACKGROUND_URL(media);
+    commit('SET_BACKGROUND', url, { root: true });
+  },
+
+  FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE: async ({ dispatch }, params) => {
+    const item = await dispatch('FETCH_RANDOM_ITEM', params);
+    return dispatch('SET_MEDIA_AS_BACKGROUND', item);
+  },
 };
diff --git a/src/store/modules/plexservers/getters.js b/src/store/modules/plexservers/getters.js
@@ -48,5 +48,15 @@ export default {
     return makeUrl(`${server.chosenConnection.uri}/photo/:/transcode/`, params);
   },
 
+  GET_MEDIA_BACKGROUND_URL: (state, getters) => (
+    { machineIdentifier, art, thumb },
+  ) => getters.GET_MEDIA_IMAGE_URL({
+    machineIdentifier,
+    mediaUrl: art || thumb,
+    width: window.screen.width,
+    height: window.screen.height,
+    blur: 8,
+  }),
+
   GET_BLOCKED_SERVER_IDS: (state) => state.blockedServerIds,
 };
diff --git a/src/views/plexbrowser/plexbrowser.vue b/src/views/plexbrowser/plexbrowser.vue
@@ -420,7 +420,7 @@ export default {
 
   created() {
     this.SET_ACTIVE_METADATA(null);
-    this.setRandomBackground();
+    this.FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE({ signal: this.abortController.signal });
   },
 
   beforeDestroy() {
@@ -431,7 +431,7 @@ export default {
     ...mapActions('plexservers', [
       'SEARCH_PLEX_SERVER',
       'FETCH_ON_DECK',
-      'FETCH_RANDOM_IMAGE_URL',
+      'FETCH_AND_SET_RANDOM_BACKGROUND_IMAGE',
     ]),
 
     ...mapActions('plex', [
@@ -440,13 +440,8 @@ export default {
 
     ...mapMutations([
       'SET_ACTIVE_METADATA',
-      'SET_BACKGROUND',
     ]),
 
-    async setRandomBackground() {
-      this.SET_BACKGROUND(await this.FETCH_RANDOM_IMAGE_URL(this.abortController.signal));
-    },
-
     async fetchOnDeck() {
       this.onDeck = await this.FETCH_ON_DECK({
         machineIdentifier: this.GET_LAST_SERVER_ID,

diff --git a/src/views/plexbrowser/plexcontent.vue b/src/views/plexbrowser/plexcontent.vue
@@ -630,10 +630,10 @@ export default {
       'FETCH_RELATED',
       'FETCH_MEDIA_CHILDREN',
       'MARK_WATCHED',
+      'SET_MEDIA_AS_BACKGROUND',
     ]),
 
     ...mapMutations([
-      'SET_BACKGROUND',
       'SET_ACTIVE_METADATA',
     ]),
 
@@ -648,6 +648,7 @@ export default {
       });
 
       this.SET_ACTIVE_METADATA(this.contents);
+      await this.SET_MEDIA_AS_BACKGROUND(this.contents);
 
       if (this.contents.type === 'episode') {
         this.parentData = await this.FETCH_MEDIA_CHILDREN({
@@ -664,7 +665,6 @@ export default {
           count: 7,
         });
       }
-      this.setBackground();
     },
 
     getLittleThumb(content) {
@@ -677,18 +677,6 @@ export default {
       });
     },
 
-    setBackground() {
-      this.SET_BACKGROUND(
-        this.GET_MEDIA_IMAGE_URL({
-          machineIdentifier: this.machineIdentifier,
-          mediaUrl: this.contents.art,
-          width: getAppWidth() / 4,
-          height: getAppHeight() / 4,
-          blur: 2,
-        }),
-      );
-    },
-
     markWatched() {
       return this.MARK_WATCHED({
         machineIdentifier: this.machineIdentifier,