add themeMix

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screensLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/Line truncated

packages/artplayer/src/control/index.js

@@ -22,7 +22,6 @@ export default class Control extends Component {
 
         const {
             option,
-            player,
             template: { $player },
         } = art;
 

packages/artplayer/src/control/progress.js

@@ -13,15 +13,16 @@ export function getPosFromEvent(art, event) {
     return { second, time, width, percentage };
 }
 
-export default function progress(option) {
+export default function progress(options) {
     return (art) => {
         const {
-            option: { highlight, theme },
-            events: { proxy },
             icons,
+            option,
+            events: { proxy },
         } = art;
+
         return {
-            ...option,
+            ...options,
             html: `
                 <div class="art-control-progress-inner">
                     <div class="art-progress-loaded"></div>
@@ -39,7 +40,7 @@ export default function progress(option) {
                 const $indicator = query('.art-progress-indicator', $control);
                 const $tip = query('.art-progress-tip', $control);
 
-                setStyle($played, 'backgroundColor', theme);
+                setStyle($played, 'backgroundColor', 'var(--theme)');
 
                 let indicatorSize = 14;
                 if (icons.indicator) {
@@ -47,7 +48,7 @@ export default function progress(option) {
                     append($indicator, icons.indicator);
                 } else {
                     setStyles($indicator, {
-                        backgroundColor: theme,
+                        backgroundColor: 'var(--theme)',
                     });
                 }
 
@@ -95,7 +96,7 @@ export default function progress(option) {
                     }
                 }
 
-                highlight.forEach((item) => {
+                option.highlight.forEach((item) => {
                     const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
                     append(
                         $highlight,

packages/artplayer/src/control/thumbnails.js

@@ -1,12 +1,12 @@
 import { setStyle } from '../utils';
 import { getPosFromEvent } from './progress';
 
-export default function thumbnails(option) {
-    return art => ({
-        ...option,
-        mounted: $control => {
+export default function thumbnails(options) {
+    return (art) => ({
+        ...options,
+        mounted: ($control) => {
             const {
-                option: { thumbnails },
+                option,
                 template: { $progress },
                 events: { proxy, loadImg },
             } = art;
@@ -16,7 +16,7 @@ export default function thumbnails(option) {
 
             function showThumbnails(event) {
                 const { width: posWidth } = getPosFromEvent(art, event);
-                const { url, height, width, number, column } = thumbnails;
+                const { url, height, width, number, column } = option.thumbnails;
                 const perWidth = $progress.clientWidth / number;
                 const perIndex = Math.floor(posWidth / perWidth);
                 const yIndex = Math.ceil(perIndex / column) - 1;
@@ -34,10 +34,10 @@ export default function thumbnails(option) {
                 }
             }
 
-            proxy($progress, 'mousemove', event => {
+            proxy($progress, 'mousemove', (event) => {
                 if (!loading) {
                     loading = true;
-                    loadImg(thumbnails.url).then(() => {
+                    loadImg(option.thumbnails.url).then(() => {
                         isLoad = true;
                     });
                 }

packages/artplayer/src/events/viewInit.js

@@ -2,7 +2,6 @@ import { throttle, isInViewport } from '../utils';
 
 export default function viewInit(art, events) {
     const {
-        player,
         option,
         template: { $container },
     } = art;

packages/artplayer/src/hotkey.js

@@ -6,7 +6,6 @@ export default class Hotkey {
 
         const {
             option,
-            player,
             events: { proxy },
         } = art;
 

packages/artplayer/src/player/index.js

@@ -23,10 +23,12 @@ import autoSizeMix from './autoSizeMix';
 import rectMix from './rectMix';
 import flipMix from './flipMix';
 import miniMix from './miniMix';
-import loopMin from './loopMin';
+import loopMix from './loopMix';
 import rotateMix from './rotateMix';
 import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
+import themeMix from './themeMix';
+import titleMix from './titleMix';
 
 export default class Player {
     constructor(art) {
@@ -55,9 +57,11 @@ export default class Player {
         rectMix(art);
         flipMix(art);
         miniMix(art);
-        loopMin(art);
+        loopMix(art);
         rotateMix(art);
         posterMix(art);
         autoHeightMix(art);
+        themeMix(art);
+        titleMix(art);
     }
 }

packages/artplayer/src/player/loopMix.js

@@ -1,6 +1,6 @@
 import { def, clamp } from '../utils';
 
-export default function loopMin(art) {
+export default function loopMix(art) {
     let interval = [];
     def(art, 'loop', {
         get: () => interval,

packages/artplayer/src/player/playMix.js

@@ -4,8 +4,8 @@ export default function playMix(art) {
     const {
         i18n,
         notice,
+        option,
         constructor: { instances },
-        option: { mutex },
         template: { $video },
     } = art;
 
@@ -20,7 +20,7 @@ export default function playMix(art) {
                 });
             }
 
-            if (mutex) {
+            if (option.mutex) {
                 instances.filter((item) => item !== art).forEach((item) => item.pause());
             }
 

packages/artplayer/src/player/seekMix.js

@@ -19,7 +19,7 @@ export default function seekMix(art) {
         },
     });
 
-    def(player, 'backward', {
+    def(art, 'backward', {
         set(time) {
             art.seek = art.currentTime - time;
         },

packages/artplayer/src/player/themeMix.js

@@ -0,0 +1,18 @@
+import { def } from '../utils';
+
+export default function themeMix(art) {
+    const {
+        option,
+        template: { $player },
+    } = art;
+
+    def(art, 'theme', {
+        get() {
+            return $player.style.getProperty('--theme');
+        },
+        set(theme) {
+            option.theme = theme;
+            $player.style.setProperty('--theme', theme);
+        },
+    });
+}

packages/artplayer/src/player/titleMix.js

@@ -0,0 +1,12 @@
+import { def } from '../utils';
+
+export default function titleMix(art) {
+    def(art, 'title', {
+        get() {
+            return art.option.title;
+        },
+        set(title) {
+            art.option.title = title;
+        },
+    });
+}

packages/artplayer/src/plugins/miniProgressBar.js

@@ -1,8 +1,5 @@
 export default function miniProgressBar(art) {
-    const {
-        layers,
-        option: { theme },
-    } = art;
+    const { layers, option } = art;
 
     layers.add({
         name: 'miniProgressBar',
@@ -13,7 +10,7 @@ export default function miniProgressBar(art) {
             right: 0,
             bottom: 0,
             height: '2px',
-            backgroundColor: theme,
+            backgroundColor: 'var(--theme)',
         },
         mounted($progressBar) {
             art.on('control', (value) => {

packages/artplayer/src/utils/property.js

@@ -1,5 +1,3 @@
-import { errorHandle } from './error';
-
 export const def = Object.defineProperty;
 
 const { hasOwnProperty } = Object.prototype;
@@ -11,16 +9,6 @@ export function get(obj, name) {
     return Object.getOwnPropertyDescriptor(obj, name);
 }
 
-export function proxyPropertys(target, ...sources) {
-    return sources.reduce((result, source) => {
-        Object.getOwnPropertyNames(source).forEach((key) => {
-            errorHandle(!has(result, key), `Target attribute name is duplicated: ${key}`);
-            def(result, key, get(source, key));
-        });
-        return result;
-    }, target);
-}
-
 export function mergeDeep(...objects) {
     const isObject = (item) => item && typeof item === 'object' && !Array.isArray(item);
     return objects.reduce((prev, obj) => {

packages/artplayer/src/whitelist.js

@@ -7,12 +7,13 @@ export default class Whitelist {
 
     get state() {
         const {
+            option,
             constructor: { kindOf },
-            option: { whitelist },
         } = this.art;
+
         return (
             !isMobile ||
-            whitelist.some((item) => {
+            option.whitelist.some((item) => {
                 switch (kindOf(item)) {
                     case 'string':
                         return item === '*' || userAgent.indexOf(item) > -1;