267 lines
5.5 KiB
Plaintext
267 lines
5.5 KiB
Plaintext
<template>
|
|
<!-- 弹幕设置弹层 -->
|
|
<view
|
|
v-if="settingBarrageMode"
|
|
class="barrage-setting-layer"
|
|
:class="[isFullScreen ? 'full-screen' : '', NotchClass]">
|
|
<view class="place-holder" @click="handleToggleBarrageSetting"></view>
|
|
<view class="layer">
|
|
<view class="header">
|
|
<image
|
|
v-if="isFullScreen"
|
|
class="back-btn"
|
|
src="@/static/barrage/back@2x.png"
|
|
@click="handleToggleBarrageSetting"></image>
|
|
<text class="title">弹幕设置</text>
|
|
<image
|
|
v-if="!isFullScreen"
|
|
class="close-btn"
|
|
src="@/static/barrage/close_setting@2x.png"
|
|
@click="handleToggleBarrageSetting"
|
|
></image>
|
|
</view>
|
|
<view class="content">
|
|
<view class="setting-item">
|
|
<text class="item-label">不透明度</text>
|
|
<view class="item-slider">
|
|
<custom-slider
|
|
class="slider"
|
|
:value="barrageOpacity"
|
|
@change="handleSetBarrageOpacity"></custom-slider>
|
|
<text class="item-value">{{ barrageOpacity }}%</text>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">字号</text>
|
|
<view class="item-slider">
|
|
<custom-slider
|
|
class="slider"
|
|
:max="maxFontSize"
|
|
:min="minFontSize"
|
|
:step="fontSizeStep"
|
|
:value="barrageFontSize"
|
|
@change="handleSetBarrageFontSize"
|
|
></custom-slider>
|
|
<text class="item-value">{{ barrageFontSizeLabel }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">速度</text>
|
|
<view class="item-slider">
|
|
<custom-slider
|
|
class="slider"
|
|
:step="speedStep"
|
|
:value="barrageSpeedValue"
|
|
@change="handleSetBarrageSpeed"></custom-slider>
|
|
<text class="item-value">{{ barrageSpeedLabel }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">显示区域</text>
|
|
<view class="item-slider">
|
|
<custom-slider
|
|
class="slider"
|
|
:value="barrageArea"
|
|
@change="handleSetBarrageArea"
|
|
></custom-slider>
|
|
<text class="item-value">{{ barrageArea }}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomSlider from '@/components/player/CustomSlider.nvue'
|
|
|
|
//const hasNotchInScreen = plus.navigator.hasNotchInScreen();
|
|
|
|
const fontSizes = [
|
|
{
|
|
label: '超小',
|
|
value: 16
|
|
},
|
|
{
|
|
label: '小',
|
|
value: 22
|
|
},
|
|
{
|
|
label: '正常',
|
|
value: 28
|
|
},
|
|
{
|
|
label: '大',
|
|
value: 34
|
|
},
|
|
{
|
|
label: '超大',
|
|
value: 40
|
|
}
|
|
]
|
|
|
|
const speeds = [
|
|
{
|
|
label: '超慢',
|
|
value: 17000
|
|
},
|
|
{
|
|
label: '慢',
|
|
value: 14000
|
|
},
|
|
{
|
|
label: '正常',
|
|
value: 10000
|
|
},
|
|
{
|
|
label: '快',
|
|
value: 6000
|
|
},
|
|
{
|
|
label: '超快',
|
|
value: 3000
|
|
}
|
|
]
|
|
|
|
|
|
export default {
|
|
components: {
|
|
CustomSlider
|
|
},
|
|
data () {
|
|
return {
|
|
hasNotchInScreen,
|
|
speedStep: 25
|
|
}
|
|
},
|
|
props: {
|
|
isFullScreen: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
settingBarrageMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
barrageOpacity: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
barrageFontSize: {
|
|
type: Number,
|
|
default: 28
|
|
},
|
|
barrageSpeed: {
|
|
type: Number,
|
|
default: 10000
|
|
},
|
|
barrageArea: {
|
|
type: Number,
|
|
default: 100
|
|
}
|
|
},
|
|
computed: {
|
|
maxFontSize () {
|
|
return fontSizes[fontSizes.length - 1].value
|
|
},
|
|
minFontSize () {
|
|
return fontSizes[0].value
|
|
},
|
|
fontSizeStep () {
|
|
return (this.maxFontSize - this.minFontSize) / (fontSizes.length - 1)
|
|
},
|
|
barrageFontSizeLabel () {
|
|
const barrageFontSize = fontSizes.find(item => item.value === this.barrageFontSize);
|
|
return barrageFontSize.label
|
|
},
|
|
barrageSpeedLabel () {
|
|
const barrageSpeed = speeds.find(item => item.value === this.barrageSpeed);
|
|
return barrageSpeed.label
|
|
},
|
|
barrageSpeedValue () {
|
|
const barrageSpeedIndex = speeds.findIndex(item => item.value === this.barrageSpeed);
|
|
return barrageSpeedIndex * this.speedStep
|
|
},
|
|
NotchClass () {
|
|
return this.hasNotchInScreen ? 'notch' : '';
|
|
},
|
|
},
|
|
methods: {
|
|
handleToggleBarrageSetting () {
|
|
this.$emit('handleToggleBarrageSetting');
|
|
},
|
|
handleSetBarrageOpacity (value) {
|
|
this.$emit('handleSetBarrageOpacity', value);
|
|
},
|
|
handleSetBarrageFontSize (value) {
|
|
this.$emit('handleSetBarrageFontSize', value);
|
|
},
|
|
handleSetBarrageSpeed (value) {
|
|
const activeSpeedIndex = value / this.speedStep;
|
|
value = speeds[activeSpeedIndex].value
|
|
console.log(value);
|
|
this.$emit('handleSetBarrageSpeed', value);
|
|
},
|
|
handleSetBarrageArea (value) {
|
|
this.$emit('handleSetBarrageArea', value);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.barrage-setting-layer
|
|
position: fixed
|
|
top: 0
|
|
bottom: 0
|
|
right: 0
|
|
left: 0
|
|
&.full-screen
|
|
flex-direction: row
|
|
.layer
|
|
width 500rpx
|
|
.content
|
|
flex 1
|
|
&.notch
|
|
.layer
|
|
width: 588rpx;
|
|
.header
|
|
padding: 0 108rpx 0 20rpx
|
|
.content
|
|
padding-right: 88rpx
|
|
.place-holder
|
|
flex: 1
|
|
.layer
|
|
align-self: stretch
|
|
.header
|
|
flex-direction: row
|
|
align-items: center
|
|
height: 80rpx
|
|
padding: 0 20rpx
|
|
background-color: #141414
|
|
.title
|
|
flex: 1
|
|
font-size: 28rpx
|
|
color: #FF920A
|
|
.back-btn, .close-btn
|
|
width: 56rpx
|
|
height: 56rpx
|
|
.content
|
|
justify-content: space-around
|
|
height: 638rpx
|
|
background-color: rgba(20, 20, 20, 0.8)
|
|
.setting-item
|
|
padding: 0 30rpx
|
|
.item-label
|
|
font-size: 24rpx
|
|
color #FFFFFF
|
|
.item-slider
|
|
flex-direction: row
|
|
align-items: center
|
|
.slider
|
|
flex 1
|
|
.item-value
|
|
min-width: 72rpx
|
|
font-size: 24rpx
|
|
color #FFFFFF
|
|
</style> |