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
|
<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);
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
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
|
<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;
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
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