Add displayMode options (fix #4532)

This commit is contained in:
the1812 2024-03-05 22:54:42 +08:00
parent ccab2cac68
commit e452bb0a4f
6 changed files with 103 additions and 38 deletions

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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>