使用弹幕库插件后设置面板中的范围滑块range属性设置不生效

[cong71925]

概述

在使用弹幕库插件后，设置面板中的范围滑块range属性设置不生效，同时subtitleOffset的预期行为与实际不符，预期为[-5s, 5s]，实际是[0s, 10s]。

预期行为

const range = [0, -5, 5, 0.1]; 
$range.value = '0'; 
$range.min = '-5'; 
$range.max = '5';
$range.step = '0.1';

实际行为

const range = [0, -5, 5, 0.1]; 
$range.value = '0'; 
$range.min = '0'; 
$range.max = '10';
$range.step = '1';

复现

<template>
  <div ref="ArtRef" style="width: 800px;height: 480px;"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Artplayer from 'artplayer'
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
const ArtRef = ref('')
let art: Artplayer
onMounted(() => {
  art = new Artplayer({
    url: 'https://www.artplayer.org/assets/sample/video.mp4',
    container: ArtRef.value,
    setting: true,
    settings: [
      {
        name: 'subtitle-offset',
        html: '偏移',
        tooltip: '0s',
        range: [0, -7, 7, 0.1],
        onChange(item) {
          this.subtitleOffset = item.range
          return item.range + 's'
        },
      }
    ],
    plugins: [
      artplayerPluginDanmuku({
        danmuku: 'https://d.artplayer.org?id=BV1ks411W7r5'
      })
    ]
  })
  art.on('ready', () => {
    const { $range } = art.setting.find('subtitle-offset')
    console.log($range)
    // <input type="range" min="0" max="10" step="1" class="art-setting-range">
  })
})
onBeforeUnmount(() => {
  art?.destroy()
})
</script>

环境

• ArtPlayer Version: 5.0.9
• artplayer-plugin-danmuku Version: 5.0.1
• Browser: Chrome 114.0.5735.110
• Vite Version: 4.3.4
• Vue Version: 3.2.47

临时解决方案

const art = new Artplayer({
    url: 'https://www.artplayer.org/assets/sample/video.mp4',
    container: '.art-player',
    plugins: [
      artplayerPluginDanmuku({
        danmuku: 'https://d.artplayer.org?id=BV1ks411W7r5'
      })
    ],
    settings: [
        {
            name: 'subtitle-offset',
            html: '偏移',
            tooltip: '0s',
            range: [0, -5, 5, 0.1],
            onChange(item) {
                this.subtitleOffset = item.range;
                return item.range + 's';
            },
        }
    ]
})
art.on('ready', () => {
        const { $range } = art.setting.find('subtitle-offset')
        $range.min = '-5'
        $range.max = '5'
        $range.step = '0.1'
})
art.on('restart', () => {
        const { $range } = art.setting.find('subtitle-offset')
        $range.min = '-5'
        $range.max = '5'
        $range.step = '0.1'
})