v2.1.0

Fix: Before adding "relative" style attributes to "Wrapper" elements, increase corresponding judgments; Refactor: Video Player UI layout;
cycjimmy · Oct 24, 2018 · c7169eb · c7169eb
1 parent 262eb70
commit c7169eb
Show file tree

Hide file tree

Showing 15 changed files with 394 additions and 874 deletions.
diff --git a/build/JSMpeg.js b/build/JSMpeg.js
diff --git a/build/JSMpeg.min.js b/build/JSMpeg.min.js
diff --git a/dist/JSMpeg.js b/dist/JSMpeg.js
diff --git a/dist/JSMpeg.js.map b/dist/JSMpeg.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsmpeg-player",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "MPEG1 Video Player Based On JSMpeg",
   "main": "build/JSMpeg.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "autoprefixer": "^9.2.1",
+    "autoprefixer": "^9.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",

diff --git a/src/buttonView.js b/src/buttonView.js
@@ -0,0 +1,19 @@
+/**
+ * PLAY_BUTTON HTML
+ * @type {string}
+ */
+export const PLAY_BUTTON = `
+<svg viewBox="0 0 64 64">
+  <path d="M26,45.5L44,32L26,18.6v27V45.5L26,45.5z M32,2C15.4,2,2,15.5,2,32c0,16.6,13.4,30,30,30c16.6,0,30-13.4,30-30 C62,15.4,48.5,2,32,2L32,2z M32,56c-9.7,0-18.5-5.9-22.2-14.8C6.1,32.2,8.1,21.9,15,15c6.9-6.9,17.2-8.9,26.2-5.2 C50.1,13.5,56,22.3,56,32C56,45.3,45.2,56,32,56L32,56z"/>
+</svg>
+`;
+
+/**
+ * UNMUTE_BUTTON HTML
+ * @type {string}
+ */
+export const UNMUTE_BUTTON = `
+<svg viewBox="0 0 64 64">
+  <path d="M58.3,45.5l-4.8-4.3c1.4-2.9,2.2-6.2,2.2-9.6c0-11.1-8.2-20.3-18.9-21.9V3.3C50.9,4.9,62,16.9,62,31.6 C62,36.6,60.6,41.4,58.3,45.5L58.3,45.5z M30.4,5.6v15.2l-8.3-7.3L30.4,5.6L30.4,5.6z M36.7,19.9c4.6,1.9,7.9,6.4,7.9,11.7 c0,0.6-0.1,1.1-0.1,1.7l-7.8-6.9V19.9L36.7,19.9z M57.5,60.7l-7.1-6.3c-3.9,2.9-8.6,4.8-13.7,5.4v-6.4c3.2-0.5,6.2-1.7,8.8-3.4 l-8.1-7.2c-0.2,0.1-0.5,0.3-0.7,0.4v-1l-6.3-5.6v20.2L15.4,42.6H2V20.5h10.2l-9.7-8.6l4.2-4.7L61.7,56L57.5,60.7L57.5,60.7z"/>
+</svg>
+`;
diff --git a/src/lib/video-element.js b/src/lib/video-element.js
@@ -1,13 +1,14 @@
-import Player from './player';
-
 // style
-import _style from '../../static/theme/style.scss';
+import _style from '../theme/style.scss';
 
-// template
-import playButtonTemplate from '../../static/view/playButton.pug';
-import unmuteButtonTemplate from '../../static/view/unmuteButton.pug';
+// button view
+import {
+  PLAY_BUTTON,
+  UNMUTE_BUTTON,
+} from '../buttonView';
 
 // service
+import Player from './player';
 import isString from 'awesome-js-funcs/judgeBasic/isString';
 
 export default class VideoElement {
@@ -66,7 +67,10 @@ export default class VideoElement {
       poster: null,
     };
 
-    this.els.wrapper.classList.add(_style.wrapper);
+    if (window.getComputedStyle(this.els.wrapper).getPropertyValue('position') === 'static') {
+      this.els.wrapper.style.position = 'relative';
+    }
+
     this.els.wrapper.clientRect = this.els.wrapper.getBoundingClientRect();
 
     this.initCanvas();
@@ -110,25 +114,25 @@ export default class VideoElement {
     this.player = new Player(this.options.videoUrl, _options, {
       play: () => {
         if (this.options.needPlayButton) {
-          this.els.playButton.style.display = 'none';
+          this.els.playButton.classList.add(_style.hidden);
         }
 
         if (this.els.poster) {
-          this.els.poster.style.display = 'none';
+          this.els.poster.classList.add(_style.hidden);
         }
 
         this.options.hooks.play();
       },
       pause: () => {
         if (this.options.needPlayButton) {
-          this.els.playButton.style.display = 'block';
+          this.els.playButton.classList.remove(_style.hidden);
         }
 
         this.options.hooks.pause();
       },
       stop: () => {
         if (this.els.poster) {
-          this.els.poster.style.display = 'block';
+          this.els.poster.classList.remove(_style.hidden);
         }
 
         this.options.hooks.stop();
@@ -161,7 +165,7 @@ export default class VideoElement {
 
     // Hide the play button if this video immediately begins playing
     if (this.options.autoplay || this.player.options.streaming) {
-      this.els.playButton.style.display = 'none';
+      this.els.playButton.classList.add(_style.hidden);
     }
 
     // Set up the unlock audio buton for iOS devices. iOS only allows us to
@@ -173,7 +177,7 @@ export default class VideoElement {
 
       if (this.options.autoplay || this.player.options.streaming) {
         this.els.unmuteButton = document.createElement('div');
-        this.els.unmuteButton.innerHTML = unmuteButtonTemplate({_style});
+        this.els.unmuteButton.innerHTML = UNMUTE_BUTTON;
         this.els.unmuteButton.classList.add(_style.unmuteButton);
         this.els.wrapper.appendChild(this.els.unmuteButton);
         unlockAudioElement = this.els.unmuteButton;
@@ -191,7 +195,7 @@ export default class VideoElement {
     }
 
     this.els.playButton.classList.add(_style.playButton);
-    this.els.playButton.innerHTML = playButtonTemplate({_style});
+    this.els.playButton.innerHTML = PLAY_BUTTON;
     this.els.wrapper.appendChild(this.els.playButton);
   };
 
@@ -202,7 +206,7 @@ export default class VideoElement {
     }
     this.player.audioOut.unlock(() => {
       if (this.els.unmuteButton) {
-        this.els.unmuteButton.style.display = 'none';
+        this.els.unmuteButton.classList.add(_style.hidden);
       }
       element.removeEventListener('touchstart', this.unlockAudioBound);
       element.removeEventListener('click', this.unlockAudioBound);

diff --git a/src/theme/_utilities.scss b/src/theme/_utilities.scss
@@ -0,0 +1,43 @@
+/*---------------------------
+ * mixin
+ *---------------------------*/
+/**
+ * flex container inner elements alignment
+ * $mainAxis
+ * $crossAxis
+ * options: false, center, flex-end, ...
+ */
+@mixin flex-box-align($mainAxis:false, $crossAxis:false) {
+  @if ($mainAxis != false) {
+    justify-content: $mainAxis;
+  }
+  @if ($crossAxis != false) {
+    align-items: $crossAxis;
+  }
+}
+
+/*---------------------------
+ * %placeholder
+ *---------------------------*/
+// absolute
+%abs {
+  position: absolute;
+  z-index: 1;
+}
+
+// fullContainer
+%fullContainer {
+  @extend %abs;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// flexCenter
+%flexCenter {
+  display: flex;
+  @include flex-box-align(center, center);
+}
+
+
diff --git a/src/theme/style.scss b/src/theme/style.scss
@@ -0,0 +1,58 @@
+@import "utilities";
+
+.canvas,
+.poster {
+  @extend %fullContainer;
+  display: block;
+}
+
+.poster {
+  &.hidden {
+    display: none;
+  }
+}
+
+// buttons
+%buttonCommon {
+  @extend %fullContainer;
+
+  opacity: .7;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.playButton {
+  @extend %buttonCommon;
+  @extend %flexCenter;
+  z-index: 10;
+
+  > svg {
+    width: 8vw;
+    height: 8vw;
+    max-width: 60px;
+    max-height: 60px;
+    fill: #fff;
+  }
+}
+
+.unmuteButton {
+  @extend %buttonCommon;
+  z-index: 10;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+
+  > svg {
+    margin: 0 15px 15px 0;
+    width: 6vw;
+    height: 6vw;
+    max-width: 40px;
+    max-height: 40px;
+    fill: #fff;
+  }
+}
+
diff --git a/static/media/Sony_test_video_640x360.ts b/static/media/Sony_test_video_640x360.ts
diff --git a/static/theme/style.scss b/static/theme/style.scss
diff --git a/static/view/index.pug b/static/view/index.pug
@@ -6,38 +6,68 @@ html(lang='en')
 
     style.
       #videoWrapper {
-        margin: 0 auto;
+        margin: 20px auto;
         width: 640px;
         height: 360px;
       }
 
+      .buttons-wrapper {
+        display: flex;
+        margin: 0 auto;
+        width: 640px;
+        height: 50px;
+      }
+
+      .button {
+        text-decoration: none;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        margin: 0 10px;
+        border: 1px solid #666;
+        border-radius: 10px;
+        color: #666;
+      }
+
   body
     #videoWrapper
+    .buttons-wrapper
+      a.button(href="javascript:;", data-action="play") play
+      a.button(href="javascript:;", data-action="pause") pause
+      a.button(href="javascript:;", data-action="stop") stop
+      a.button(href="javascript:;", data-action="destroy") destroy
 
     each _js in htmlWebpackPlugin.files.js
       script(src=_js)
 
     //- copy medias into dist dir
     - require('../media/big_buck_bunny_640x360.ts');
-    - require('../media/Sony_test_video_640x360.ts');
 
     script.
-      var
-        poster = 'https://cycjimmy.github.io/staticFiles/images/screenshot/big_buck_bunny_640x360.jpg'
-        , videoUrl = './media/big_buck_bunny_640x360.ts'
-      ;
+      var videoUrl = './media/big_buck_bunny_640x360.ts';
 
-      var
-        video = new JSMpeg.VideoElement('#videoWrapper', videoUrl, {
-          poster: poster
-        })
-      ;
+      var video = new JSMpeg.VideoElement('#videoWrapper', videoUrl, {
+        poster: 'https://cycjimmy.github.io/staticFiles/images/screenshot/big_buck_bunny_640x360.jpg'
+      });
 
       console.log(video);
 
+      document.querySelector('.buttons-wrapper').addEventListener('click', function (e) {
+        var target = e.target;
 
+        if (target === this) {
+          return;
+        }
 
+        var sAction = target.dataset.action;
 
+        if (!sAction) {
+          return
+        }
 
+        video[sAction]();
+      });
 
 
diff --git a/static/view/playButton.pug b/static/view/playButton.pug