@ceeblue/web-utils 2.5.0 → 2.6.0

package/dist/web-utils.d.ts

@@ -184,6 +184,55 @@ declare namespace Connect {
  * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
  * See file LICENSE or go to https://spdx.org/licenses/AGPL-3.0-or-later.html for full license details.
  */
+/**
+ * Log interface to deal with log everywhere:
+ * - subscribe logs: listen logs to effectuate some specific job related logs
+ * - intercept logs: intercept logs to change the default behavior
+ * - redirect logs: redirect logs to one other logger engine
+ * - redefine logs: change log text like adding a prefix
+ *
+ * You have 4 {@link LogType} 'error', 'warn', 'info', and 'debug', as commonly managed by browsers.
+ *
+ * @example
+ * // Intercept and redirect all the logs to the console (default behavior)
+ * import { log } from '@ceeblue/web-utils';
+ * log.on(type:LogType, args:uknown[]) => {
+ *    console[type](...args.splice(0)); // args is empty after this call = final interception
+ * }
+ *
+ * // Intercept and redirect the logs from Player compoment to the console
+ * player.log.on(type:LogType, args:uknown[]) => {
+ *    console[type](...args.splice(0)); // args is empty after this call = final interception
+ * }
+ *
+ * // Subscribe and redirect all the logs to a file logger
+ * log.on(type:LogType, args:uknown[]) => {
+ *    fileLogger[type](...args); // args stays unchanged to let's continue the default behavior
+ * }
+ *
+ * // Redefine the log to add some prefix indication
+ * class Player {
+ *    connector = new Connector();
+ *    constructor() {
+ *       connector.log = this.log.bind(this, "Connector log:");
+ *    }
+ * }
+ *
+ */
+interface ILog {
+    /**
+     * Build a log
+     */
+    (...args: unknown[]): Log;
+    /**
+     * Intercept, redefine or redirect any log
+     * If you clear args you intercept the log and nothing happen more after this call.
+     * @param type log level
+     * @param args args
+     * @returns
+     */
+    on: (type: LogType, args: unknown[]) => void;
+}
 /**
  * Log types
  */
@@ -207,22 +256,6 @@ declare class Log {
     constructor(onLog: Function, ...args: unknown[]);
     private _bind;
 }
-/**
- * ILog interface used by log methods
- */
-interface ILog {
-    /**
-     * Build a log
-     */
-    (...args: unknown[]): Log;
-    /**
-     * Intercept or redefine any log
-     * @param type log level
-     * @param args args
-     * @returns
-     */
-    on: (type: LogType, args: unknown[]) => void;
-}
 /**
  * Inherits from this class to use logs
  */
@@ -934,6 +967,51 @@ declare class WebSocketReliable extends EventEmitter {
     private _send;
 }
 
+/**
+ * Copyright 2024 Ceeblue B.V.
+ * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
+ * See file LICENSE or go to https://spdx.org/licenses/AGPL-3.0-or-later.html for full license details.
+ */
+/**
+ * Decode the timestamp from a video element and compute the latency between the timestamp and the current date.
+ *
+ * @param {HTMLVideoElement} sourceEl the video element to get the image from
+ * @param {HTMLCanvasElement} canvas
+ * @param {CanvasRenderingContext2D} context
+ * @param {Date} now current date, new Date() by default
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Number} tolerance percentage of tolerance for the black and white threshold, 0.2 by default
+ * @returns {Number} The latency in millisecond between 'now' and the decoded timestamp, 0 if the timestamp cannot be decoded
+ */
+declare function getLatency(sourceEl: HTMLVideoElement, canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, now?: Date, blocksPerRow?: number, tolerance?: number): number;
+/**
+ * Decode a previously encoded timestamp from a canvas
+ *
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} lineWidth width of the line in pixels
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Number} tolerance percentage of tolerance for the black and white threshold, 0.2 by default
+ * @returns {Date|null} The Date object representing the timestamp or null if the timestamp cannot be decoded
+ */
+declare function decodeTimestamp(context: CanvasRenderingContext2D, lineWidth: number, blocksPerRow?: number, tolerance?: number): Date | undefined;
+/**
+ * Encode the current timestamp into a line composed of blocks of black and white pixels
+ * written on the top of the canvas.
+ *
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} lineWidth width of the line in pixels
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Date} now current date, new Date() by default
+ */
+declare function encodeTimestamp(context: CanvasRenderingContext2D, lineWidth: number, blocksPerRow?: number, now?: Date): void;
+
+declare const EpochTime_decodeTimestamp: typeof decodeTimestamp;
+declare const EpochTime_encodeTimestamp: typeof encodeTimestamp;
+declare const EpochTime_getLatency: typeof getLatency;
+declare namespace EpochTime {
+  export { EpochTime_decodeTimestamp as decodeTimestamp, EpochTime_encodeTimestamp as encodeTimestamp, EpochTime_getLatency as getLatency };
+}
+
 /**
  * Copyright 2024 Ceeblue B.V.
  * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
@@ -942,4 +1020,4 @@ declare class WebSocketReliable extends EventEmitter {
 
 declare const VERSION: string;
 
-export { BinaryReader, BinaryWriter, BitReader, ByteRate, Connect, EventEmitter, FixMap, type ILog, Log, LogType, Loggable, NetAddress, Numbers, Queue, SDP, Util, VERSION, WebSocketReliable, type WebSocketReliableError, log };
+export { BinaryReader, BinaryWriter, BitReader, ByteRate, Connect, EpochTime, EventEmitter, FixMap, type ILog, Log, LogType, Loggable, NetAddress, Numbers, Queue, SDP, Util, VERSION, WebSocketReliable, type WebSocketReliableError, log };

package/dist/web-utils.js

@@ -1928,4 +1928,100 @@ class WebSocketReliable extends EventEmitter {
  * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
  * See file LICENSE or go to https://spdx.org/licenses/AGPL-3.0-or-later.html for full license details.
  */
-const VERSION = '2.5.0';export{BinaryReader,BinaryWriter,BitReader,ByteRate,Connect,EventEmitter,FixMap,Log,LogType,Loggable,NetAddress,Numbers,Queue,SDP,Util,VERSION,WebSocketReliable,log};//# sourceMappingURL=web-utils.js.map
+/**
+ * Decode the timestamp from a video element and compute the latency between the timestamp and the current date.
+ *
+ * @param {HTMLVideoElement} sourceEl the video element to get the image from
+ * @param {HTMLCanvasElement} canvas
+ * @param {CanvasRenderingContext2D} context
+ * @param {Date} now current date, new Date() by default
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Number} tolerance percentage of tolerance for the black and white threshold, 0.2 by default
+ * @returns {Number} The latency in millisecond between 'now' and the decoded timestamp, 0 if the timestamp cannot be decoded
+ */
+function getLatency(sourceEl, canvas, context, now = new Date(), blocksPerRow = 32, tolerance = 0.2) {
+    canvas.width = sourceEl.videoWidth;
+    canvas.height = Math.floor(canvas.width / blocksPerRow);
+    if (!canvas.width || !canvas.height) {
+        // No pixel to parse!
+        return 0;
+    }
+    context.drawImage(sourceEl, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+    const timestamp = decodeTimestamp(context, canvas.width, blocksPerRow, tolerance);
+    return timestamp == null ? 0 : now.getTime() - timestamp.getTime();
+}
+/**
+ * Decode a previously encoded timestamp from a canvas
+ *
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} lineWidth width of the line in pixels
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Number} tolerance percentage of tolerance for the black and white threshold, 0.2 by default
+ * @returns {Date|null} The Date object representing the timestamp or null if the timestamp cannot be decoded
+ */
+function decodeTimestamp(context, lineWidth, blocksPerRow = 32, tolerance = 0.2) {
+    const blockSize = lineWidth / blocksPerRow;
+    let binaryTime = '';
+    let i = blockSize / 2;
+    const data = context.getImageData(0, Math.round(i), lineWidth, 1).data;
+    const pixels = new Uint32Array(data.buffer);
+    const blackThreshold = 0xffffff * tolerance;
+    const whiteThreshold = 0xffffff * (1 - tolerance);
+    while (i < pixels.length) {
+        const pixel = pixels[Math.round(i)] & 0xffffff;
+        pixels[Math.round(i)] = pixel;
+        if (pixel < blackThreshold) {
+            // Black
+            binaryTime += '1';
+        }
+        else if (pixel > whiteThreshold) {
+            // White
+            binaryTime += '0';
+        }
+        else {
+            return;
+        }
+        i += blockSize;
+    }
+    const day = parseInt(binaryTime.slice(0, 5), 2);
+    const hour = parseInt(binaryTime.slice(5, 10), 2);
+    const minute = parseInt(binaryTime.slice(10, 16), 2);
+    const second = parseInt(binaryTime.slice(16, 22), 2);
+    const millisecond = parseInt(binaryTime.slice(22, 32), 2);
+    const now = new Date();
+    return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), day, hour, minute, second, millisecond));
+}
+/**
+ * Encode the current timestamp into a line composed of blocks of black and white pixels
+ * written on the top of the canvas.
+ *
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} lineWidth width of the line in pixels
+ * @param {Number} blocksPerRow number of blocks in the line, 32 by default
+ * @param {Date} now current date, new Date() by default
+ */
+function encodeTimestamp(context, lineWidth, blocksPerRow = 32, now = new Date()) {
+    const blockSize = Math.floor(lineWidth / blocksPerRow);
+    const day = now.getUTCDate();
+    const hour = now.getUTCHours();
+    const minute = now.getUTCMinutes();
+    const second = now.getUTCSeconds();
+    const millisecond = now.getUTCMilliseconds();
+    const binaryDay = day.toString(2).padStart(5, '0');
+    const binaryHour = hour.toString(2).padStart(5, '0');
+    const binaryMinute = minute.toString(2).padStart(6, '0');
+    const binarySecond = second.toString(2).padStart(6, '0');
+    const binaryMillisecond = millisecond.toString(2).padStart(10, '0');
+    const binaryTime = binaryDay + binaryHour + binaryMinute + binarySecond + binaryMillisecond;
+    for (let i = 0; i < binaryTime.length; i++) {
+        const x = (i % blocksPerRow) * blockSize;
+        const y = Math.floor(i / blocksPerRow) * blockSize;
+        context.fillStyle = binaryTime[i] === '1' ? 'black' : 'white';
+        context.fillRect(x, y, blockSize, blockSize);
+    }
+}var EpochTime=/*#__PURE__*/Object.freeze({__proto__:null,decodeTimestamp:decodeTimestamp,encodeTimestamp:encodeTimestamp,getLatency:getLatency});/**
+ * Copyright 2024 Ceeblue B.V.
+ * This file is part of https://github.com/CeeblueTV/web-utils which is released under GNU Affero General Public License.
+ * See file LICENSE or go to https://spdx.org/licenses/AGPL-3.0-or-later.html for full license details.
+ */
+const VERSION = '2.6.0';export{BinaryReader,BinaryWriter,BitReader,ByteRate,Connect,EpochTime,EventEmitter,FixMap,Log,LogType,Loggable,NetAddress,Numbers,Queue,SDP,Util,VERSION,WebSocketReliable,log};//# sourceMappingURL=web-utils.js.map