fix: miscellaneous bug fixes

src/js/bar.js

@@ -20,8 +20,8 @@ class Bar {
         this.elements[type].style[direction] = percentage * 100 + '%';
     }
 
-    get(type) {
-        return parseFloat(this.elements[type].style.width) / 100;
+    get(type, direction = 'width') {
+        return parseFloat(this.elements[type].style[direction]) / 100;
     }
 }
 

src/js/i18n.js

@@ -7,22 +7,24 @@ W3C def language codes is :
 NOTE: use lowercase to prevent case typo from user!
 Use this as shown below..... */
 
-function i18n(lang) {
-    this.lang = lang;
-    // in case someone says en-us, and en is present!
-    this.fallbackLang = this.lang.includes('-') ? this.lang.split('-')[0] : this.lang;
-    this.tran = (key) => {
-        key = key.toLowerCase();
-        if (tranTxt[this.lang] && tranTxt[this.lang][key]) {
-            return tranTxt[this.lang][key];
-        } else if (tranTxt[this.fallbackLang] && tranTxt[this.fallbackLang][key]) {
-            return tranTxt[this.fallbackLang][key];
-        } else if (standard[key]) {
-            return standard[key];
-        } else {
-            return key;
-        }
-    };
+class i18n {
+    constructor(lang) {
+        this.lang = lang;
+        // in case someone says en-us, and en is present!
+        this.fallbackLang = this.lang.includes('-') ? this.lang.split('-')[0] : this.lang;
+        this.tran = (key) => {
+            key = key.toLowerCase();
+            if (tranTxt[this.lang] && tranTxt[this.lang][key]) {
+                return tranTxt[this.lang][key];
+            } else if (tranTxt[this.fallbackLang] && tranTxt[this.fallbackLang][key]) {
+                return tranTxt[this.fallbackLang][key];
+            } else if (standard[key]) {
+                return standard[key];
+            } else {
+                return key;
+            }
+        };
+    }
 }
 
 // abstract model for recognizing if valid translations are present

src/js/options.js

@@ -2,6 +2,18 @@
 import defaultApiBackend from './api.js';
 
 export default (options) => {
+    // Clone to avoid mutating the caller's object
+    options = Object.assign({}, options);
+    if (options.video) {
+        options.video = Object.assign({}, options.video);
+    }
+    if (options.danmaku) {
+        options.danmaku = Object.assign({}, options.danmaku);
+    }
+    if (options.subtitle) {
+        options.subtitle = Object.assign({}, options.subtitle);
+    }
+
     // default options
     const defaultOption = {
         container: options.element || document.getElementsByClassName('dplayer')[0],
@@ -54,7 +66,7 @@ export default (options) => {
         {
             key: 'video-info',
             click: (player) => {
-                player.infoPanel.triggle();
+                player.infoPanel.toggle();
             },
         },
         {

src/js/subtitle.js

@@ -20,13 +20,13 @@ class Subtitle {
                 const cue = track.activeCues[track.activeCues.length - 1];
                 this.container.innerHTML = '';
                 if (cue) {
-                    const template = document.createElement('div');
-                    template.appendChild(cue.getCueAsHTML());
-                    const trackHtml = template.innerHTML
-                        .split(/\r?\n/)
-                        .map((item) => `<p>${item}</p>`)
-                        .join('');
-                    this.container.innerHTML = trackHtml;
+                    const fragment = cue.getCueAsHTML();
+                    const lines = Array.from(fragment.childNodes);
+                    for (const node of lines) {
+                        const p = document.createElement('p');
+                        p.appendChild(node.cloneNode ? node.cloneNode(true) : document.createTextNode(node.textContent));
+                        this.container.appendChild(p);
+                    }
                 }
                 this.events.trigger('subtitle_change');
             };

src/js/thumbnails.js

@@ -2,6 +2,7 @@ class Thumbnails {
     constructor(options) {
         this.container = options.container;
         this.barWidth = options.barWidth;
+        this.thumbnailWidth = 160;
         this.container.style.backgroundImage = `url('${options.url}')`;
         this.events = options.events;
     }
@@ -10,6 +11,7 @@ class Thumbnails {
         this.container.style.width = `${width}px`;
         this.container.style.height = `${height}px`;
         this.container.style.top = `${-height + 2}px`;
+        this.thumbnailWidth = width;
         this.barWidth = barWrapWidth;
     }
 
@@ -19,7 +21,7 @@ class Thumbnails {
     }
 
     move(position) {
-        this.container.style.backgroundPosition = `-${(Math.ceil((position / this.barWidth) * 100) - 1) * 160}px 0`;
+        this.container.style.backgroundPosition = `-${(Math.ceil((position / this.barWidth) * 100) - 1) * this.thumbnailWidth}px 0`;
         this.container.style.left = `${Math.min(Math.max(position - this.container.offsetWidth / 2, -10), this.barWidth - 150)}px`;
     }
 

src/js/timer.js

@@ -18,11 +18,10 @@ class Timer {
     }
 
     init() {
-        this.types.map((item) => {
+        this.types.forEach((item) => {
             if (item !== 'fps') {
                 this[`init${item}Checker`]();
             }
-            return item;
         });
     }
 
@@ -91,10 +90,9 @@ class Timer {
     }
 
     destroy() {
-        this.types.map((item) => {
+        this.types.forEach((item) => {
             this[`enable${item}Checker`] = false;
             this[`${item}Checker`] && clearInterval(this[`${item}Checker`]);
-            return item;
         });
     }
 }

src/js/utils.js

@@ -93,7 +93,7 @@ const utils = {
 
     isChrome: /chrome/i.test(window.navigator.userAgent),
 
-    isSafari: /safari/i.test(window.navigator.userAgent),
+    isSafari: /safari/i.test(window.navigator.userAgent) && !/chrome/i.test(window.navigator.userAgent),
 
     storage: {
         set: (key, value) => {
@@ -116,7 +116,7 @@ const utils = {
         if (color.length === 3) {
             color = `${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`;
         }
-        return (parseInt(color, 16) + 0x000000) & 0xffffff;
+        return parseInt(color, 16) & 0xffffff;
     },
 
     number2Color: (number) => '#' + ('00000' + number.toString(16)).slice(-6),