add posterMix

packages/artplayer/src/index.js

@@ -99,6 +99,10 @@ export default class Artplayer extends Emitter {
         return validator.kindOf;
     }
 
+    static get html() {
+        return Template.html;
+    }
+
     static get option() {
         return {
             container: '#artplayer',

packages/artplayer/src/player/index.js

@@ -27,6 +27,7 @@ import lightMix from './lightMix';
 import miniMix from './miniMix';
 import loopMin from './loopMin';
 import rotateMix from './rotateMix';
+import posterMix from './posterMix';
 import { proxyPropertys } from '../utils';
 
 export default class Player {
@@ -60,6 +61,7 @@ export default class Player {
         miniMix(art, this);
         loopMin(art, this);
         rotateMix(art, this);
+        posterMix(art, this);
         proxyPropertys(art, this);
     }
 }

packages/artplayer/src/player/posterMix.js

@@ -0,0 +1,16 @@
+import { def, setStyle } from '../utils';
+
+export default function posterMix(art, player) {
+    const {
+        option,
+        template: { $poster },
+    } = art;
+
+    def(player, 'poster', {
+        get: () => option.poster,
+        set(url) {
+            option.poster = url;
+            setStyle($poster, 'backgroundImage', `url(${url})`);
+        },
+    });
+}

packages/artplayer/src/template.js

@@ -1,4 +1,4 @@
-import { errorHandle, query, addClass } from './utils';
+import { errorHandle, query, addClass, setStyle } from './utils';
 
 export default class Template {
     constructor(art) {
@@ -23,15 +23,10 @@ export default class Template {
         }
     }
 
-    query(className) {
-        return query(className, this.$container);
-    }
-
-    html() {
-        const { theme } = this.art.option;
+    static get html() {
         return `
           <div class="art-undercover"></div>
-          <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
+          <div class="art-video-player art-subtitle-show art-layer-show">
             <video class="art-video"></video>
             <div class="art-poster"></div>
             <div class="art-subtitle"></div>
@@ -96,11 +91,15 @@ export default class Template {
         `;
     }
 
+    query(className) {
+        return query(className, this.$container);
+    }
+
     desktop() {
-        const { backdrop, useSSR } = this.art.option;
+        const { backdrop, theme, useSSR } = this.art.option;
 
         if (!useSSR) {
-            this.$container.innerHTML = this.html();
+            this.$container.innerHTML = Template.html;
         }
 
         this.$undercover = this.query('.art-undercover');
@@ -131,6 +130,8 @@ export default class Template {
         this.$miniClose = this.query('.art-mini-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
+        setStyle(this.$player, '--theme', theme);
+
         if (backdrop) {
             addClass(this.$settingInner, 'art-backdrop-filter');
             addClass(this.$contextmenu, 'art-backdrop-filter');

packages/artplayer/src/utils/compatibility.js

@@ -1,4 +1,4 @@
-export const userAgent = window.navigator.userAgent;
+export const userAgent = typeof window !== 'undefined' ? window.navigator.userAgent : '';
 export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
 export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
 export const isWechat = /MicroMessenger/i.test(userAgent);