Support for new player UI (#2615)

This commit is contained in:
the1812 2022-07-09 16:04:47 +08:00
parent 8b43755e2f
commit b02daaf6ba
4 changed files with 83 additions and 98 deletions

View File

@ -1,11 +1,6 @@
<template> <template>
<span <span title="稍后再看" class="watchlater" :class="{ on }" @click="toggle()">
title="稍后再看" <VIcon class="icon" :size="28" icon="mdi-timetable"></VIcon>
class="watchlater"
:class="{ on }"
@click="toggle()"
>
<VIcon :size="28" icon="mdi-timetable"></VIcon>
<span class="text">稍后再看</span> <span class="text">稍后再看</span>
<div class="tip" :class="{ show: tipShowing }">{{ tipText }}</div> <div class="tip" :class="{ show: tipShowing }">{{ tipText }}</div>
</span> </span>
@ -56,13 +51,16 @@ export default Vue.extend({
</script> </script>
<style lang="scss"> <style lang="scss">
.video-toolbar .ops { .video-toolbar .ops,
.video-toolbar-v1 .toolbar-left {
.watchlater { .watchlater {
font-size: 14px;
font-weight: normal;
margin-right: 28px !important; margin-right: 28px !important;
position: relative; position: relative;
width: auto !important; width: auto !important;
@media screen and (max-width: 1320px), (max-height: 750px) { @media screen and (max-width: 1320px), (max-height: 750px) {
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;
} }
@ -90,7 +88,13 @@ export default Vue.extend({
} }
} }
} }
.more-ops-list > ul > li:nth-child(2) { .video-toolbar-v1 .watchlater .be-icon {
transform: translateY(1px);
}
.more-ops-list > ul,
.van-popover .more_dropdown {
> li:nth-child(2) {
display: none !important; display: none !important;
}
} }
</style> </style>

View File

@ -21,7 +21,7 @@ const entry: ComponentEntry<typeof options> = async ({ settings }) => {
return return
} }
await playerReady() await playerReady()
const favoriteButton = dq('.video-toolbar .ops .collect') as HTMLElement const favoriteButton = dq('.video-toolbar .ops .collect, .video-toolbar-v1 .toolbar-left .collect') as HTMLElement
if (!favoriteButton) { if (!favoriteButton) {
return return
} }

View File

@ -7,7 +7,7 @@
@click.right.prevent.self="listShowing = !listShowing" @click.right.prevent.self="listShowing = !listShowing"
> >
<i <i
class="quick-favorite-icon" class="quick-favorite-icon icon"
@click.left="toggle()" @click.left="toggle()"
@click.right.prevent="listShowing = !listShowing" @click.right.prevent="listShowing = !listShowing"
></i> ></i>
@ -19,8 +19,8 @@
快速收藏 快速收藏
</div> </div>
<div ref="selectList" class="select-list" :class="{ show: listShowing }"> <div ref="selectList" class="select-list" :class="{ show: listShowing }">
选择快速收藏夹:
<div class="lists"> <div class="lists">
选择快速收藏夹:
<VDropdown <VDropdown
v-model="selectedFavorite" v-model="selectedFavorite"
:items="lists.map(it => it.title)" :items="lists.map(it => it.title)"
@ -31,10 +31,10 @@
</template> </template>
</VDropdown> </VDropdown>
</div> </div>
</div>
<div class="lists-tip" :class="{ show: listShowing }"> <div class="lists-tip" :class="{ show: listShowing }">
右键点击快速收藏可再次打开 右键点击快速收藏可再次打开
</div> </div>
</div>
<div class="tip" :class="{ show: tipShowing }">{{ tipText }}</div> <div class="tip" :class="{ show: tipShowing }">{{ tipText }}</div>
</span> </span>
</template> </template>
@ -168,27 +168,28 @@ export default Vue.extend({
}, },
}) })
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "./font"; @import 'common';
@import './font';
.video-toolbar .ops { .quick-favorite {
.quick-favorite {
margin-right: 28px !important; margin-right: 28px !important;
position: relative; position: relative;
font-size: 0;
font-size: 14px; font-size: 14px;
font-weight: normal;
width: auto !important; width: auto !important;
.text { .text {
display: inline; display: inline;
} }
@media screen and (max-width: 1320px), (max-height: 750px) { @media screen and (max-width: 1320px), (max-height: 750px) {
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 { &-icon {
font-family: "quick-favorite" !important; font-family: 'quick-favorite' !important;
font-size: 28px;
display: inline-block; display: inline-block;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
@ -197,12 +198,14 @@ export default Vue.extend({
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&:after { &:after {
content: "\ea01"; content: '\ea01';
}
.video-toolbar-v1 & {
transform: translateY(1px);
} }
} }
.tip, .tip,
.select-list, .select-list {
.lists-tip {
line-height: normal; line-height: normal;
position: absolute; position: absolute;
top: calc(100% + 8px); top: calc(100% + 8px);
@ -210,7 +213,7 @@ export default Vue.extend({
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1000; z-index: 1000;
background: #000d; background: #000d;
padding: 4px 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
color: #eee; color: #eee;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
@ -221,18 +224,8 @@ export default Vue.extend({
pointer-events: initial; pointer-events: initial;
} }
} }
.tip {
padding: 8px;
}
.lists-tip {
top: calc(100% + 8px + 42px);
color: #ccc;
font-size: 12px;
z-index: 100;
}
.select-list { .select-list {
display: flex; @include v-center(8px);
align-items: center;
> * { > * {
white-space: nowrap; white-space: nowrap;
} }
@ -240,23 +233,11 @@ export default Vue.extend({
padding: 4px 32px; padding: 4px 32px;
} }
.lists { .lists {
margin-left: 8px; @include h-center(8px);
} }
// .v-dropdown { .lists-tip {
// color: black; color: #aaa;
// body.dark & { font-size: 12px;
// color: #eee;
// }
// .mdi-chevron-down {
// color: inherit !important;
// margin: 0 !important;
// transition: 0.2s ease-out;
// display: flex;
// align-items: center;
// justify-content: center;
// font-size: 16pt !important;
// }
// }
} }
} }
} }

View File

@ -29,7 +29,7 @@ const entry: ComponentEntry<typeof options> = async ({ settings }) => {
} }
await playerReady() await playerReady()
const favoriteButton = dq('.video-toolbar .ops .collect') const favoriteButton = dq('.video-toolbar .ops .collect, .video-toolbar-v1 .toolbar-left .collect')
if (!favoriteButton) { if (!favoriteButton) {
return return
} }