add useSSR

packages/artplayer/src/index.js

@@ -131,6 +131,7 @@ export default class Artplayer extends Emitter {
             localVideo: false,
             localSubtitle: false,
             networkMonitor: false,
+            useSSR: false,
             layers: [],
             contextmenu: [],
             controls: [],

packages/artplayer/src/info.js

@@ -4,13 +4,18 @@ import Component from './utils/component';
 export default class Info extends Component {
     constructor(art) {
         super(art);
-
+        this.art = art;
         this.name = 'info';
+        if (this.art.template.$info) {
+            this.init();
+        }
+    }
 
+    init() {
         const {
             template: { $infoPanel, $infoClose, $video },
             events: { proxy },
-        } = art;
+        } = this.art;
 
         proxy($infoClose, 'click', () => {
             this.show = false;
@@ -19,12 +24,12 @@ export default class Info extends Component {
         let timer = null;
         const types = queryAll('[data-video]', $infoPanel);
 
-        art.on('destroy', () => {
+        this.art.on('destroy', () => {
             clearTimeout(timer);
         });
 
         function loop() {
-            types.forEach(item => {
+            types.forEach((item) => {
                 const value = $video[item.dataset.video];
                 item.innerText = typeof value === 'number' ? value.toFixed(2) : value;
             });
@@ -33,7 +38,7 @@ export default class Info extends Component {
             }, 1000);
         }
 
-        art.on('info', value => {
+        this.art.on('info', (value) => {
             clearTimeout(timer);
             if (value) {
                 loop();

packages/artplayer/src/scheme/index.js

@@ -57,6 +57,7 @@ export default {
     localVideo: b,
     localSubtitle: b,
     networkMonitor: b,
+    useSSR: b,
     plugins: [f],
     whitelist: [`${s}|${f}|${r}`],
     layers: [component],

packages/artplayer/src/template.js

@@ -27,9 +27,9 @@ export default class Template {
         return query(className, this.$container);
     }
 
-    desktop() {
-        const { theme, backdrop } = this.art.option;
-        this.$container.innerHTML = `
+    html() {
+        const { theme } = this.art.option;
+        return `
           <div class="art-undercover"></div>
           <div class="art-video-player art-subtitle-show art-layer-show" style="--theme: ${theme}">
             <video class="art-video"></video>
@@ -94,6 +94,14 @@ export default class Template {
             <div class="art-contextmenus"></div>
           </div>
         `;
+    }
+
+    desktop() {
+        const { backdrop, useSSR } = this.art.option;
+
+        if (!useSSR) {
+            this.$container.innerHTML = this.html();
+        }
 
         this.$undercover = this.query('.art-undercover');
         this.$player = this.query('.art-video-player');
@@ -125,8 +133,10 @@ export default class Template {
 
         if (backdrop) {
             addClass(this.$settingInner, 'art-backdrop-filter');
-            addClass(this.$info, 'art-backdrop-filter');
             addClass(this.$contextmenu, 'art-backdrop-filter');
+            if (this.$info) {
+                addClass(this.$info, 'art-backdrop-filter');
+            }
         }
 
         if (this.art.isMobile) {

packages/artplayer/types/artplayer.d.ts

@@ -47,6 +47,7 @@ export default class Artplayer {
         localVideo?: boolean;
         localSubtitle?: boolean;
         networkMonitor?: boolean;
+        useSSR?: boolean;
         plugins?: Function[];
         whitelist?: (string | Function | RegExp)[];
         layers?: Component[];