添加设置样式小工具

src/contextmenu.js

@@ -1,4 +1,4 @@
-import { append, setStyle } from './utils';
+import { append, setStyles } from './utils';
 
 let id = 0;
 export default class Contextmenu {
@@ -93,7 +93,7 @@ export default class Contextmenu {
         $menu.setAttribute('data-art-menu-id', id);
         $menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
         append($menu, item.html);
-        setStyle($menu, item.style || {});
+        setStyles($menu, item.style || {});
         if (item.click) {
           proxy($menu, 'click', event => {
             event.preventDefault();

src/controls/index.js

@@ -1,3 +1,4 @@
+import { setStyle } from '../utils';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import Pip from './pip';
@@ -138,14 +139,14 @@ export default class Controls {
   commonMethod(control) {
     Object.defineProperty(control, 'hide', {
       value: () => {
-        control.option.$control.style.display = 'none';
+        setStyle(control.option.$control, 'display', 'none');
         this.art.emit('control:hide', control.option.$control);
       }
     });
 
     Object.defineProperty(control, 'show', {
       value: () => {
-        control.option.$control.style.display = 'block';
+        setStyle(control.option.$control, 'display', 'block');
         this.art.emit('control:show', control.option.$control);
       }
     });

src/controls/playAndPause.js

@@ -1,4 +1,4 @@
-import { append, tooltip } from '../utils';
+import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
 export default class PlayAndPause {
@@ -12,7 +12,7 @@ export default class PlayAndPause {
     this.$pause = append(this.option.$control, icons.pause);
     tooltip(this.$play, i18n.get('Play'));
     tooltip(this.$pause, i18n.get('Pause'));
-    this.$pause.style.display = 'none';
+    setStyle(this.$pause, 'display', 'none');
 
     proxy(this.$play, 'click', () => {
       player.play();
@@ -23,13 +23,13 @@ export default class PlayAndPause {
     });
 
     art.on('video:playing', () => {
-      this.$play.style.display = 'none';
-      this.$pause.style.display = 'block';
+      setStyle(this.$play, 'display', 'none');
+      setStyle(this.$pause, 'display', 'block');
     });
 
     art.on('video:pause', () => {
-      this.$play.style.display = 'block';
-      this.$pause.style.display = 'none';
+      setStyle(this.$play, 'display', 'block');
+      setStyle(this.$pause, 'display', 'none');
     });
   }
 }

src/controls/progress.js

@@ -1,4 +1,4 @@
-import { append, clamp, secondToTime } from '../utils';
+import { append, clamp, secondToTime, setStyle } from '../utils';
 
 export default class Progress {
   constructor(option) {
@@ -63,7 +63,7 @@ export default class Progress {
     });
 
     proxy(this.option.$control, 'mousemove', event => {
-      this.$tip.style.display = 'block';
+      setStyle(this.$tip, 'display', 'block');
       if (event.path.indexOf(this.$highlight) > -1) {
         this.showHighlight(event);
       } else {
@@ -72,7 +72,7 @@ export default class Progress {
     });
 
     proxy(this.option.$control, 'mouseout', () => {
-      this.$tip.style.display = 'none';
+      setStyle(this.$tip, 'display', 'none');
     });
 
     proxy(this.option.$control, 'click', event => {
@@ -112,7 +112,7 @@ export default class Progress {
       Number(time) / $video.duration * this.option.$control.clientWidth +
       event.target.clientWidth / 2 -
       this.$tip.clientWidth / 2;
-    this.$tip.style.left = `${left}px`;
+    setStyle(this.$tip, 'left', `${left}px`);
   }
 
   showTime(event) {
@@ -120,11 +120,11 @@ export default class Progress {
     const tipWidth = this.$tip.clientWidth;
     this.$tip.innerHTML = time;
     if (width <= tipWidth / 2) {
-      this.$tip.style.left = 0;
+      setStyle(this.$tip, 'left', 0);
     } else if (width > this.option.$control.clientWidth - tipWidth / 2) {
-      this.$tip.style.left = `${this.option.$control.clientWidth - tipWidth}px`;
+      setStyle(this.$tip, 'left', `${this.option.$control.clientWidth - tipWidth}px`);
     } else {
-      this.$tip.style.left = `${width - tipWidth / 2}px`;
+      setStyle(this.$tip, 'left', `${width - tipWidth / 2}px`);
     }
   }
 
@@ -151,9 +151,9 @@ export default class Progress {
   }
 
   set(type, percentage) {
-    this[`$${type}`].style.width = `${percentage * 100}%`;
+    setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
     if (type === 'played') {
-      this.$indicator.style.left = `calc(${percentage * 100}% - 6.5px)`;
+      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - 6.5px)`);
     }
   }
 }

src/controls/screenshot.js

@@ -1,4 +1,4 @@
-import { append, tooltip, secondToTime } from '../utils';
+import { append, tooltip, secondToTime, setStyle } from '../utils';
 import icons from '../icons';
 
 export default class Screenshot {
@@ -28,7 +28,7 @@ export default class Screenshot {
     canvas.getContext('2d').drawImage($video, 0, 0);
     const dataUri = canvas.toDataURL('image/png');
     const elink = document.createElement('a');
-    elink.style.display = 'none';
+    setStyle(elink, 'display', 'none');
     elink.href = dataUri;
     elink.download = `${secondToTime($video.currentTime)}.png`;
     document.body.appendChild(elink);

src/controls/subtitle.js

@@ -1,4 +1,4 @@
-import { append, tooltip } from '../utils';
+import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
 export default class Subtitle {
@@ -12,18 +12,18 @@ export default class Subtitle {
     this.$subtitleClose = append(this.option.$control, icons.subtitleClose);
     tooltip(this.$subtitle, i18n.get('Hide subtitle'));
     tooltip(this.$subtitleClose, i18n.get('Show subtitle'));
-    this.$subtitleClose.style.display = 'none';
+    setStyle(this.$subtitleClose, 'display', 'none');
 
     proxy(this.$subtitle, 'click', () => {
       subtitle.hide();
-      this.$subtitle.style.display = 'none';
-      this.$subtitleClose.style.display = 'block';
+      setStyle(this.$subtitle, 'display', 'none');
+      setStyle(this.$subtitleClose, 'display', 'block');
     });
 
     proxy(this.$subtitleClose, 'click', () => {
       subtitle.show();
-      this.$subtitle.style.display = 'block';
-      this.$subtitleClose.style.display = 'none';
+      setStyle(this.$subtitle, 'display', 'block');
+      setStyle(this.$subtitleClose, 'display', 'none');
     });
   }
 }

src/controls/thumbnails.js

@@ -1,4 +1,4 @@
-import { errorHandle } from '../utils';
+import { errorHandle, setStyle } from '../utils';
 
 export default class Thumbnails {
   constructor(option) {
@@ -27,13 +27,13 @@ export default class Thumbnails {
       }
 
       if (this.isLoad) {
-        this.option.$control.style.display = 'block';
+        setStyle(this.option.$control, 'display', 'block');
         this.showThumbnails(event);
       }
     });
 
     proxy($progress, 'mouseout', () => {
-      this.option.$control.style.display = 'none';
+      setStyle(this.option.$control, 'display', 'none');
     });
   }
 
@@ -63,17 +63,17 @@ export default class Thumbnails {
     let yIndex = Math.ceil(perIndex / column);
     let xIndex = perIndex % column || column;
 
-    this.option.$control.style.backgroundImage = `url(${url})`;
-    this.option.$control.style.height = `${height}px`;
-    this.option.$control.style.width = `${width}px`;
-    this.option.$control.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
+    setStyle(this.option.$control, 'backgroundImage', `url(${url})`);
+    setStyle(this.option.$control, 'height', `${height}px`);
+    setStyle(this.option.$control, 'width', `${width}px`);
+    setStyle(this.option.$control, 'backgroundPosition', `-${--xIndex * width}px -${--yIndex * height}px`);
 
     if (posWidth <= width / 2) {
-      this.option.$control.style.left = 0;
+      setStyle(this.option.$control, 'left', 0);
     } else if (posWidth > $progress.clientWidth - width / 2) {
-      this.option.$control.style.left = `${$progress.clientWidth - width}px`;
+      setStyle(this.option.$control, 'left', `${$progress.clientWidth - width}px`);
     } else {
-      this.option.$control.style.left = `${posWidth - width / 2}px`;
+      setStyle(this.option.$control, 'left', `${posWidth - width / 2}px`);
     }
   }
 }

src/controls/volume.js

@@ -1,4 +1,4 @@
-import { append, getStorage, clamp, tooltip } from '../utils';
+import { append, getStorage, clamp, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
@@ -19,21 +19,21 @@ export default class Volume {
     this.$volumePanel = append(this.option.$control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     tooltip(this.$volume, i18n.get('Mute'));
-    this.$volumeClose.style.display = 'none';
+    setStyle(this.$volumeClose, 'display', 'none');
 
     const volume = getStorage('volume');
     this.setVolumeHandle(volume);
     player.volume(volume);
 
     proxy(this.$volume, 'click', () => {
-      this.$volume.style.display = 'none';
-      this.$volumeClose.style.display = 'block';
+      setStyle(this.$volume, 'display', 'none');
+      setStyle(this.$volumeClose, 'display', 'block');
       player.volume(0);
     });
 
     proxy(this.$volumeClose, 'click', () => {
-      this.$volume.style.display = 'block';
-      this.$volumeClose.style.display = 'none';
+      setStyle(this.$volume, 'display', 'block');
+      setStyle(this.$volumeClose, 'display', 'none');
       player.volume(getStorage('volume'));
     });
 
@@ -74,11 +74,11 @@ export default class Volume {
       const percentage = player.volume();
       this.setVolumeHandle(percentage);
       if (percentage === 0) {
-        this.$volume.style.display = 'none';
-        this.$volumeClose.style.display = 'block';
+        setStyle(this.$volume, 'display', 'none');
+        setStyle(this.$volumeClose, 'display', 'block');
       } else {
-        this.$volume.style.display = 'block';
-        this.$volumeClose.style.display = 'none';
+        setStyle(this.$volume, 'display', 'block');
+        setStyle(this.$volumeClose, 'display', 'none');
       }
     });
   }
@@ -95,6 +95,6 @@ export default class Volume {
     const { width: panelWidth } = this.$volumePanel.getBoundingClientRect();
     const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
     const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
-    this.$volumeHandle.style.left = `${width}px`;
+    setStyle(this.$volumeHandle, 'left', `${width}px`);
   }
 }

src/layers.js

@@ -1,4 +1,4 @@
-import { append, setStyle } from './utils';
+import { append, setStyles } from './utils';
 
 let id = 0;
 export default class Layers {
@@ -27,7 +27,7 @@ export default class Layers {
     $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
     $layer.style.zIndex = option.index || id;
     append($layer, option.html);
-    setStyle($layer, option.style || {});
+    setStyles($layer, option.style || {});
     refs.$layers.appendChild($layer);
     this.art.emit('layers:add', $layer);
     callback && callback($layer);

src/subtitle.js

@@ -1,4 +1,4 @@
-import { errorHandle, getExt, setStyle } from './utils';
+import { errorHandle, getExt, setStyles } from './utils';
 
 export default class Subtitle {
   constructor(art) {
@@ -18,7 +18,7 @@ export default class Subtitle {
       refs: { $video, $subtitle }
     } = this.art;
 
-    setStyle($subtitle, subtitle.style || {});
+    setStyles($subtitle, subtitle.style || {});
     const $track = document.createElement('track');
     $track.default = true;
     $track.kind = 'metadata';

src/utils/index.js

@@ -44,9 +44,14 @@ export function append(parent, child) {
   return parent.lastElementChild;
 }
 
-export function setStyle(element, styles) {
+export function setStyle(element, key, value) {
+  element.style[key] = value;
+  return element;
+}
+
+export function setStyles(element, styles) {
   Object.keys(styles).forEach(key => {
-    element.style[key] = styles[key];
+    setStyle(element, key, styles[key]);
   });
   return element;
 }
@@ -98,12 +103,6 @@ export function setStorage(key, value) {
   localStorage.setItem('artplayer_settings', JSON.stringify(storage));
 }
 
-export function getType(val) {
-  const { toString } = Object.prototype;
-  const type = toString.call(val).slice(8, -1).toLowerCase().replace(/\s/g, '');
-  return type;
-}
-
 export function tooltip(target, msg, pos = 'up') {
   target.setAttribute('data-balloon', msg);
   target.setAttribute('data-balloon-pos', pos);