feat: shadow DOM option

Author: EYHN

readme-zh-CN.md

@@ -76,6 +76,7 @@ new cplayer({
 |width|`''`|播放器宽度。|
 |size|`12px`|播放器尺寸。|
 |style|`''`|附加的css样式。|
+|shadowDom|`'true'`|启用 [shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM)。|
 |showPlaylistButton|`'true'`|显示播放列表按钮|
 |dropDownMenuMode|`'bottom'`|菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示|
 

readme.md

@@ -78,6 +78,7 @@ new cplayer({
 |width|`''`|播放器宽度。|
 |size|`12px`|播放器尺寸。|
 |style|`''`|附加的css样式。|
+|shadowDom|`'true'`|启用 [shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM)。|
 |showPlaylistButton|`'true'`|显示播放列表按钮|
 |dropDownMenuMode|`'bottom'`|菜单（播放列表和歌曲信息）的显示模式， ‘bottom’ 底部、 'top' 顶部、 'none' 不显示|
 

src/example.ts

@@ -74,7 +74,8 @@ window.addEventListener("load",
     let players = [ new cplayer({
       ...options,
       playlist,
-      element: document.getElementById('app1')
+      element: document.getElementById('app1'),
+      shadowDom: false
     }), new cplayer({
       ...options,
       playlist: playlist.push(playlist.shift()) && playlist,

src/lib/index.ts

@@ -206,7 +206,7 @@ export default class cplayer extends EventEmitter {
   }
 
   private isPlaying() {
-    return this.audioElement.currentTime > 0 && !this.audioElement.paused && !this.audioElement.ended && this.audioElement.readyState > 2;
+    return !!this.audioElement && this.audioElement.currentTime > 0 && !this.audioElement.paused && !this.audioElement.ended && this.audioElement.readyState > 2;
   }
 
   public openAudio(audio: IAudioItem = this.nowplay) {
@@ -346,7 +346,7 @@ export default class cplayer extends EventEmitter {
     this._volume = parseFloat(volume as string);
     if (this.audioElement)
       this.audioElement.volume = Math.max(0.0, Math.min(1.0, this._volume));
-    this.emit('volumechange', this.audioElement.volume);
+    this.emit('volumechange', this.volume);
   }
 
   public destroy() {

src/lib/mediaSession.ts

@@ -6,7 +6,7 @@ const defaultPoster = require('../defaultposter.jpg')
 export function cplayerMediaSessionPlugin(player: cplayer)
 {
   if ('mediaSession' in navigator) {
-    navigator.mediaSession.metadata = mediaMetadata(player.nowplay);
+    if (player.nowplay) navigator.mediaSession.metadata = mediaMetadata(player.nowplay);
     navigator.mediaSession.setActionHandler('play', () => player.play());
     navigator.mediaSession.setActionHandler('pause', () => player.pause());
     navigator.mediaSession.setActionHandler('previoustrack', () => player.prev());

src/lib/view.ts

@@ -56,6 +56,7 @@ export interface ICplayerViewOption {
   style?: string;
   dark?: boolean;
   big?: boolean;
+  shadowDom?: boolean;
   dropDownMenuMode?: 'bottom' | 'top' | 'none' | string;
 }
 
@@ -69,7 +70,8 @@ const defaultOption: ICplayerViewOption = {
   dropDownMenuMode: 'bottom',
   width: '',
   size: '12px',
-  style: ''
+  style: '',
+  shadowDom: true
 }
 
 
@@ -129,13 +131,13 @@ export default class cplayerView extends EventEmitter {
     };
     this.player = player;
     if (this.options.generateBeforeElement) {
-      if ((this.options.element as any).createShadowRoot) {
+      if ((this.options.element as any).createShadowRoot && options.shadowDom !== false) {
         this.rootElement = createBeforeShadowElement(this.options.element, htmlTemplate, style + this.options.style);
       } else {
         this.rootElement = createBeforeElement(this.options.element, htmlTemplate, style + this.options.style);
       }
     } else {
-      if ((this.options.element as any).createShadowRoot) {
+      if ((this.options.element as any).createShadowRoot && options.shadowDom !== false) {
         this.rootElement = createShadowElement(this.options.element, htmlTemplate, style + this.options.style);
       } else {
         this.rootElement = createElement(this.options.element, htmlTemplate, style + this.options.style);
@@ -165,12 +167,12 @@ export default class cplayerView extends EventEmitter {
       this.big();
     }
 
-    this.setPoster(this.player.nowplay.poster || defaultPoster);
+    // this.setPoster(this.player.nowplay.poster || defaultPoster);
     this.setProgress(this.player.currentTime / this.player.duration,
       this.player.currentTime,
       this.player.duration);
-    this.elementLinks.title.innerText = this.player.nowplay.name;
-    this.elementLinks.artist.innerText = this.player.nowplay.artist || '';
+    // this.elementLinks.title.innerText = this.player.nowplay.name;
+    // this.elementLinks.artist.innerText = this.player.nowplay.artist || '';
     this.updateLyric();
     this.updatePlaylist();
   }
@@ -381,6 +383,11 @@ export default class cplayerView extends EventEmitter {
   }
 
   private updateLyric(playedTime: number = 0) {
+    if (!this.player.nowplay) {
+      this.setLyric(null);
+      return;
+    }
+
     if (this.player.nowplay.lyric && typeof this.player.nowplay.lyric !== 'string' && this.player.played) {
       let lyric = this.player.nowplay.lyric.getLyric(playedTime * 1000);
       let nextLyric = this.player.nowplay.lyric.getNextLyric(playedTime * 1000);

webpack.config.example.js

@@ -99,20 +99,12 @@ module.exports = {
                 ]
             },
             {
-                test: /\.(png|jpg)$/,
+                test: /\.(ttf|otf|woff|woff2|eot|png|jpg|mp3|mp4)$/,
                 use: [{
                     loader: 'url-loader',
                     options: {
-                        limit: 8192
-                    }
-                }]
-            },
-            {
-                test: /\.(ttf|otf|woff|woff2|eot)$/,
-                use: [{
-                    loader: 'url-loader',
-                    options: {
-                        limit: 8192
+                        limit: 8192,
+                        esModule: false
                     }
                 }]
             },

webpack.config.prod.js

@@ -90,20 +90,12 @@ module.exports = {
                 ]
             },
             {
-                test: /\.(png|jpg)$/,
+                test: /\.(ttf|otf|woff|woff2|eot|png|jpg|mp3|mp4)$/,
                 use: [{
                     loader: 'url-loader',
                     options: {
-                        limit: 8192
-                    }
-                }]
-            },
-            {
-                test: /\.(ttf|otf|woff|woff2|eot)$/,
-                use: [{
-                    loader: 'url-loader',
-                    options: {
-                        limit: 8192
+                        limit: 8192,
+                        esModule: false
                     }
                 }]
             },