Add 3.x player support (#3187)

- playerControlBackground
- preserveDanmakuInput
This commit is contained in:
the1812 2022-09-02 23:04:48 +08:00
parent ceca726023
commit 82db7fc7e7
3 changed files with 59 additions and 13 deletions

View File

@ -1,23 +1,57 @@
@import "common";
@import 'common';
.bilibili-player-video-control {
&-mask {
background: transparent !important;
}
.bilibili-player-video-control-bottom {
background: rgba(0, 0, 0, var(--video-control-opacity)) !important;
margin: 5px 0 0 0 !important;
padding: 9px 0 0 !important;
height: 30px !important;
@include on-fullscreen {
margin: -2px 0 0 0 !important;
padding: 13px 0 0 !important;
height: 45px !important;
&::before {
content: '';
position: absolute;
bottom: 0;
height: calc(100% - 5px);
width: 100%;
background-color: rgba(0, 0, 0, var(--video-control-opacity));
z-index: -1;
@include on-fullscreen {
height: calc(100% + 2px);
}
}
}
}
.bpx-player-control {
&-mask {
background: transparent !important;
}
&-bottom {
&::before {
content: '';
position: absolute;
bottom: 0;
height: calc(100% - 17px);
width: 100%;
background-color: rgba(0, 0, 0, var(--video-control-opacity));
z-index: -1;
@include on-fullscreen {
height: calc(100% - 11px);
}
.video-container-v1 & {
height: calc(100% - 5px);
@include on-fullscreen {
height: calc(100% + 1px);
}
}
}
}
}
body {
&.video-control-progress-background {
.squirtle-progress-bar:not(.squirtle-progress-buffer):not(.squirtle-progress-timeline):not(.squirtle-progress-dot-container),
.bpx-player-progress-schedule {
background-color: transparent !important;
}
.bpx-player-progress,
.squirtle-progress-dot-container,
.bui-track-video-progress .bui-bar-wrap {
background: rgba(0, 0, 0, var(--video-control-opacity)) !important;
}

View File

@ -1,5 +1,10 @@
@import 'common';
@media screen and (max-width: 1200px) {
.bilibili-player.mode-webfullscreen .bilibili-player-video-inputbar {
display: flex !important;
.bpx-player-video-inputbar,
.bilibili-player-video-inputbar {
@include on-fullscreen {
display: flex !important;
}
}
}

View File

@ -1,10 +1,17 @@
import { ComponentMetadata } from '@/components/types'
import { toggleStyle } from '@/components/styled-component'
import { playerUrls } from '@/core/utils/urls'
const name = 'preserveDanmakuInput'
export const component: ComponentMetadata = {
...toggleStyle('preserveDanmakuInput', () => import('./danmaku-input.scss')),
name,
displayName: '强制保留弹幕发送栏',
entry: none,
instantStyles: [
{
name,
style: () => import('./danmaku-input.scss'),
},
],
tags: [
componentsTags.style,
componentsTags.video,