分离template

packages/artplayer/src/contextmenu/index.js

@@ -18,7 +18,7 @@ export default class Contextmenu {
     init() {
         const {
             option,
-            refs: { $player, $contextmenu },
+            template: { $player, $contextmenu },
             events: { proxy },
         } = this.art;
 
@@ -70,12 +70,12 @@ export default class Contextmenu {
     }
 
     add(item, callback) {
-        const { $contextmenu } = this.art.refs;
+        const { $contextmenu } = this.art.template;
         component(this.art, this, $contextmenu, item, callback, 'contextmenu');
     }
 
     setPos(event) {
-        const { $player, $contextmenu } = this.art.refs;
+        const { $player, $contextmenu } = this.art.template;
         const mouseX = event.clientX;
         const mouseY = event.clientY;
         const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
@@ -96,13 +96,13 @@ export default class Contextmenu {
     }
 
     hide() {
-        const { $contextmenu } = this.art.refs;
+        const { $contextmenu } = this.art.template;
         setStyle($contextmenu, 'display', 'none');
         this.art.emit('contextmenu:hide', $contextmenu);
     }
 
     show() {
-        const { $contextmenu } = this.art.refs;
+        const { $contextmenu } = this.art.template;
         setStyle($contextmenu, 'display', 'block');
         this.art.emit('contextmenu:show', $contextmenu);
     }

packages/artplayer/src/controls/index.js

@@ -139,7 +139,7 @@ export default class Controls {
 
     add(item, callback) {
         const option = typeof item === 'function' ? item(this.art) : item;
-        const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
+        const { $progress, $controlsLeft, $controlsRight } = this.art.template;
         let parent;
         switch (option.position) {
             case 'top':
@@ -161,12 +161,12 @@ export default class Controls {
     }
 
     show() {
-        const { $player } = this.art.refs;
+        const { $player } = this.art.template;
         $player.classList.add('artplayer-controls-show');
     }
 
     hide() {
-        const { $player } = this.art.refs;
+        const { $player } = this.art.template;
         $player.classList.remove('artplayer-controls-show');
     }
 }

packages/artplayer/src/controls/progress.js

@@ -2,7 +2,7 @@ import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
 
 export function getPosFromEvent(art, event) {
     const {
-        refs: { $progress },
+        template: { $progress },
         player,
     } = art;
     const { left } = $progress.getBoundingClientRect();

packages/artplayer/src/controls/thumbnails.js

@@ -6,7 +6,7 @@ export default function thumbnails(controlOption) {
         ...controlOption,
         mounted: $control => {
             const {
-                refs: { $progress },
+                template: { $progress },
                 events: { proxy, loadImg },
             } = art;
             let loading = false;

packages/artplayer/src/events/clickInit.js

@@ -1,6 +1,6 @@
 export default function clickInit(art, events) {
     const {
-        refs: { $player },
+        template: { $player },
     } = art;
     events.proxy(document, ['click', 'contextmenu'], event => {
         if (event.composedPath().indexOf($player) > -1) {

packages/artplayer/src/events/doubleClickInit.js

@@ -1,6 +1,6 @@
 export default function doubleClickInit(art, events) {
     const {
-        refs: { $video },
+        template: { $video },
     } = art;
     events.proxy($video, 'dblclick', () => {
         art.player.fullscreenToggle();

packages/artplayer/src/events/hoverInit.js

@@ -1,6 +1,6 @@
 export default function hoverInit(art, events) {
     const {
-        refs: { $player },
+        template: { $player },
     } = art;
     events.hover(
         $player,

packages/artplayer/src/events/mousemoveInit.js

@@ -2,7 +2,7 @@ import { debounce } from '../utils';
 
 export default function mousemoveInitInit(art, events) {
     const {
-        refs: { $player, $video },
+        template: { $player, $video },
     } = art;
 
     const autoHide = debounce(() => {

packages/artplayer/src/events/resizeInit.js

@@ -4,7 +4,7 @@ import { sleep } from '../utils';
 export default function resizeInit(art, events) {
     const {
         option,
-        refs: { $player },
+        template: { $player },
     } = art;
     const resizeObserver = new ResizeObserver(() => {
         sleep().then(() => {

packages/artplayer/src/index.js

@@ -109,18 +109,7 @@ class Artplayer extends Emitter {
     init() {
         this.isFocus = false;
         this.isPlaying = false;
-        this.refs = {};
-
-        if (this.option.container instanceof Element) {
-            this.refs.$container = this.option.container;
-        } else {
-            this.refs.$container = document.querySelector(this.option.container);
-        }
-
-        if (Artplayer.instances.some(art => art.refs.$container === this.refs.$container)) {
-            utils.errorHandle(false, 'Cannot mount multiple instances on the same dom element');
-        }
-
+        
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);
         this.storage = new Storage(this);
@@ -146,13 +135,9 @@ class Artplayer extends Emitter {
     }
 
     destroy(removeHtml = false) {
-        this.events.destroy();
         Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
-        if (removeHtml) {
-            this.refs.$container.innerHTML = '';
-        } else {
-            this.refs.$player.classList.add('artplayer-destroy');
-        }
+        this.events.destroy();
+        this.template.destroy(removeHtml);
         this.emit('destroy');
     }
 }

packages/artplayer/src/info.js

@@ -8,7 +8,7 @@ export default class Info {
 
     init() {
         const {
-            refs: { $infoClose },
+            template: { $infoClose },
             events: { proxy },
         } = this.art;
         proxy($infoClose, 'click', () => {
@@ -17,7 +17,7 @@ export default class Info {
     }
 
     show() {
-        const { $info, $infoPanel } = this.art.refs;
+        const { $info, $infoPanel } = this.art.template;
         setStyle($info, 'display', 'block');
         if (!$infoPanel.innerHTML) {
             append($infoPanel, this.creatInfo());
@@ -78,7 +78,7 @@ export default class Info {
     }
 
     readInfo() {
-        const { $infoPanel, $video } = this.art.refs;
+        const { $infoPanel, $video } = this.art.template;
         const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
         types.forEach(item => {
             const value = $video[item.dataset.video];
@@ -95,7 +95,7 @@ export default class Info {
     }
 
     hide() {
-        const { $info } = this.art.refs;
+        const { $info } = this.art.template;
         setStyle($info, 'display', 'none');
         clearTimeout(this.timer);
         this.art.emit('info:hide', $info);

packages/artplayer/src/layers.js

@@ -12,18 +12,18 @@ export default class Layers {
     }
 
     add(item, callback) {
-        const { $layers } = this.art.refs;
+        const { $layers } = this.art.template;
         component(this.art, this, $layers, item, callback, 'layer');
     }
 
     show() {
-        const { $layers } = this.art.refs;
+        const { $layers } = this.art.template;
         setStyle($layers, 'display', 'block');
         this.art.emit('layers:show', $layers);
     }
 
     hide() {
-        const { $layers } = this.art.refs;
+        const { $layers } = this.art.template;
         setStyle($layers, 'display', 'none');
         this.art.emit('layers:hide', $layers);
     }

packages/artplayer/src/loading.js

@@ -6,19 +6,19 @@ export default class Loading {
         this.art = art;
         const {
             option,
-            refs: { $loading },
+            template: { $loading },
         } = art;
         append($loading, option.icons.loading || icons.loading);
     }
 
     hide() {
-        const { $loading } = this.art.refs;
+        const { $loading } = this.art.template;
         setStyle($loading, 'display', 'none');
         this.art.emit('loading:hide', $loading);
     }
 
     show() {
-        const { $loading } = this.art.refs;
+        const { $loading } = this.art.template;
         setStyle($loading, 'display', 'flex');
         this.art.emit('loading:show', $loading);
     }

packages/artplayer/src/mask.js

@@ -6,20 +6,20 @@ export default class Mask {
         this.art = art;
         const {
             option,
-            refs: { $mask },
+            template: { $mask },
         } = art;
         const $playBig = append($mask, '<div class="art-playBig"></div>');
         append($playBig, option.icons.playBig || icons.playBig);
     }
 
     show() {
-        const { $mask } = this.art.refs;
+        const { $mask } = this.art.template;
         setStyle($mask, 'display', 'flex');
         this.art.emit('mask:show', $mask);
     }
 
     hide() {
-        const { $mask } = this.art.refs;
+        const { $mask } = this.art.template;
         setStyle($mask, 'display', 'none');
         this.art.emit('mask:show', $mask);
     }

packages/artplayer/src/notice.js

@@ -7,7 +7,7 @@ export default class Notice {
     }
 
     show(msg, autoHide = true, time = 1000) {
-        const { $notice, $noticeInner } = this.art.refs;
+        const { $notice, $noticeInner } = this.art.template;
         setStyle($notice, 'display', 'block');
         $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
         if (autoHide) {
@@ -20,7 +20,7 @@ export default class Notice {
     }
 
     hide() {
-        const { $notice } = this.art.refs;
+        const { $notice } = this.art.template;
         setStyle($notice, 'display', 'none');
         this.art.emit('notice:hide', $notice);
     }

packages/artplayer/src/player/aspectRatioMix.js

@@ -2,7 +2,7 @@ import { setStyle, errorHandle } from '../utils';
 
 export default function aspectRatioMix(art, player) {
     const {
-        refs: { $video, $player },
+        template: { $video, $player },
         i18n,
         notice,
     } = art;

packages/artplayer/src/player/attachUrlMix.js

@@ -3,7 +3,7 @@ import { getExt } from '../utils';
 export default function attachUrlMix(art, player) {
     const {
         option: { type, customType },
-        refs: { $video },
+        template: { $video },
     } = art;
 
     Object.defineProperty(player, 'returnUrl', {

packages/artplayer/src/player/attrInit.js

@@ -3,7 +3,7 @@ import { clamp, sleep } from '../utils';
 export default function attrInit(art, player) {
     const {
         option,
-        refs: { $video },
+        template: { $video },
     } = art;
     Object.keys(option.moreVideoAttr).forEach(key => {
         $video[key] = option.moreVideoAttr[key];

packages/artplayer/src/player/autoSizeMix.js

@@ -2,7 +2,7 @@ import { setStyle } from '../utils';
 
 export default function resizeMix(art, player) {
     const {
-        refs: { $container, $player, $video },
+        template: { $container, $player, $video },
     } = art;
 
     Object.defineProperty(player, 'autoSizeState', {

packages/artplayer/src/player/currentTimeMix.js

@@ -1,8 +1,8 @@
 export default function currentTimeMix(art, player) {
     Object.defineProperty(player, 'currentTime', {
-        get: () => art.refs.$video.currentTime || 0,
+        get: () => art.template.$video.currentTime || 0,
         set: currentTime => {
-            art.refs.$video.currentTime = currentTime;
+            art.template.$video.currentTime = currentTime;
         },
     });
 }

packages/artplayer/src/player/durationMix.js

@@ -1,5 +1,5 @@
 export default function durationMix(art, player) {
     Object.defineProperty(player, 'duration', {
-        get: () => art.refs.$video.duration || 0,
+        get: () => art.template.$video.duration || 0,
     });
 }

packages/artplayer/src/player/eventInit.js

@@ -5,7 +5,7 @@ export default function eventInit(art, player) {
     const {
         option,
         events: { proxy },
-        refs: { $player, $video },
+        template: { $player, $video },
         i18n,
         notice,
     } = art;

packages/artplayer/src/player/flipMix.js

@@ -2,21 +2,21 @@ import { errorHandle } from '../utils';
 
 export default function flipMix(art, player) {
     Object.defineProperty(player, 'flipState', {
-        get: () => art.refs.$player.dataset.flip,
+        get: () => art.template.$player.dataset.flip,
     });
 
     Object.defineProperty(player, 'flip', {
         value: flip => {
             const flipList = ['normal', 'horizontal', 'vertical'];
             errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
-            art.refs.$player.dataset.flip = flip;
+            art.template.$player.dataset.flip = flip;
             art.emit('flipChange', flip);
         },
     });
 
     Object.defineProperty(player, 'flipRemove', {
         value: () => {
-            delete art.refs.$player.dataset.flip;
+            delete art.template.$player.dataset.flip;
             art.emit('flipRemove');
         },
     });

packages/artplayer/src/player/fullscreenMix.js

@@ -4,7 +4,7 @@ export default function fullscreenMix(art, player) {
     const {
         notice,
         events: { destroyEvents },
-        refs: { $player },
+        template: { $player },
     } = art;
 
     const screenfullChange = () => {

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,6 +1,6 @@
 export default function fullscreenWebMix(art, player) {
     const {
-        refs: { $player },
+        template: { $player },
     } = art;
 
     Object.defineProperty(player, 'fullscreenWebState', {

packages/artplayer/src/player/loadedMix.js

@@ -1,8 +1,8 @@
 export default function seekMix(art, player) {
     Object.defineProperty(player, 'loaded', {
         get: () =>
-            art.refs.$video.buffered.length
-                ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration
+            art.template.$video.buffered.length
+                ? art.template.$video.buffered.end(art.template.$video.buffered.length - 1) / art.template.$video.duration
                 : 0,
     });
 }

packages/artplayer/src/player/pauseMin.js

@@ -1,6 +1,6 @@
 export default function pauseMin(art, player) {
     const {
-        refs: { $video },
+        template: { $video },
         i18n,
         notice,
     } = art;

packages/artplayer/src/player/pipMix.js

@@ -4,7 +4,7 @@ import { setStyle, append } from '../utils';
 function nativePip(art, player) {
     const {
         notice,
-        refs: { $video },
+        template: { $video },
         events: { proxy },
     } = art;
 
@@ -54,7 +54,7 @@ function customPip(art, player) {
     const {
         option,
         i18n,
-        refs: { $player, $pipClose, $pipTitle },
+        template: { $player, $pipClose, $pipTitle },
         events: { destroyEvents, proxy },
     } = art;
     let cachePos = null;

packages/artplayer/src/player/playMix.js

@@ -1,6 +1,6 @@
 export default function playMix(art, player) {
     const {
-        refs: { $video },
+        template: { $video },
         i18n,
         notice,
         option: { mutex },

packages/artplayer/src/player/playbackRateMix.js

@@ -2,7 +2,7 @@ import { errorHandle } from '../utils';
 
 export default function playbackRateMix(art, player) {
     const {
-        refs: { $video, $player },
+        template: { $video, $player },
         i18n,
         notice,
     } = art;

packages/artplayer/src/player/playedMix.js

@@ -1,5 +1,5 @@
 export default function seekMix(art, player) {
     Object.defineProperty(player, 'played', {
-        get: () => art.refs.$video.currentTime / art.refs.$video.duration,
+        get: () => art.template.$video.currentTime / art.template.$video.duration,
     });
 }

packages/artplayer/src/player/screenshotMix.js

@@ -4,7 +4,7 @@ export default function screenshotMix(art, player) {
     const {
         option,
         notice,
-        refs: { $video },
+        template: { $video },
     } = art;
 
     function captureFrame() {

packages/artplayer/src/player/volumeMix.js

@@ -2,7 +2,7 @@ import { clamp } from '../utils';
 
 export default function volumeMix(art, player) {
     const {
-        refs: { $video },
+        template: { $video },
         i18n,
         notice,
         storage,

packages/artplayer/src/setting/index.js

@@ -16,7 +16,7 @@ export default class Setting {
 
     init() {
         const {
-            refs: { $settingClose },
+            template: { $settingClose },
             events: { proxy },
         } = this.art;
 
@@ -32,19 +32,19 @@ export default class Setting {
     }
 
     add(item, callback) {
-        const { $settingBody } = this.art.refs;
+        const { $settingBody } = this.art.template;
         component(this.art, this, $settingBody, item, callback, 'setting');
     }
 
     show() {
-        const { $setting } = this.art.refs;
+        const { $setting } = this.art.template;
         setStyle($setting, 'display', 'flex');
         this.state = true;
         this.art.emit('setting:show', $setting);
     }
 
     hide() {
-        const { $setting } = this.art.refs;
+        const { $setting } = this.art.template;
         setStyle($setting, 'display', 'none');
         this.state = false;
         this.art.emit('setting:hide', $setting);

packages/artplayer/src/subtitle.js

@@ -15,14 +15,14 @@ export default class Subtitle {
         const {
             events: { proxy },
             option: { subtitle },
-            refs: { $video, $subtitle },
+            template: { $video, $subtitle },
         } = this.art;
         setStyles($subtitle, subtitle.style || {});
         const $track = document.createElement('track');
         $track.default = true;
         $track.kind = 'metadata';
         $video.appendChild($track);
-        this.art.refs.$track = $track;
+        this.art.template.$track = $track;
         this.load(subtitle.url).then(url => {
             $track.src = url;
             this.art.emit('subtitle:load', url);
@@ -71,7 +71,7 @@ export default class Subtitle {
 
     show() {
         const {
-            refs: { $subtitle },
+            template: { $subtitle },
             i18n,
             notice,
         } = this.art;
@@ -83,7 +83,7 @@ export default class Subtitle {
 
     hide() {
         const {
-            refs: { $subtitle },
+            template: { $subtitle },
             i18n,
             notice,
         } = this.art;
@@ -102,7 +102,7 @@ export default class Subtitle {
     }
 
     switch(url) {
-        const { $track } = this.art.refs;
+        const { $track } = this.art.template;
         errorHandle($track, 'You need to initialize the subtitle option first.');
         this.load(url).then(url => {
             $track.src = url;

packages/artplayer/src/template.js

@@ -1,7 +1,22 @@
+import { errorHandle } from './utils';
+
 export default class Template {
     constructor(art) {
-        const { refs } = art;
-        refs.$container.innerHTML = `
+        if (art.option.container instanceof Element) {
+            this.$container = this.option.container;
+        } else {
+            this.$container = document.querySelector(art.option.container);
+        }
+
+        if (art.constructor.instances.some(art => art.template.$container === this.$container)) {
+            errorHandle(false, 'Cannot mount multiple instances on the same dom element');
+        }
+
+        this.init();
+    }
+
+    init() {
+        this.$container.innerHTML = `
           <div class="artplayer-video-player">
             <video data-index="10" class="artplayer-video"></video>
             <div data-index="20" class="artplayer-subtitle"></div>
@@ -35,29 +50,37 @@ export default class Template {
             <div data-index="110" class="artplayer-contextmenu"></div>
           </div>
         `;
-        refs.$player = refs.$container.querySelector('.artplayer-video-player');
-        refs.$video = refs.$container.querySelector('.artplayer-video');
-        refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
-        refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
-        refs.$progress = refs.$container.querySelector('.artplayer-progress');
-        refs.$controls = refs.$container.querySelector('.artplayer-controls');
-        refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
-        refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
-        refs.$layers = refs.$container.querySelector('.artplayer-layers');
-        refs.$loading = refs.$container.querySelector('.artplayer-loading');
-        refs.$notice = refs.$container.querySelector('.artplayer-notice');
-        refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
-        refs.$mask = refs.$container.querySelector('.artplayer-mask');
-        refs.$setting = refs.$container.querySelector('.artplayer-setting');
-        refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
-        refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body');
-        refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close');
-        refs.$info = refs.$container.querySelector('.artplayer-info');
-        refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
-        refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
-        refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
-        refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
-        refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
-        refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu');
+        this.$player = this.$container.querySelector('.artplayer-video-player');
+        this.$video = this.$container.querySelector('.artplayer-video');
+        this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
+        this.$bottom = this.$container.querySelector('.artplayer-bottom');
+        this.$progress = this.$container.querySelector('.artplayer-progress');
+        this.$controls = this.$container.querySelector('.artplayer-controls');
+        this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
+        this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
+        this.$layers = this.$container.querySelector('.artplayer-layers');
+        this.$loading = this.$container.querySelector('.artplayer-loading');
+        this.$notice = this.$container.querySelector('.artplayer-notice');
+        this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
+        this.$mask = this.$container.querySelector('.artplayer-mask');
+        this.$setting = this.$container.querySelector('.artplayer-setting');
+        this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
+        this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
+        this.$settingClose = this.$container.querySelector('.artplayer-setting-close');
+        this.$info = this.$container.querySelector('.artplayer-info');
+        this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
+        this.$infoClose = this.$container.querySelector('.artplayer-info-close');
+        this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
+        this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
+        this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
+        this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
+    }
+
+    destroy(removeHtml) {
+        if (removeHtml) {
+            this.$container.innerHTML = '';
+        } else {
+            this.refs.$player.classList.add('artplayer-destroy');
+        }
     }
 }