mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add displayMode options (fix #4532)
This commit is contained in:
parent
ccab2cac68
commit
e452bb0a4f
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
20
registry/lib/components/video/outer-watchlater/options.ts
Normal file
20
registry/lib/components/video/outer-watchlater/options.ts
Normal 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>
|
||||
@ -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,12 +33,13 @@
|
||||
</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({
|
||||
@ -46,6 +47,7 @@ export default Vue.extend({
|
||||
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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
25
registry/lib/components/video/quick-favorite/options.ts
Normal file
25
registry/lib/components/video/quick-favorite/options.ts
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user