update

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -1,5 +1,4 @@
 import i18n from './i18n';
-import { opacity, size, speed, synchronousPlayback } from './setting';
 import { filter, getRect, getDanmuRef } from './utils';
 import { bilibiliDanmuParseFromUrl } from './bilibili';
 import getDanmuTop from './getDanmuTop';
@@ -7,10 +6,6 @@ import getDanmuTop from './getDanmuTop';
 export default class Danmuku {
     constructor(art, option) {
         art.i18n.update(i18n);
-        art.setting.add(opacity);
-        art.setting.add(size);
-        art.setting.add(speed);
-        art.setting.add(synchronousPlayback);
         this.art = art;
         this.queue = [];
         this.option = {};

packages/artplayer-plugin-danmuku/src/setting.js

@@ -1,146 +0,0 @@
-export function opacity(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-opacity',
-        index: 10,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="1" min="0.1" max="1" step="0.1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = Number(value) * 100;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    opacity: Number(value),
-                });
-            });
-
-            art.on('artplayerPluginDanmuku:config', config => {
-                if ($range.value !== config.opacity) {
-                    $range.value = config.opacity;
-                    $value.innerText = config.opacity * 100;
-                }
-            });
-        },
-    };
-}
-
-export function size(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-size',
-        index: 11,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu size')}: <span class="art-value">25</span>px
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="25" min="14" max="30" step="1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = value;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    fontSize: Number(value),
-                });
-            });
-
-            art.on('artplayerPluginDanmuku:config', config => {
-                if ($range.value !== config.fontSize) {
-                    $range.value = config.fontSize;
-                    $value.innerText = config.fontSize;
-                }
-            });
-        },
-    };
-}
-
-export function speed(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-speed',
-        index: 12,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="5" min="1" max="10" step="1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = value;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    speed: Number(value),
-                });
-            });
-
-            art.on('artplayerPluginDanmuku:config', config => {
-                if ($range.value !== config.speed) {
-                    $range.value = config.speed;
-                    $value.innerText = config.speed;
-                }
-            });
-        },
-    };
-}
-
-export function synchronousPlayback(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-    return {
-        name: 'danmuku-synchronousPlayback',
-        index: 13,
-        html: `
-            <label class="art-setting-checkbox">
-                <input type="checkbox"/>${i18n.get('Danmu speed synchronous playback multiple')}
-            </label>
-        `,
-        mounted: $setting => {
-            const $checkbox = $setting.querySelector('input[type=checkbox]');
-            proxy($checkbox, 'change', () => {
-                art.plugins.artplayerPluginDanmuku.config({
-                    synchronousPlayback: $checkbox.checked,
-                });
-            });
-
-            art.on('artplayerPluginDanmuku:config', config => {
-                if ($checkbox.checked !== config.synchronousPlayback) {
-                    $checkbox.checked = config.synchronousPlayback;
-                }
-            });
-        },
-    };
-}

packages/artplayer/src/icons/index.js

@@ -33,12 +33,12 @@ export default class Icons {
             setting,
             fullscreen,
             fullscreenWeb,
+            pip,
             arrowLeft,
             arrowRight,
             playbackRate,
             aspectRatio,
             config,
-            pip,
             ...art.option.icons,
         };
 

packages/artplayer/src/player/subtitleOffsetMix.js

@@ -4,16 +4,20 @@ export default function subtitleOffsetMix(art) {
     const { clamp } = art.constructor.utils;
     const { notice, template, i18n } = art;
 
+    let offsetCache = 0;
     let cuesCache = [];
     art.on('subtitle:switch', () => {
         cuesCache = [];
     });
 
     def(art, 'subtitleOffset', {
+        get() {
+            return offsetCache;
+        },
         set(value) {
             if (template.$track && template.$track.track) {
                 const cues = Array.from(template.$track.track.cues);
-                const time = clamp(value, -5, 5);
+                offsetCache = clamp(value, -5, 5);
 
                 for (let index = 0; index < cues.length; index++) {
                     const cue = cues[index];
@@ -23,8 +27,8 @@ export default function subtitleOffsetMix(art) {
                             endTime: cue.endTime,
                         };
                     }
-                    cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
-                    cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
+                    cue.startTime = clamp(cuesCache[index].startTime + offsetCache, 0, art.duration);
+                    cue.endTime = clamp(cuesCache[index].endTime + offsetCache, 0, art.duration);
                 }
 
                 art.subtitle.update();

packages/artplayer/src/setting/index.js

@@ -1,9 +1,9 @@
-import Component from '../utils/component';
-import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
 import flip from './flip';
 import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 import subtitleOffset from './subtitleOffset';
+import Component from '../utils/component';
+import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
 
 function makeRecursion(option) {
     for (let index = 0; index < option.length; index++) {

packages/artplayer/types/artplayer.d.ts

@@ -70,6 +70,33 @@ type ComponentOption = {
     onSelect?(selector: Selector, element: HTMLElement): void;
 };
 
+type SettingOption = {
+    /**
+     * Html string or html element of setting name
+     */
+    html: string | HTMLElement;
+
+    /**
+     * Html string or html element of setting icon
+     */
+    icon?: string | HTMLElement;
+
+    /**
+     * The width of setting
+     */
+    width?: number;
+
+    /**
+     * Whether the default is selected
+     */
+    current?: boolean;
+
+    /**
+     * Html string or html element of component
+     */
+    children?: SettingOption[];
+};
+
 type Component = {
     /**
      * Component self-increasing id
@@ -320,7 +347,7 @@ type Option = {
     /**
      * Custom setting list
      */
-    settings?: ComponentOption[];
+    settings?: SettingOption[];
 
     /**
      * Custom video quality list
@@ -416,7 +443,6 @@ type Option = {
 
 type AspectRatio = 'default' | '4:3' | '16:9' | void;
 type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | void;
-type Rotate = -270 | -180 | -90 | 0 | 90 | 180 | 270 | void;
 type Flip = 'normal' | 'horizontal' | 'vertical' | void;
 
 declare class Player {
@@ -424,8 +450,6 @@ declare class Player {
     set aspectRatio(ratio: AspectRatio);
     get playbackRate(): PlaybackRate;
     set playbackRate(rate: PlaybackRate);
-    get rotate(): Rotate;
-    set rotate(deg: Rotate);
     get autoSize(): boolean;
     set autoSize(state: boolean);
     get autoHeight(): boolean;
@@ -474,6 +498,8 @@ declare class Player {
     set title(title: string);
     get theme(): string;
     set theme(theme: string);
+    get subtitleOffset(): number;
+    set subtitleOffset(time: number);
     pause(): any;
     play(): any;
     toggle(): any;
@@ -595,6 +621,7 @@ declare class Artplayer extends Player {
         readonly state: HTMLElement;
         readonly play: HTMLElement;
         readonly pause: HTMLElement;
+        readonly check: HTMLElement;
         readonly volume: HTMLElement;
         readonly volumeClose: HTMLElement;
         readonly subtitle: HTMLElement;
@@ -604,6 +631,11 @@ declare class Artplayer extends Player {
         readonly fullscreenWeb: HTMLElement;
         readonly pip: HTMLElement;
         readonly indicator: HTMLElement;
+        readonly arrowLeft: HTMLElement;
+        readonly arrowRight: HTMLElement;
+        readonly playbackRate: HTMLElement;
+        readonly aspectRatio: HTMLElement;
+        readonly config: HTMLElement;
     };
 
     readonly hotkey: {