eplayer - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

lib/eplayer.js

@@ -9,2 +9,5 @@ 'use strict';
 
+exports.getTimeStr = getTimeStr;
+exports.isFullScreen = isFullScreen;
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -22,6 +25,10 @@
 
+function isFullScreen() {
+  return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
+}
+
 var Init = function Init(el, data) {
   _classCallCheck(this, Init);
 
-  var html = '\n    <link rel="stylesheet" href="//at.alicdn.com/t/font_836948_ouzixiva2b.css">\n    <style>\n      #player {\n        width: 800px;\n        height: 450px;\n        margin: 100px auto;\n        position: relative;\n      }\n      #player video {\n        width: 100%;\n        height: 100%;\n      }\n      .controls {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        height: 40px;\n        position: relative;\n        bottom: 50px;\n      }\n      .control{\n        padding: 0 15px\n      }\n      .progress {\n        flex: 1;\n        height: 5px;\n        width: 100%;\n        background-color: rgba(255, 255, 255, 0.8);\n        position: relative;\n        cursor: pointer;\n      }\n      .dot {\n        height: 13px;\n        width: 13px;\n        margin-left:-7px;\n        background: ' + data.themeColor + ';\n        position: absolute;\n        border-radius: 50%;\n        top: -4px;\n      }\n      .current-progress {\n        width: 0%;\n        height: 100%;\n        background: ' + data.themeColor + ';\n      }\n      .time {\n        text-align: center;\n        font-size: 12px;\n        color: #fff;\n        padding-left: 18px;\n      }\n      .ep-play,\n      .ep-pause {\n        font-size: 30px;\n      }\n      .ep-full {\n        font-size: 24px;\n        padding: 0 8px;\n      }\n      .epicon:hover {\n        color: #fff;\n      }\n      .epicon {\n        color: rgba(255, 255, 255, 0.8);\n        cursor: pointer;\n        transition: 0.3s;\n      }\n    \n    </style>\n    <video src="' + data.src + '" id="video"></video>\n      <div class="controls">\n        <div class="control">\n          <i class="epicon ep-play switch"></i>\n        </div>\n        <div class="progress">\n          <div class="current-progress"></div>\n          <div class="dot"></div>\n        </div>\n        <div class="time">\n          <span class="current">00:00</span>\n          /\n          <span class="total">00:00</span>\n        </div>\n        <div class="control">\n          <i class="epicon ep-full full"></i>\n        </div>  \n      </div>\n    ';
+  var html = '\n    <link rel="stylesheet" href="//at.alicdn.com/t/font_836948_ouzixiva2b.css">\n    <style>\n      #player {\n        background:#000;\n        width: 800px;\n        height: 450px;\n        margin: 100px auto;\n        position: relative;\n      }\n      #player video {\n        width: 100%;\n        height: 100%;\n      }\n      .panel {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%,-50%);\n      }\n      .wrap{\n        height: 100%;\n        width: 100%;\n      }\n      .panels .epicon {\n        font-size: 80px\n      }\n      .controls {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        height: 40px;\n        position: relative;\n        bottom: 50px;\n      }\n      .control{\n        padding: 0 15px\n      }\n      .progress {\n        flex: 1;\n        height: 5px;\n        width: 100%;\n        background-color: rgba(255, 255, 255, 0.8);\n        position: relative;\n        cursor: pointer;\n      }\n      .dot {\n        height: 13px;\n        width: 13px;\n        margin-left:-7px;\n        background: ' + data.themeColor + ';\n        position: absolute;\n        border-radius: 50%;\n        top: -4px;\n      }\n      .current-progress {\n        width: 0%;\n        height: 100%;\n        background: ' + data.themeColor + ';\n      }\n      .time {\n        text-align: center;\n        font-size: 12px;\n        color: #fff;\n        padding-left: 18px;\n      }\n      .ep-play,\n      .ep-pause {\n        font-size: 30px;\n      }\n      .ep-full {\n        font-size: 24px;\n        padding: 0 8px;\n      }\n      .epicon:hover {\n        color: #fff;\n      }\n      .epicon {\n        color: rgba(255, 255, 255, 0.8);\n        cursor: pointer;\n        transition: 0.3s;\n      }\n      .loading{\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        margin:-20px 0 0 -20px;\n        width: 40px;\n        height: 40px;\n        border: 5px solid;\n        border-color: rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8) transparent;\n        border-radius: 50%;\n        box-sizing: border-box;\n        animation: loading 1s linear infinite;\n      }\n      @keyframes loading{\n          0%{\n              transform: rotate(0deg);\n          }\n          100%{\n              transform: rotate(360deg);\n          }\n      }\n    </style>\n\n    <video src="' + data.src + '" id="video"></video>\n      <div class="panels">\n        <div class="loading"></div>\n        <i class="epicon ep-play panel" style="display:none;"></i>\n      </div>\n      <div class="controls">\n        <div class="control">\n          <i class="epicon ep-play switch"></i>\n        </div>\n        <div class="progress">\n          <div class="current-progress"></div>\n          <div class="dot"></div>\n        </div>\n        <div class="time">\n          <span class="current">00:00</span>\n          /\n          <span class="total">00:00</span>\n        </div>\n        <div class="control">\n          <i class="epicon ep-full full"></i>\n        </div>  \n      </div>\n    ';
   el.innerHTML = html;
@@ -42,5 +49,2 @@ };
     hls.attachMedia(this.el);
-    hls.on(_Hls.Events.MANIFEST_PARSED, function () {
-      video.play();
-    });
   }
@@ -61,3 +65,5 @@ };
     this.video = document.querySelector('video');
+    this.loading = document.querySelector('.loading');
     this.isPlay = document.querySelector('.switch');
+    this.panel = document.querySelector('.panel');
     this.totalTime = document.querySelector('.total');
@@ -76,2 +82,5 @@ this.currentTime = document.querySelector('.current');
 
+    this.video.onwaiting = function () {
+      return _this.waiting();
+    };
     this.video.oncanplay = function () {
@@ -83,2 +92,5 @@ return _this.canplay();
     };
+    this.panel.onclick = function () {
+      return _this.play();
+    };
     this.video.ontimeupdate = function () {
@@ -93,8 +105,17 @@ return _this.timeupdate();
     };
+    this.full.onclick = function () {
+      return _this.fullScreen();
+    };
   }
 
   _createClass(Eplayer, [{
+    key: 'waiting',
+    value: function waiting() {
+      this.loading.style.display = 'block';
+    }
+  }, {
     key: 'canplay',
     value: function canplay() {
       this.tTime = this.video.duration;
+      this.loading.style.display = 'none';
       var tTimeStr = getTimeStr(this.tTime);
@@ -110,2 +131,4 @@ this.totalTime.innerHTML = tTimeStr;
         this.isPlay.classList.add('ep-pause');
+        this.panel.classList.remove('ep-play');
+        this.panel.classList.add('wrap');
       } else {
@@ -115,2 +138,5 @@ this.video.pause();
         this.isPlay.classList.add('ep-play');
+        this.panel.style.display = 'block';
+        this.panel.classList.remove('wrap');
+        this.panel.classList.add('ep-play');
       }
@@ -144,2 +170,21 @@ }
     }
+  }, {
+    key: 'fullScreen',
+    value: function fullScreen() {
+      if (isFullScreen()) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        var rfs = this.el.requestFullScreen || this.el.webkitRequestFullScreen || this.el.mozRequestFullScreen || this.el.msRequestFullscreen;
+
+        return rfs.call(this.el);
+      }
+    }
   }]);
@@ -146,0 +191,0 @@

package.json

 {
   "name": "eplayer",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "A simple html5 video player",
@@ -5,0 +5,0 @@ "main": "./lib/eplayer.js",

README.md

@@ -10,3 +10,3 @@ <p align="center"><img src="http://wx2.sinaimg.cn/mw690/0060lm7Tly1fva3l3izvtj30dw0dwjs1.jpg" alt="eplayer logo" width="150px"></p>
 
-#### Install
+### Install
 
@@ -17,3 +17,3 @@ ```shell
 
-#### Use
+### Use
 
@@ -50,3 +50,3 @@ dom:
 ```
-### development
+#### development
 
@@ -58,2 +58,2 @@ ```shell
 #### Screenshot
-![free eplayer](http://wx4.sinaimg.cn/mw690/0060lm7Tly1fva62b1tqdj30rp0fmalc.jpg)
+![free eplayer](http://ww1.sinaimg.cn/orj480/0065Zy9egy1fva8spz7j6j30rn0fhk4p.jpg)

src/eplayer.js

 import { Init } from './init'
 import { Hls } from './hls'
-import { getTimeStr } from './util'
+import { getTimeStr, isFullScreen } from './util'
 
@@ -13,3 +13,5 @@ class Eplayer {
     this.video = document.querySelector('video')
+    this.loading = document.querySelector('.loading')
     this.isPlay = document.querySelector('.switch')
+    this.panel = document.querySelector('.panel')
     this.totalTime = document.querySelector('.total')
@@ -28,11 +30,19 @@ this.currentTime = document.querySelector('.current')
 
+    this.video.onwaiting = () => this.waiting()
     this.video.oncanplay = () => this.canplay()
     this.isPlay.onclick = () => this.play()
+    this.panel.onclick = () => this.play()
     this.video.ontimeupdate = () => this.timeupdate()
     this.progress.onclick = e => this.progressClick(e)
     this.video.onended = () => this.ended()
+    this.full.onclick = () => this.fullScreen()
   }
 
+  waiting() {
+    this.loading.style.display = 'block'
+  }
+
   canplay() {
     this.tTime = this.video.duration
+    this.loading.style.display = 'none'
     let tTimeStr = getTimeStr(this.tTime)
@@ -47,2 +57,4 @@ this.totalTime.innerHTML = tTimeStr
       this.isPlay.classList.add('ep-pause')
+      this.panel.classList.remove('ep-play')
+      this.panel.classList.add('wrap')
     } else {
@@ -52,2 +64,5 @@ this.video.pause()
       this.isPlay.classList.add('ep-play')
+      this.panel.style.display = 'block'
+      this.panel.classList.remove('wrap')
+      this.panel.classList.add('ep-play')
     }
@@ -79,4 +94,26 @@ }
   }
+
+  fullScreen() {
+    if (isFullScreen()) {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    } else {
+      let rfs =
+        this.el.requestFullScreen ||
+        this.el.webkitRequestFullScreen ||
+        this.el.mozRequestFullScreen ||
+        this.el.msRequestFullscreen
+
+      return rfs.call(this.el)
+    }
+  }
 }
 
 export default Eplayer

src/hls.js

@@ -12,7 +12,4 @@ export class Hls {
       hls.attachMedia(this.el)
-      hls.on(Hls.Events.MANIFEST_PARSED, function() {
-        video.play()
-      })
     }
   }
 }

src/init.js

@@ -7,2 +7,3 @@ export class Init {
       #player {
+        background:#000;
         width: 800px;
@@ -17,2 +18,15 @@ height: 450px;
       }
+      .panel {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+      }
+      .wrap{
+        height: 100%;
+        width: 100%;
+      }
+      .panels .epicon {
+        font-size: 80px
+      }
       .controls {
@@ -73,5 +87,30 @@ display: flex;
       }
-    
+      .loading{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin:-20px 0 0 -20px;
+        width: 40px;
+        height: 40px;
+        border: 5px solid;
+        border-color: rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8) transparent;
+        border-radius: 50%;
+        box-sizing: border-box;
+        animation: loading 1s linear infinite;
+      }
+      @keyframes loading{
+          0%{
+              transform: rotate(0deg);
+          }
+          100%{
+              transform: rotate(360deg);
+          }
+      }
     </style>
+
     <video src="${data.src}" id="video"></video>
+      <div class="panels">
+        <div class="loading"></div>
+        <i class="epicon ep-play panel" style="display:none;"></i>
+      </div>
       <div class="controls">
@@ -78,0 +117,0 @@ <div class="control">

src/util.js

@@ -10,1 +10,9 @@ export function getTimeStr(time) {
 }
+
+export function isFullScreen() {
+  return (
+    document.isFullScreen ||
+    document.mozIsFullScreen ||
+    document.webkitIsFullScreen
+  )
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Possible typosquat attack

Supply chain risk

There is a package with a similar name that is downloaded much more often.

Did you mean
theoplayer

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19542

increased by32.72%

Lines of code

499

increased by32.36%

Number of critical supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes