Add displayMode options (fix #4532)

registry/lib/components/video/outer-watchlater/OuterWatchlater.vue

@@ -2,7 +2,7 @@
   <span
     title="稍后再看"
     class="watchlater be-outer-watchlater video-toolbar-left-item"
-    :class="{ on }"
+    :class="{ on, ...displayModeClass }"
     @click="toggle()"
   >
     <VIcon class="icon" :size="28" icon="mdi-timetable"></VIcon>
@@ -14,14 +14,18 @@
 <script lang="ts">
 import { VIcon } from '@/ui'
 import { watchlaterList, toggleWatchlater } from '@/components/video/watchlater'
+import { DisplayMode, Options } from './options'
+import { addComponentListener, getComponentSettings } from '@/core/settings'
 
 export default Vue.extend({
   components: {
     VIcon,
   },
   data() {
+    const { displayMode } = getComponentSettings<Options>('outerWatchlater').options
     return {
       watchlaterList,
+      displayMode,
       aid: unsafeWindow.aid,
       tipText: '',
       tipShowing: false,
@@ -33,6 +37,17 @@ export default Vue.extend({
       console.log(this.watchlaterList, this.aid, this.watchlaterList.includes(parseInt(this.aid)))
       return this.watchlaterList.includes(parseInt(this.aid))
     },
+    displayModeClass() {
+      return {
+        'icon-only': this.displayMode === DisplayMode.Icon,
+        'icon-and-text': this.displayMode === DisplayMode.IconAndText,
+      }
+    },
+  },
+  created() {
+    addComponentListener('outerWatchlater.displayMode', (value: DisplayMode) => {
+      this.displayMode = value
+    })
   },
   methods: {
     showTip(text: string) {
@@ -62,12 +77,22 @@ export default Vue.extend({
     margin-right: 28px !important;
     position: relative;
     width: auto !important;
-    @media screen and (max-width: 1340px), (max-height: 750px) {
+
+    @mixin icon-only {
       margin-right: max(calc(min(11vw, 11vh) - 117.2px), 6px) !important;
       .text {
         display: none;
       }
     }
+    &.icon-only {
+      @include icon-only();
+    }
+    &:not(.icon-and-text) {
+      @media screen and (max-width: 1340px), (max-height: 750px) {
+        @include icon-only();
+      }
+    }
+
     .tip {
       position: absolute;
       top: calc(100% + 8px);

registry/lib/components/video/outer-watchlater/index.ts

@@ -1,22 +1,10 @@
-import {
-  defineComponentMetadata,
-  defineOptionsMetadata,
-  OptionsOfMetadata,
-} from '@/components/define'
+import { defineComponentMetadata } from '@/components/define'
 import { ComponentEntry } from '@/components/types'
 import { getUID, matchUrlPattern, mountVueComponent } from '@/core/utils'
 import { videoUrls, watchlaterUrls } from '@/core/utils/urls'
 import { KeyBindingAction } from '../../utils/keymap/bindings'
 import { addVideoActionButton } from '@/components/video/video-actions'
-
-const options = defineOptionsMetadata({
-  showInWatchlaterPages: {
-    defaultValue: false,
-    displayName: '在稍后再看页面中仍然显示',
-  },
-})
-
-type Options = OptionsOfMetadata<typeof options>
+import { Options, options } from './options'
 
 const entry: ComponentEntry<Options> = async ({ settings }) => {
   if (watchlaterUrls.some(matchUrlPattern) && !settings.options.showInWatchlaterPages) {

registry/lib/components/video/outer-watchlater/options.ts

@@ -0,0 +1,20 @@
+import { defineOptionsMetadata, OptionsOfMetadata } from '@/components/define'
+
+export enum DisplayMode {
+  Auto = '自动',
+  Icon = '图标',
+  IconAndText = '图标 + 文字',
+}
+export const options = defineOptionsMetadata({
+  showInWatchlaterPages: {
+    defaultValue: false,
+    displayName: '在稍后再看页面中仍然显示',
+  },
+  displayMode: {
+    defaultValue: DisplayMode.Auto,
+    displayName: '显示方式',
+    dropdownEnum: DisplayMode,
+  },
+})
+
+export type Options = OptionsOfMetadata<typeof options>

registry/lib/components/video/quick-favorite/QuickFavorite.vue

@@ -2,7 +2,7 @@
   <span
     class="quick-favorite be-quick-favorite video-toolbar-left-item"
     title="快速收藏"
-    :class="{ on: isFavorite }"
+    :class="{ on: isFavorite, ...displayModeClass }"
     @click.left.self="toggle()"
     @click.right.prevent.self="listShowing = !listShowing"
   >
@@ -33,19 +33,21 @@
   </span>
 </template>
 <script lang="ts">
-import { getComponentSettings } from '@/core/settings'
+import { addComponentListener, getComponentSettings } from '@/core/settings'
 import { getJsonWithCredentials, postTextWithCredentials } from '@/core/ajax'
 import { getUID, getCsrf } from '@/core/utils'
 import { logError } from '@/core/utils/log'
 import { Toast } from '@/core/toast'
 import { VDropdown } from '@/ui'
+import { DisplayMode, Options } from './options'
 
 const { options } = getComponentSettings('quickFavorite')
 export default Vue.extend({
   components: {
     VDropdown,
   },
   data() {
+    const { displayMode } = getComponentSettings<Options>('outerWatchlater').options
     return {
       aid: unsafeWindow.aid,
       favoriteTitle: '',
@@ -56,8 +58,17 @@ export default Vue.extend({
       lists: [],
       selectedFavorite: '<未选择>',
       listShowing: false,
+      displayMode,
     }
   },
+  computed: {
+    displayModeClass() {
+      return {
+        'icon-only': this.displayMode === DisplayMode.Icon,
+        'icon-and-text': this.displayMode === DisplayMode.IconAndText,
+      }
+    },
+  },
   watch: {
     selectedFavorite(value: string) {
       if (this.lists.length === 0) {
@@ -101,6 +112,9 @@ export default Vue.extend({
   },
   created() {
     this.syncFavoriteState()
+    addComponentListener('quickFavorite.displayMode', (value: DisplayMode) => {
+      this.displayMode = value
+    })
   },
   methods: {
     async syncFavoriteState() {
@@ -192,12 +206,22 @@ export default Vue.extend({
   .text {
     display: inline;
   }
-  @media screen and (max-width: 1340px), (max-height: 750px) {
+
+  @mixin icon-only {
     margin-right: max(calc(min(11vw, 11vh) - 117.2px), 6px) !important;
     .text {
       display: none;
     }
   }
+  &.icon-only {
+    @include icon-only();
+  }
+  &:not(.icon-and-text) {
+    @media screen and (max-width: 1340px), (max-height: 750px) {
+      @include icon-only();
+    }
+  }
+
   &-icon {
     font-family: 'quick-favorite' !important;
     font-size: 28px;

registry/lib/components/video/quick-favorite/index.ts

@@ -1,28 +1,11 @@
-import {
-  defineComponentMetadata,
-  defineOptionsMetadata,
-  OptionsOfMetadata,
-} from '@/components/define'
+import { defineComponentMetadata } from '@/components/define'
 import { ComponentEntry } from '@/components/types'
 import { getUID, matchUrlPattern, mountVueComponent } from '@/core/utils'
 import { favoriteListUrls, videoUrls } from '@/core/utils/urls'
 import { KeyBindingAction } from '../../utils/keymap/bindings'
 import { addVideoActionButton } from '@/components/video/video-actions'
 import { videoChange } from '@/core/observer'
-
-const options = defineOptionsMetadata({
-  favoriteFolderID: {
-    defaultValue: 0,
-    displayName: '快速收藏夹ID',
-    hidden: true,
-  },
-  showInFavoritePages: {
-    defaultValue: false,
-    displayName: '在收藏夹播放页面仍然显示',
-  },
-})
-
-type Options = OptionsOfMetadata<typeof options>
+import { options, Options } from './options'
 
 const entry: ComponentEntry<Options> = async ({ settings }) => {
   if (favoriteListUrls.some(matchUrlPattern) && !settings.options.showInFavoritePages) {

registry/lib/components/video/quick-favorite/options.ts

@@ -0,0 +1,25 @@
+import { defineOptionsMetadata, OptionsOfMetadata } from '@/components/define'
+
+export enum DisplayMode {
+  Auto = '自动',
+  Icon = '图标',
+  IconAndText = '图标 + 文字',
+}
+export const options = defineOptionsMetadata({
+  favoriteFolderID: {
+    defaultValue: 0,
+    displayName: '快速收藏夹ID',
+    hidden: true,
+  },
+  showInFavoritePages: {
+    defaultValue: false,
+    displayName: '在收藏夹播放页面仍然显示',
+  },
+  displayMode: {
+    defaultValue: DisplayMode.Auto,
+    displayName: '显示方式',
+    dropdownEnum: DisplayMode,
+  },
+})
+
+export type Options = OptionsOfMetadata<typeof options>