favorite-icon-video - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.common.js

 'use strict';
 
-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);
-var hasSupport = chrome || firefox || opera;
+function hasSupport() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    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);
+    return chrome || firefox || opera;
+}
 
@@ -28,2 +33,5 @@ var PNG_MIME_TYPE = 'image/png';
     Favicon.searchIcons = function () {
+        if (typeof window === 'undefined') {
+            return [];
+        }
         var result = [];
@@ -50,3 +58,3 @@ var links = document.querySelectorAll('head link');
     Favicon.size = 32;
-    Favicon.hasSupport = hasSupport;
+    Favicon.hasSupport = hasSupport();
     return Favicon;
@@ -57,11 +65,12 @@ }());
     function FaviconVideo(options) {
+        if (options === void 0) { options = {}; }
         var _this = this;
         this.handleTimeupdate = function () {
-            if (!_this.context) {
+            if (!_this.context || !_this.video || !_this.canvas) {
                 return;
             }
             try {
-                var _a = _this.options, size = _a.size, video = _a.video;
+                var size = _this.options.size;
                 _this.context.clearRect(0, 0, size, size);
-                _this.context.drawImage(video, 0, 0, size, size);
+                _this.context.drawImage(_this.video, 0, 0, size, size);
             }
@@ -73,15 +82,14 @@ catch (e) {
         };
-        var size = options.size || Favicon.size;
         this.options = {
-            links: options.links,
-            size: size,
-            video: options.video,
+            links: options.links || undefined,
+            size: options.size || Favicon.size
         };
+    }
+    FaviconVideo.prototype.start = function (video) {
+        this.unbindEvents();
+        this.video = video;
         this.canvas = document.createElement('canvas');
-        this.canvas.width = size;
-        this.canvas.height = size;
+        this.canvas.width = this.options.size;
+        this.canvas.height = this.options.size;
         this.context = this.canvas.getContext('2d');
-    }
-    FaviconVideo.prototype.start = function () {
-        this.unbindEvents();
         this.bindEvents();
@@ -93,6 +101,8 @@ };
     FaviconVideo.prototype.bindEvents = function () {
-        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+        var _a;
+        (_a = this.video) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', this.handleTimeupdate, false);
     };
     FaviconVideo.prototype.unbindEvents = function () {
-        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        var _a;
+        (_a = this.video) === null || _a === void 0 ? void 0 : _a.removeEventListener('timeupdate', this.handleTimeupdate, false);
     };
@@ -103,4 +113,6 @@ FaviconVideo.prototype.reset = function () {
     FaviconVideo.prototype.destroy = function () {
-        var video = this.options.video;
-        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        this.unbindEvents();
+        this.video = undefined;
+        this.canvas = undefined;
+        this.context = undefined;
     };
@@ -107,0 +119,0 @@ return FaviconVideo;

dist/index.esm.js

@@ -1,6 +0,11 @@
-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);
-var hasSupport = chrome || firefox || opera;
+function hasSupport() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    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);
+    return chrome || firefox || opera;
+}
 
@@ -26,2 +31,5 @@ var PNG_MIME_TYPE = 'image/png';
     Favicon.searchIcons = function () {
+        if (typeof window === 'undefined') {
+            return [];
+        }
         var result = [];
@@ -48,3 +56,3 @@ var links = document.querySelectorAll('head link');
     Favicon.size = 32;
-    Favicon.hasSupport = hasSupport;
+    Favicon.hasSupport = hasSupport();
     return Favicon;
@@ -55,11 +63,12 @@ }());
     function FaviconVideo(options) {
+        if (options === void 0) { options = {}; }
         var _this = this;
         this.handleTimeupdate = function () {
-            if (!_this.context) {
+            if (!_this.context || !_this.video || !_this.canvas) {
                 return;
             }
             try {
-                var _a = _this.options, size = _a.size, video = _a.video;
+                var size = _this.options.size;
                 _this.context.clearRect(0, 0, size, size);
-                _this.context.drawImage(video, 0, 0, size, size);
+                _this.context.drawImage(_this.video, 0, 0, size, size);
             }
@@ -71,15 +80,14 @@ catch (e) {
         };
-        var size = options.size || Favicon.size;
         this.options = {
-            links: options.links,
-            size: size,
-            video: options.video,
+            links: options.links || undefined,
+            size: options.size || Favicon.size
         };
+    }
+    FaviconVideo.prototype.start = function (video) {
+        this.unbindEvents();
+        this.video = video;
         this.canvas = document.createElement('canvas');
-        this.canvas.width = size;
-        this.canvas.height = size;
+        this.canvas.width = this.options.size;
+        this.canvas.height = this.options.size;
         this.context = this.canvas.getContext('2d');
-    }
-    FaviconVideo.prototype.start = function () {
-        this.unbindEvents();
         this.bindEvents();
@@ -91,6 +99,8 @@ };
     FaviconVideo.prototype.bindEvents = function () {
-        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+        var _a;
+        (_a = this.video) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', this.handleTimeupdate, false);
     };
     FaviconVideo.prototype.unbindEvents = function () {
-        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        var _a;
+        (_a = this.video) === null || _a === void 0 ? void 0 : _a.removeEventListener('timeupdate', this.handleTimeupdate, false);
     };
@@ -101,4 +111,6 @@ FaviconVideo.prototype.reset = function () {
     FaviconVideo.prototype.destroy = function () {
-        var video = this.options.video;
-        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        this.unbindEvents();
+        this.video = undefined;
+        this.canvas = undefined;
+        this.context = undefined;
     };
@@ -105,0 +117,0 @@ return FaviconVideo;

dist/index.js

 var FaviconVideo = (function (exports) {
     'use strict';
 
-    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);
-    var hasSupport = chrome || firefox || opera;
+    function hasSupport() {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        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);
+        return chrome || firefox || opera;
+    }
 
@@ -29,2 +34,5 @@ var PNG_MIME_TYPE = 'image/png';
         Favicon.searchIcons = function () {
+            if (typeof window === 'undefined') {
+                return [];
+            }
             var result = [];
@@ -51,3 +59,3 @@ var links = document.querySelectorAll('head link');
         Favicon.size = 32;
-        Favicon.hasSupport = hasSupport;
+        Favicon.hasSupport = hasSupport();
         return Favicon;
@@ -58,11 +66,12 @@ }());
         function FaviconVideo(options) {
+            if (options === void 0) { options = {}; }
             var _this = this;
             this.handleTimeupdate = function () {
-                if (!_this.context) {
+                if (!_this.context || !_this.video || !_this.canvas) {
                     return;
                 }
                 try {
-                    var _a = _this.options, size = _a.size, video = _a.video;
+                    var size = _this.options.size;
                     _this.context.clearRect(0, 0, size, size);
-                    _this.context.drawImage(video, 0, 0, size, size);
+                    _this.context.drawImage(_this.video, 0, 0, size, size);
                 }
@@ -74,15 +83,14 @@ catch (e) {
             };
-            var size = options.size || Favicon.size;
             this.options = {
-                links: options.links,
-                size: size,
-                video: options.video,
+                links: options.links || undefined,
+                size: options.size || Favicon.size
             };
+        }
+        FaviconVideo.prototype.start = function (video) {
+            this.unbindEvents();
+            this.video = video;
             this.canvas = document.createElement('canvas');
-            this.canvas.width = size;
-            this.canvas.height = size;
+            this.canvas.width = this.options.size;
+            this.canvas.height = this.options.size;
             this.context = this.canvas.getContext('2d');
-        }
-        FaviconVideo.prototype.start = function () {
-            this.unbindEvents();
             this.bindEvents();
@@ -94,6 +102,8 @@ };
         FaviconVideo.prototype.bindEvents = function () {
-            this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+            var _a;
+            (_a = this.video) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', this.handleTimeupdate, false);
         };
         FaviconVideo.prototype.unbindEvents = function () {
-            this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+            var _a;
+            (_a = this.video) === null || _a === void 0 ? void 0 : _a.removeEventListener('timeupdate', this.handleTimeupdate, false);
         };
@@ -104,4 +114,6 @@ FaviconVideo.prototype.reset = function () {
         FaviconVideo.prototype.destroy = function () {
-            var video = this.options.video;
-            video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+            this.unbindEvents();
+            this.video = undefined;
+            this.canvas = undefined;
+            this.context = undefined;
         };
@@ -108,0 +120,0 @@ return FaviconVideo;

index.d.ts

 declare namespace favicon {
 	interface Video {
 		destroy(): void;
-		pause(): void;
 		reset(): void;
-		start(): void;
+		start(video: HTMLVideoElement): void;
+		stop(): void;
 	}
 
 	interface VideoStatic {
-		new (options: VideoOptions): Video;
+		new (options?: VideoOptions): Video;
 	}
 
 	interface VideoOptions {
-		links?: Array<HTMLLinkElement | HTMLImageElement>;
+		links?: Array<HTMLLinkElement | HTMLImageElement> | undefined;
 		size?: number;
-		timeout?: number;
-		video: HTMLVideoElement;
 	}
@@ -19,0 +17,0 @@ }

package.json

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

src/index.ts

 import { Favicon } from '../../favorite-icon/src/index';
 import { FaviconVideoOptions } from './types';
 
+export interface Options {
+    size: number;
+    links?: Array<HTMLLinkElement | HTMLImageElement>;
+}
+
 export class FaviconVideo {
-    private options: Required<FaviconVideoOptions>;
-    private canvas: HTMLCanvasElement;
-    private context: CanvasRenderingContext2D | null;
+    private options: Options;
+    private canvas?: HTMLCanvasElement;
+    private context?: CanvasRenderingContext2D | null;
+    private video: HTMLVideoElement | undefined;
 
-    constructor(options: FaviconVideoOptions) {
-        const size = options.size || Favicon.size;
+    constructor(options: FaviconVideoOptions = {}) {
         this.options = {
-            links: options.links,
-            size,
-            video: options.video,
+            links: options.links || undefined,
+            size: options.size || Favicon.size
         };
+    }
 
+    public start(video: HTMLVideoElement) {
+        this.unbindEvents();
+
+        this.video = video;
+
         this.canvas = document.createElement('canvas');
 
-        this.canvas.width = size;
-        this.canvas.height = size;
+        this.canvas.width = this.options.size;
+        this.canvas.height = this.options.size;
 
         this.context = this.canvas.getContext('2d');
-    }
 
-    public start() {
-        this.unbindEvents();
         this.bindEvents();
@@ -35,7 +42,7 @@ }
     private bindEvents() {
-        this.options.video.addEventListener('timeupdate', this.handleTimeupdate, false);
+        this.video?.addEventListener('timeupdate', this.handleTimeupdate, false);
     }
 
     private unbindEvents() {
-        this.options.video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        this.video?.removeEventListener('timeupdate', this.handleTimeupdate, false);
     }
@@ -48,8 +55,10 @@
     public destroy(): void {
-        const video = this.options.video;
-        video.removeEventListener('timeupdate', this.handleTimeupdate, false);
+        this.unbindEvents();
+        this.video = undefined;
+        this.canvas = undefined;
+        this.context = undefined;
     }
 
     private handleTimeupdate = () => {
-        if (!this.context) {
+        if (!this.context || !this.video || !this.canvas) {
             return;
@@ -59,5 +68,5 @@ }
         try {
-            const { size, video } = this.options;
+            const { size } = this.options;
             this.context.clearRect(0, 0, size, size);
-            this.context.drawImage(video, 0, 0, size, size);
+            this.context.drawImage(this.video, 0, 0, size, size);
         } catch (e) {
@@ -64,0 +73,0 @@ console.error(e);

src/types.ts

 export interface FaviconVideoOptions {
     size?: number;
-    links: Array<HTMLLinkElement | HTMLImageElement> | undefined;
-    video: HTMLVideoElement;
+    links?: Array<HTMLLinkElement | HTMLImageElement>;
 }

No alert changes

Improved metrics

Total package byte prevSize

17959

increased by7.97%

Lines of code

420

increased by10.24%

No dependency changes