20240517
This commit is contained in:
267
components/barrage/SettingLayer.nvue
Normal file
267
components/barrage/SettingLayer.nvue
Normal file
@@ -0,0 +1,267 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user