Merge pull request #556 from jellyfin/small-pre-release-fixes

Small pre release fixes

assets/styles/HomeHeader.scss

@@ -38,12 +38,9 @@
   background-size: contain;
   background-repeat: no-repeat;
   box-sizing: border-box;
-  background-color: #{map-get($material-dark, 'menus')};
-  mask-image: linear-gradient(
-    180deg,
-    rgba(37, 18, 18, 0.75) 0%,
-    rgba(0, 0, 0, 0) 100%
-  );
+  mask-image: linear-gradient(180deg,
+      rgba(37, 18, 18, 0.75) 0%,
+      rgba(0, 0, 0, 0) 100%);
   z-index: 1;
 }
 
@@ -64,8 +61,7 @@
     margin-right: 0;
     padding-bottom: (9 / 16) * 80%;
     background-position: right center;
-    mask-image: linear-gradient(
-        to right,
+    mask-image: linear-gradient(to right,
         hsla(0, 0%, 0%, 0) 0%,
         hsla(0, 0%, 0%, 0.182) 5.6%,
         hsla(0, 0%, 0%, 0.34) 9.9%,
@@ -81,10 +77,8 @@
         hsla(0, 0%, 0%, 0.989) 54.3%,
         hsla(0, 0%, 0%, 0.996) 66.6%,
         hsla(0, 0%, 0%, 0.999) 81.7%,
-        hsl(0, 0%, 0%) 100%
-      ),
-      linear-gradient(
-        to top,
+        hsl(0, 0%, 0%) 100%),
+      linear-gradient(to top,
         hsla(0, 0%, 0%, 0) 0%,
         hsla(0, 0%, 0%, 0.182) 5.6%,
         hsla(0, 0%, 0%, 0.34) 9.9%,
@@ -100,8 +94,7 @@
         hsla(0, 0%, 0%, 0.989) 54.3%,
         hsla(0, 0%, 0%, 0.996) 66.6%,
         hsla(0, 0%, 0%, 0.999) 81.7%,
-        hsl(0, 0%, 0%) 100%
-      );
+        hsl(0, 0%, 0%) 100%);
     mask-composite: intersect;
   }
 

components/Buttons/UserButton.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
     menuItems(): MenuItem[] {
       const menuItems = [];
 
-      if (this.$auth.$state.user.Policy.IsAdministrator) {
+      if (this.$auth.$state.user?.Policy?.IsAdministrator) {
         menuItems.push({
           title: this.$t('metadataEditor'),
           action: (): void => {

components/Item/Card.vue

@@ -92,6 +92,7 @@ import { mapActions } from 'vuex';
 import { BaseItemDto, ImageType } from '@jellyfin/client-axios';
 import imageHelper from '~/mixins/imageHelper';
 import itemHelper from '~/mixins/itemHelper';
+import { validLibraryTypes } from '~/utils/items';
 
 export default Vue.extend({
   mixins: [imageHelper, itemHelper],
@@ -140,10 +141,7 @@ export default Vue.extend({
   computed: {
     itemLink: {
       get(): string {
-        if (
-          this.item.Type === 'Folder' ||
-          this.item.Type === 'CollectionFolder'
-        ) {
+        if (this.item.Type && validLibraryTypes.includes(this.item.Type)) {
           return `/library/${this.item.Id}`;
         } else if (this.item.Type === 'Person') {
           return `/person/${this.item.Id}`;
@@ -324,7 +322,7 @@ export default Vue.extend({
 }
 
 .card-content {
-  background-color: #{map-get($material-dark, 'menus')};
+  background-color: #{map-get($material-light, 'menus')};
   overflow: hidden;
   position: absolute;
   top: 0;

components/Item/SeasonTabs.vue

@@ -11,7 +11,8 @@
           <v-list-item
             v-for="episode in seasonEpisodes[currentTab]"
             :key="episode.Id"
-            @click="play({ items: [episode] })"
+            nuxt
+            :to="`/item/${episode.Id}`"
           >
             <v-list-item-avatar tile width="20em" height="12em">
               <blurhash-image

components/Layout/AudioControls.vue

@@ -311,6 +311,10 @@ export default Vue.extend({
 }
 
 .audioControls.fullscreen {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.theme--dark .audioControls.fullscreen {
   background-color: rgba(0, 0, 0, 0.15);
 }
 

components/Layout/Backdrop.vue

@@ -51,13 +51,11 @@ export default Vue.extend({
     left: 0;
     right: 0;
     background-color: #{map-get($material-light, 'background')};
-    mix-blend-mode: screen;
     opacity: var(--o);
   }
 }
 
 .theme--dark .backdrop::after {
   background-color: #{map-get($material-dark, 'background')};
-  mix-blend-mode: multiply;
 }
 </style>

components/Layout/HomeHeader/HomeHeaderItems.vue

@@ -290,4 +290,8 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 @import '~/assets/styles/HomeHeader.scss';
+
+.slide-backdrop {
+  background-color: #{map-get($material-dark, 'menus')};
+}
 </style>

locales/en-US.json

@@ -43,6 +43,7 @@
   "discNumber": "Disc {discNumber}",
   "dislikes": "Dislikes",
   "edit": "Edit",
+  "editMetadata": "Edit metadata",
   "editPerson": "Edit person",
   "endDate": "End date",
   "endsAt": "Ends at {time}",

pages/library/_viewId.vue

@@ -42,6 +42,7 @@
 import Vue from 'vue';
 import { mapActions } from 'vuex';
 import { BaseItemDto } from '@jellyfin/client-axios';
+import { validLibraryTypes } from '~/utils/items';
 
 export default Vue.extend({
   data() {
@@ -132,9 +133,7 @@ export default Vue.extend({
 
       if (
         this.collectionInfo &&
-        ['CollectionFolder', 'Folder', 'UserView', 'playlists'].includes(
-          this.collectionInfo.Type || ''
-        )
+        validLibraryTypes.includes(this.collectionInfo.Type || '')
       ) {
         if (this.collectionInfo.Name) {
           this.setPageTitle({

utils/items.ts

@@ -1,3 +1,14 @@
+/**
+ * A list of valid collections that should be treated as folders.
+ */
+export const validLibraryTypes = [
+  'CollectionFolder',
+  'Folder',
+  'UserView',
+  'playlists',
+  'PhotoAlbum'
+];
+
 /**
  * Get the Material Design Icon name associated with a type of library
  *