favorite-icon-video - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

dist/index.common.js

 'use strict';
 
-var opera = Boolean(window.opera) || navigator.userAgent.indexOf('Opera') > -1;
-var firefox = typeof window.InstallTrigger !== 'undefined';
+var ua = navigator.userAgent;
+var opera = Boolean(window.opera) || ua.indexOf('Opera') > -1;
+var firefox = ua.toLowerCase().indexOf('firefox') > -1;
 var chrome = Boolean(window.chrome);
@@ -23,8 +24,5 @@ var hasSupport = chrome || firefox || opera;
         if (this.hasSupport) {
-            this.set(this.getOriginalSrc());
+            this.set(Favicon.originalSrc);
         }
     };
-    Favicon.getOriginalSrc = function () {
-        return this.icons[this.icons.length - 1].href;
-    };
     Favicon.searchIcons = function () {
@@ -50,2 +48,3 @@ var result = [];
     Favicon.icons = Favicon.searchIcons();
+    Favicon.originalSrc = Favicon.icons[Favicon.icons.length - 1].href;
     Favicon.size = 32;
@@ -59,14 +58,21 @@ Favicon.hasSupport = hasSupport;
         var _this = this;
-        this.onplay = function () {
-            _this.play();
+        this.handleTimeupdate = function () {
+            if (!_this.context) {
+                return;
+            }
+            try {
+                var _a = _this.options, size = _a.size, video = _a.video;
+                _this.context.clearRect(0, 0, size, size);
+                _this.context.drawImage(video, 0, 0, size, size);
+            }
+            catch (e) {
+                console.error(e);
+            }
+            Favicon.set(_this.canvas, _this.options.links);
         };
-        this.onpause = function () {
-            _this.pause();
-        };
         var size = options.size || Favicon.size;
-        var video = options.video;
         this.options = {
             links: options.links,
             size: size,
-            video: video,
+            video: options.video,
         };
@@ -77,18 +83,16 @@ this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext('2d');
-        video.addEventListener('play', this.onplay, false);
-        video.addEventListener('pause', this.onpause, false);
-        video.addEventListener('ended', this.onpause, false);
-        video.addEventListener('abort', this.onpause, false);
     }
-    FaviconVideo.prototype.play = function () {
-        var _this = this;
-        this.options.video.muted = true;
-        this.options.video.play();
-        this.timer = setInterval(function () { return _this.draw(); }, this.options.timeout || 25);
+    FaviconVideo.prototype.start = function () {
+        this.unbindEvents();
+        this.bindEvents();
     };
-    FaviconVideo.prototype.pause = function () {
-        this.options.video.pause();
-        this.reset();
-        window.clearInterval(this.timer);
+    FaviconVideo.prototype.stop = function () {
+        this.unbindEvents();
     };
+    FaviconVideo.prototype.bindEvents = function () {
+        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+    };
+    FaviconVideo.prototype.unbindEvents = function () {
+        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+    };
     FaviconVideo.prototype.reset = function () {
@@ -98,31 +102,8 @@ Favicon.reset();
     FaviconVideo.prototype.destroy = function () {
-        this.pause();
         var video = this.options.video;
-        video.removeEventListener('play', this.onplay, false);
-        video.removeEventListener('pause', this.onpause, false);
-        video.removeEventListener('endeed', this.onpause, false);
-        video.removeEventListener('abort', this.onpause, false);
-        delete this.canvas;
-        delete this.context;
-        delete this.options;
+        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
     };
-    FaviconVideo.prototype.draw = function () {
-        var video = this.options.video;
-        if (video.paused || video.ended) {
-            this.pause();
-            return;
-        }
-        try {
-            var size = this.options.size;
-            this.context.clearRect(0, 0, size, size);
-            this.context.drawImage(video, 0, 0, size, size);
-        }
-        catch (e) {
-            console.error(e);
-        }
-        Favicon.set(this.canvas, this.options.links);
-    };
     return FaviconVideo;
 }());
 
-module.exports = FaviconVideo;
+exports.FaviconVideo = FaviconVideo;

dist/index.esm.js

@@ -1,3 +0,4 @@
-var opera = Boolean(window.opera) || navigator.userAgent.indexOf('Opera') > -1;
-var firefox = typeof window.InstallTrigger !== 'undefined';
+var ua = navigator.userAgent;
+var opera = Boolean(window.opera) || ua.indexOf('Opera') > -1;
+var firefox = ua.toLowerCase().indexOf('firefox') > -1;
 var chrome = Boolean(window.chrome);
@@ -21,8 +22,5 @@ var hasSupport = chrome || firefox || opera;
         if (this.hasSupport) {
-            this.set(this.getOriginalSrc());
+            this.set(Favicon.originalSrc);
         }
     };
-    Favicon.getOriginalSrc = function () {
-        return this.icons[this.icons.length - 1].href;
-    };
     Favicon.searchIcons = function () {
@@ -48,2 +46,3 @@ var result = [];
     Favicon.icons = Favicon.searchIcons();
+    Favicon.originalSrc = Favicon.icons[Favicon.icons.length - 1].href;
     Favicon.size = 32;
@@ -57,14 +56,21 @@ Favicon.hasSupport = hasSupport;
         var _this = this;
-        this.onplay = function () {
-            _this.play();
+        this.handleTimeupdate = function () {
+            if (!_this.context) {
+                return;
+            }
+            try {
+                var _a = _this.options, size = _a.size, video = _a.video;
+                _this.context.clearRect(0, 0, size, size);
+                _this.context.drawImage(video, 0, 0, size, size);
+            }
+            catch (e) {
+                console.error(e);
+            }
+            Favicon.set(_this.canvas, _this.options.links);
         };
-        this.onpause = function () {
-            _this.pause();
-        };
         var size = options.size || Favicon.size;
-        var video = options.video;
         this.options = {
             links: options.links,
             size: size,
-            video: video,
+            video: options.video,
         };
@@ -75,18 +81,16 @@ this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext('2d');
-        video.addEventListener('play', this.onplay, false);
-        video.addEventListener('pause', this.onpause, false);
-        video.addEventListener('ended', this.onpause, false);
-        video.addEventListener('abort', this.onpause, false);
     }
-    FaviconVideo.prototype.play = function () {
-        var _this = this;
-        this.options.video.muted = true;
-        this.options.video.play();
-        this.timer = setInterval(function () { return _this.draw(); }, this.options.timeout || 25);
+    FaviconVideo.prototype.start = function () {
+        this.unbindEvents();
+        this.bindEvents();
     };
-    FaviconVideo.prototype.pause = function () {
-        this.options.video.pause();
-        this.reset();
-        window.clearInterval(this.timer);
+    FaviconVideo.prototype.stop = function () {
+        this.unbindEvents();
     };
+    FaviconVideo.prototype.bindEvents = function () {
+        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+    };
+    FaviconVideo.prototype.unbindEvents = function () {
+        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+    };
     FaviconVideo.prototype.reset = function () {
@@ -96,31 +100,8 @@ Favicon.reset();
     FaviconVideo.prototype.destroy = function () {
-        this.pause();
         var video = this.options.video;
-        video.removeEventListener('play', this.onplay, false);
-        video.removeEventListener('pause', this.onpause, false);
-        video.removeEventListener('endeed', this.onpause, false);
-        video.removeEventListener('abort', this.onpause, false);
-        delete this.canvas;
-        delete this.context;
-        delete this.options;
+        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
     };
-    FaviconVideo.prototype.draw = function () {
-        var video = this.options.video;
-        if (video.paused || video.ended) {
-            this.pause();
-            return;
-        }
-        try {
-            var size = this.options.size;
-            this.context.clearRect(0, 0, size, size);
-            this.context.drawImage(video, 0, 0, size, size);
-        }
-        catch (e) {
-            console.error(e);
-        }
-        Favicon.set(this.canvas, this.options.links);
-    };
     return FaviconVideo;
 }());
 
-export default FaviconVideo;
+export { FaviconVideo };

dist/index.js

@@ -1,6 +0,7 @@
-var FaviconVideo = (function () {
+var FaviconVideo = (function (exports) {
     'use strict';
 
-    var opera = Boolean(window.opera) || navigator.userAgent.indexOf('Opera') > -1;
-    var firefox = typeof window.InstallTrigger !== 'undefined';
+    var ua = navigator.userAgent;
+    var opera = Boolean(window.opera) || ua.indexOf('Opera') > -1;
+    var firefox = ua.toLowerCase().indexOf('firefox') > -1;
     var chrome = Boolean(window.chrome);
@@ -24,8 +25,5 @@ var hasSupport = chrome || firefox || opera;
             if (this.hasSupport) {
-                this.set(this.getOriginalSrc());
+                this.set(Favicon.originalSrc);
             }
         };
-        Favicon.getOriginalSrc = function () {
-            return this.icons[this.icons.length - 1].href;
-        };
         Favicon.searchIcons = function () {
@@ -51,2 +49,3 @@ var result = [];
         Favicon.icons = Favicon.searchIcons();
+        Favicon.originalSrc = Favicon.icons[Favicon.icons.length - 1].href;
         Favicon.size = 32;
@@ -60,14 +59,21 @@ Favicon.hasSupport = hasSupport;
             var _this = this;
-            this.onplay = function () {
-                _this.play();
+            this.handleTimeupdate = function () {
+                if (!_this.context) {
+                    return;
+                }
+                try {
+                    var _a = _this.options, size = _a.size, video = _a.video;
+                    _this.context.clearRect(0, 0, size, size);
+                    _this.context.drawImage(video, 0, 0, size, size);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                Favicon.set(_this.canvas, _this.options.links);
             };
-            this.onpause = function () {
-                _this.pause();
-            };
             var size = options.size || Favicon.size;
-            var video = options.video;
             this.options = {
                 links: options.links,
                 size: size,
-                video: video,
+                video: options.video,
             };
@@ -78,18 +84,16 @@ this.canvas = document.createElement('canvas');
             this.context = this.canvas.getContext('2d');
-            video.addEventListener('play', this.onplay, false);
-            video.addEventListener('pause', this.onpause, false);
-            video.addEventListener('ended', this.onpause, false);
-            video.addEventListener('abort', this.onpause, false);
         }
-        FaviconVideo.prototype.play = function () {
-            var _this = this;
-            this.options.video.muted = true;
-            this.options.video.play();
-            this.timer = setInterval(function () { return _this.draw(); }, this.options.timeout || 25);
+        FaviconVideo.prototype.start = function () {
+            this.unbindEvents();
+            this.bindEvents();
         };
-        FaviconVideo.prototype.pause = function () {
-            this.options.video.pause();
-            this.reset();
-            window.clearInterval(this.timer);
+        FaviconVideo.prototype.stop = function () {
+            this.unbindEvents();
         };
+        FaviconVideo.prototype.bindEvents = function () {
+            this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+        };
+        FaviconVideo.prototype.unbindEvents = function () {
+            this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        };
         FaviconVideo.prototype.reset = function () {
@@ -99,33 +103,12 @@ Favicon.reset();
         FaviconVideo.prototype.destroy = function () {
-            this.pause();
             var video = this.options.video;
-            video.removeEventListener('play', this.onplay, false);
-            video.removeEventListener('pause', this.onpause, false);
-            video.removeEventListener('endeed', this.onpause, false);
-            video.removeEventListener('abort', this.onpause, false);
-            delete this.canvas;
-            delete this.context;
-            delete this.options;
+            video.removeEventListener('timeupdate', this.handleTimeupdate, false);
         };
-        FaviconVideo.prototype.draw = function () {
-            var video = this.options.video;
-            if (video.paused || video.ended) {
-                this.pause();
-                return;
-            }
-            try {
-                var size = this.options.size;
-                this.context.clearRect(0, 0, size, size);
-                this.context.drawImage(video, 0, 0, size, size);
-            }
-            catch (e) {
-                console.error(e);
-            }
-            Favicon.set(this.canvas, this.options.links);
-        };
         return FaviconVideo;
     }());
 
-    return FaviconVideo;
+    exports.FaviconVideo = FaviconVideo;
 
-}());
+    return exports;
+
+})({});

package.json

 {
   "name": "favorite-icon-video",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "A small library for video manipulating in favicon.",
@@ -5,0 +5,0 @@ "main": "dist/index.common.js",

README.md

@@ -13,24 +13,24 @@ ⏩ Favorite Icon Video
 
-# [Demo](https://hcodes.github.io/favorite-icon/examples/video.html)
+# [Demo](https://favorite-icon.github.io/favorite-icon/examples/video.html)
 
 # API
 
-## `.play()`
+## `.start()`
 Starts tracking the video and changes the favicon.
 
 ```js
-import FaviconVideo from 'favorite-icon-video';
+import { FaviconVideo } from 'favorite-icon-video';
 
-const favVideo = new FaviconVideo({
-    video: document.querySelector('video')
-});
+const video = document.querySelector('video');
+const favVideo = new FaviconVideo({ video });
 
 favVideo.start();
+video.play();
 ```
 
-## `.pause()`
+## `.stop()`
 Stop tracking the video and changes the favicon.
 
 ```js
-import FaviconVideo from 'favorite-icon-video';
+import { FaviconVideo } from 'favorite-icon-video';
 
@@ -43,3 +43,3 @@ const favVideo = new FaviconVideo({
 
-favVideo.pause();
+favVideo.stop();
 ```
@@ -51,3 +51,3 @@
 ```js
-import FaviconVideo from 'favorite-icon-video';
+import { FaviconVideo } from 'favorite-icon-video';
 
@@ -66,3 +66,3 @@ const favVideo = new FaviconVideo({
 ```js
-import FaviconVideo from 'favorite-icon-video';
+import { FaviconVideo } from 'favorite-icon-video';
 
@@ -69,0 +69,0 @@ const favVideo = new FaviconVideo({

src/index.ts

@@ -1,19 +0,19 @@
-import Favicon from '../../favorite-icon/src/index';
+import { Favicon } from '../../favorite-icon/src/index';
+import { FaviconVideoOptions } from './types';
 
-export default class FaviconVideo {
-    private options: favicon.VideoOptions;
+export class FaviconVideo {
+    private options: Required<FaviconVideoOptions>;
     private canvas: HTMLCanvasElement;
-    private context: CanvasRenderingContext2D;
-    private timer: number;
+    private context: CanvasRenderingContext2D | null;
 
-    constructor(options: favicon.VideoOptions) {
+    constructor(options: FaviconVideoOptions) {
         const size = options.size || Favicon.size;
-        const video = options.video;
         this.options = {
             links: options.links,
             size,
-            video,
+            video: options.video,
         };
 
         this.canvas = document.createElement('canvas');
+
         this.canvas.width = size;
@@ -23,51 +23,32 @@ this.canvas.height = size;
         this.context = this.canvas.getContext('2d');
-
-        video.addEventListener('play', this.onplay, false);
-        video.addEventListener('pause', this.onpause, false);
-        video.addEventListener('ended', this.onpause, false);
-        video.addEventListener('abort', this.onpause, false);
     }
 
-    private onplay = () => {
-        this.play();
+    public start() {
+        this.unbindEvents();
+        this.bindEvents();
     }
 
-    private onpause = () => {
-        this.pause();
+    public stop() {
+        this.unbindEvents();
     }
 
-    public play() {
-        this.options.video.muted = true;
-        this.options.video.play();
-        this.timer = setInterval(() => this.draw(), this.options.timeout || 25);
+    private bindEvents() {
+        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
     }
 
-    public pause() {
-        this.options.video.pause();
-        this.reset();
-        window.clearInterval(this.timer);
+    private unbindEvents() {
+        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
     }
 
-    public reset() {
+    public reset(): void {
         Favicon.reset();
     }
 
-    public destroy() {
-        this.pause();
-
+    public destroy(): void {
         const video = this.options.video;
-        video.removeEventListener('play', this.onplay, false);
-        video.removeEventListener('pause', this.onpause, false);
-        video.removeEventListener('endeed', this.onpause, false);
-        video.removeEventListener('abort', this.onpause, false);
-
-        delete this.canvas;
-        delete this.context;
-        delete this.options;
+        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
     }
 
-    private draw() {
-        const video = this.options.video;
-        if (video.paused || video.ended) {
-            this.pause();
+    private handleTimeupdate = () => {
+        if (!this.context) {
             return;
@@ -77,3 +58,3 @@ }
         try {
-            const size = this.options.size;
+            const { size, video } = this.options;
             this.context.clearRect(0, 0, size, size);
@@ -80,0 +61,0 @@ this.context.drawImage(video, 0, 0, size, size);

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

Fixed 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

10

increased by25%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

16634

decreased by-12.23%

Lines of code

381

decreased by-14.96%

No dependency changes