feat: shadow DOM option

MoePlayer · Jan 15, 2020 · 2036a1e · 2036a1e
1 parent 99d6177
commit 2036a1e
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 32 deletions.
diff --git a/readme-zh-CN.md b/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' 不显示|
 

diff --git a/readme.md b/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' 不显示|
 

diff --git a/src/example.ts b/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,

diff --git a/src/lib/index.ts b/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() {

diff --git a/src/lib/mediaSession.ts b/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());

diff --git a/src/lib/view.ts b/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);

diff --git a/webpack.config.example.js b/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
  }
  }]
  },

diff --git a/webpack.config.prod.js b/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
  }
  }]
  },