@gcorevideo/player 0.0.1

package/src/trace/LogTracer.ts

@@ -0,0 +1,23 @@
+import type { Tracer } from "./types.js";
+
+import { Logger } from "../utils/Logger.js";
+
+/**
+ * A tracer that logs to the console
+ * @public
+ */
+export class LogTracer implements Tracer {
+  private logger: Logger;
+
+  constructor(ns = "") {
+    this.logger = new Logger(ns);
+  }
+
+  reportError(e: Error) {
+    this.logger.error(e);
+  }
+
+  trace(msg: string, data?: Record<string, unknown>) {
+    this.logger.debug(msg, data);
+  }
+}

package/src/trace/SentryTracer.ts

@@ -0,0 +1,18 @@
+import {Client} from "@sentry/types";
+
+/**
+ * @beta
+ */
+export class SentryTracer {
+  constructor(private client: Client) {}
+
+  reportError(e: Error) {
+    this.client.captureException(e);
+  }
+
+  trace(msg: string, data?: Record<string, unknown>) {
+    this.client.captureMessage(msg, "info", {
+      data,
+    });
+  }
+};

package/src/trace/Tracer.ts

@@ -0,0 +1,27 @@
+import { Logger } from "../utils/Logger.js";
+
+const logger = new Logger("_");
+
+type TagValue = string | boolean | number | null | undefined;
+
+export interface Tracer {
+  reportError(e: unknown): void;
+  trace(msg: string, data: Record<string, unknown>): void;
+}
+
+export class LogTracer implements Tracer {
+  private tags: Record<string, TagValue> = {};
+
+  reportError(e: Error) {
+    logger.error(e, this.tags);
+  }
+
+  setTag(name: string, value: TagValue) {
+    this.tags[name] = value;
+  }
+
+  trace(msg: string, data?: Record<string, unknown>) {
+    const fullData = Object.assign({}, this.tags, data);
+    logger.debug(msg, fullData);
+  }
+}

package/src/trace/index.ts

@@ -0,0 +1,32 @@
+import type { Tracer } from "./types.js";
+
+const tracer: Tracer = {
+  trace: () => {},
+  reportError: () => {},
+};
+
+/**
+ * @public
+ * Sets a tracer implementation, e.g., LogTracer or SentryTracer
+ */
+export function setTracer(t: Tracer) {
+  tracer.trace = t.trace.bind(t);
+  tracer.reportError = t.reportError.bind(t);
+}
+
+/**
+ * @public
+ * @param e
+ */
+export function reportError(e: unknown) {
+  tracer.reportError(e);
+}
+
+/**
+ * @public
+ * @param msg
+ * @param data
+ */
+export function trace(msg: string, data: Record<string, unknown> = {}) {
+  tracer.trace(msg, data);
+}

package/src/trace/types.ts

@@ -0,0 +1,7 @@
+/**
+ * @public
+ */
+export interface Tracer {
+  reportError(e: unknown): void;
+  trace(msg: string, data: Record<string, unknown>): void;
+}

package/src/types.ts

@@ -0,0 +1,100 @@
+export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none';
+export type PlayerDebugSettings = PlayerDebugTag | boolean;
+
+export type PlaybackType = 'live' | 'vod';
+export type MediaTransport = 'dash' | 'hls' | 'mpegts';
+export type TransportPreference = MediaTransport | 'auto';
+
+export type PlayerPlugin = {
+  new(...args: any[]): unknown;
+  type: 'core' | 'container' | 'playback';
+}
+
+// export type PluginName = StdPluginName | string;
+
+export type PlayerConfig = {
+  autoPlay?: boolean;
+  debug?: PlayerDebugSettings;
+  language?: string;
+  loop?: boolean;
+  multisources: StreamMediaSource[];
+  mute?: boolean;
+  playbackType: PlaybackType;
+  // plugins?: PluginName[];
+  pluginSettings?: Record<string, unknown>;
+  poster?: string;
+  priorityTransport?: TransportPreference;
+  realtimeApi?: string;
+  strings: TranslationSettings;
+}
+
+export type PlayerOptionsThumbnails = {
+  sprite?: string | null;
+  vtt?: string | null;
+
+}
+
+export type ContextMenuSettings = {
+  preventShowContextMenu?: boolean;
+}
+
+type LangTag = string;
+type TranslationKey = string;
+
+export type BroadcastSettings = {
+  status?: 'live' | 'noActiveStreams';
+}
+
+export type ClipsPluginOptions = Record<string, unknown>; // TODO
+
+export type PlaybackSettings = {
+  hlsjsConfig?: Record<string, unknown>;
+  playInline?: boolean;
+  preload?: 'auto' | 'metadata' | 'none';
+  triggerFatalErrorOnResourceDenied?: boolean;
+}
+
+export type DashSettings = Record<string, unknown>; //
+
+// TODO consult with the Broadcaster team
+// TODO turn into camel case convert at user level
+export type StreamMediaSourceDto = {
+  description: string;
+  dvr: boolean;
+  hls_cmaf_url?: string;
+  hls_mpegts_url?: string;
+  id: number;
+  live: boolean;
+  priority_transport: TransportPreference;
+  poster: string | null;
+  projection: ProjectionType | null;
+  screenshot: string | null;
+  source: string
+  source_dash: string | null;
+  sprite: string | null;
+  title: string;
+  vtt: string | null;
+}
+
+export type StreamMediaSource = {
+  description: string;
+  dvr: boolean;
+  hlsCmafUrl?: string;
+  hlsMpegtsUrl?: string;
+  id: number;
+  live: boolean;
+  priorityTransport: TransportPreference;
+  poster: string | null;
+  projection: ProjectionType | null;
+  screenshot: string | null;
+  source: string
+  sourceDash: string | null;
+  sprite: string | null;
+  title: string;
+  vtt: string | null;
+}
+
+export type SrcProjectionType = 'regular' | '360' | 'vr180' | 'vr360tb';
+export type ProjectionType = '360' | '180' | '360_TB';
+
+export type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey, string>>>;

package/src/typings/@clappr/core/error_mixin.d.ts

@@ -0,0 +1,15 @@
+import '@clappr/core';
+// import ErrorMixin from "@clappr/core/src/base/error_mixin/error_mixin";
+
+// export as namespace "@clappr/core";
+declare module "@clappr/core" {
+    // export ErrorMixin;
+
+    type ErrorOptions = {
+        useCodePrefix: boolean;
+    }
+
+    declare interface ErrorMixin {
+        createError(error: Object, options?: ErrorOptions): Error;
+    }
+}

package/src/typings/@clappr/core/events.d.ts

@@ -0,0 +1,7 @@
+// // Events.Custom
+// import { Events } from "@clappr/core";
+// declare module "@clappr/core" {
+//     declare class Events {
+//         static Custom: Record<string, string>;
+//     }
+// }

package/src/typings/@clappr/core/html5_video.d.ts

@@ -0,0 +1,28 @@
+import '@clappr/core';
+
+declare module "@clappr/core" {
+    declare type HTML5VideoSettingsItem =
+        | "seekbar"
+        | "playpause"
+        | "position"
+        | "duration"
+        | "fullscreen"
+        | "volume"
+        | "hd-indicator"
+        | "playstop";
+
+    declare type HTML5VideoSettings = {
+        default: HTML5VideoSettingsItem[];
+        left?: HTML5VideoSettingsItem[];
+        right?: HTML5VideoSettingsItem[];
+        seekEnabled?: boolean;
+    }
+
+    declare class HTML5Video extends Playback {
+        settings: HTML5VideoSettings;
+
+        readonly _minDvrSize: number;
+
+        _onDurationChange(): void;
+    }
+}

package/src/typings/@clappr/core/playback.d.ts

@@ -0,0 +1,5 @@
+import '@clappr/core';
+
+declare module "@clappr/core" {
+    declare interface Playback extends ErrorMixin { }
+}

package/src/typings/@clappr/core/player.d.ts

@@ -0,0 +1,83 @@
+import "@clappr/core";
+
+declare module "@clappr/core" {
+    type MediacontrolStyles = {
+        // TODO
+    }
+
+    type PlayerMediaSourceDesc = {
+        mimeType?: string;
+        source: string;
+    }
+
+    type PlayerMediaSource = string | PlayerMediaSourceDesc;
+
+    type ExternalTrack = {
+        kind?: "subtitles";
+        src: string;
+        label: string;
+        lang: string;
+    }
+
+    type HlsjsConfig = {
+        debug?: boolean;
+        startLevel?: number;
+    } & Record<string, unknown>;
+
+    type ShakaConfig = Record<string, unknown>;
+
+    declare type CorePlaybackConfig = {
+        // audioOnly: boolean;
+        disableContextMenu?: boolean;
+        controls?: boolean;
+        crossOrigin?: 'anonymous' | 'use-credentials';
+        // enableAutomaticABR?: boolean;
+        externalTracks?: unknown[]; // TODO
+        hlsjsConfig?: HlsjsConfig;
+        // initialBandwidthEstimate?: number;
+        // maxBufferLength?: number;
+        // maxBackBufferLength?: number;
+        // minBufferLength?: number;
+        minimumDvrSize?: number; // TODO ?
+        // maxAdaptiveBitrate?: number;
+        // maxAdaptiveVideoDimensions?: unknown; // TODO
+        playInline: boolean;
+        preload?: 'metadata' | 'auto' | 'none';
+        // preferredTextLanguage?: string;
+        // preferredAudioLanguage?: string;
+        shakaConfiguration?: ShakaConfig;
+    }
+
+    type ErrorLevel = "FATAL" | "WARN" | "INFO";
+
+    declare type EventSpec = string;
+    declare type EventHandlerSpec = string;
+    declare type PluginEventsConfig = Record<EventSpec, EventHandlerSpec>;
+
+    declare type PlaybackError = {
+        code?: number | string;
+        description: string;
+        raw?: MediaError;
+        level?: ErrorLevel;
+    }
+
+    declare type CorePlayerEvents = {
+        // TODO event arguments types
+        onReady?: () => void;
+        onResize?: (data: { width: number; height: number }) => void;
+        onPlay?: (metadata: unknown) => void;
+        onPause?: (metadata: unknown) => void;
+        onStop?: (metadata: unknown) => void;
+        onEnded?: () => void;
+        onSeek?: (currentTime: number) => void;
+        onError?: (err: PlaybackError) => void;
+        onTimeUpdate?: (timeProgress: { current: number; total: number }) => void;
+        onVolumeUpdate?: (value: number) => void;
+        onSubtitleAvailable?: () => void;
+    }
+
+    declare type ClapprVersionSpec = {
+        min: string;
+        // TODO
+    }
+}

package/src/typings/@clappr/plugins.d.ts

@@ -0,0 +1,29 @@
+import { Core, UICorePlugin } from "@clappr/core";
+import "@clappr/plugins";
+
+declare module "@clappr/plugins" {
+    declare type MediaControlOptions = {
+        hideMediaControlDelay?: number;
+        chromeless?: boolean;
+        source?: string;
+        sources?: string[];
+        baseUrl?: string;
+        disableKeyboardShortcuts?: boolean;
+        width?: number;
+        height?: number;
+        persistConfig?: boolean; // TODO
+        focusElement?: HTMLElement;
+        hideVolumeBar?: boolean;
+        parentElement?: HTMLElement;
+        mediacontrol?: {
+            buttons: string;
+            seekbar: string;
+        }
+    }
+
+    // declare class MediaControl extends UICorePlugin {
+    //     constructor(core: Core);
+
+    //     configure(options: MediaControlOptions): void;
+    // }
+}

package/src/typings/clappr-zepto.xd.xts

@@ -0,0 +1,44 @@
+import "clappr-zepto";
+
+declare module "clappr-zepto" {
+    declare type ZeptoResult = {
+        bind: (event: string, handler: (...args: any[]) => void) => void;
+        unbind: (event: string, handler: (...args: any[]) => void) => void;
+        // on: (event: string, handler: (...args: any[]) => void) => void;
+        // off: (event: string, handler: (...args: any[]) => void) => void;
+        find: (selector: string) => ZeptoResult;
+        slice: (start: number, end?: number) => ZeptoResult;
+        // get: () => HTMLElement[];
+        get: (index: number) => HTMLElement[] | HTMLElement | null;
+
+        append: (element: HTMLElement | string | ZeptoResult) => void;
+        remove: () => void;
+        empty: () => void;
+        
+        attr: (name: string, value: string) => void;
+        // css: (property: string, value: string | number) => void;
+        css: (styles: Record<string, string | number>) => void;
+        data: (name: string, value: unknown) => void;
+        // html: () => string;
+        html: (value: string) => void;
+        // text: () => string;
+        text: (value: string) => void;
+
+        show: () => void;
+        hide: () => void;
+
+        addClass: (className: string) => void;
+        removeClass: (className: string) => void;
+        hasClass: (className: string) => boolean;
+        toggleClass: (className: string) => void;
+
+        offset: () => { top: number; left: number };
+        width: () => number;
+        height: () => number;
+    };
+
+    declare const $: ((selector: string | Element | Document | ZeptoResult) => ZeptoResult) & {
+        extend(target: Record<string, any>, ...sources: Record<string, any>[]): Record<string, any>;
+        extend(deep: true, target: Record<string, any>, ...sources: Record<string, any>[]): Record<string, any>;
+    };
+}

package/src/typings/globals.d.ts

@@ -0,0 +1,8 @@
+declare interface HTMLVideoElement {
+    webkitDisplayingFullscreen?: boolean;
+}
+
+declare module "*.css";
+declare module "*.scss";
+declare module "*.svg";
+declare module "*.ejs";

package/src/utils/Logger.ts

@@ -0,0 +1,107 @@
+const APP_NAME = "gplayer";
+
+/**
+ * @beta
+ */
+export type WriteFn = (...args: any[]) => void;
+
+class DebuggerWrapper {
+  private currentWriter: WriteFn;
+
+  constructor(private writer: WriteFn, public readonly namespace: string, enabled = true) {
+    this.currentWriter = enabled ? writer : nullWriter;
+  }
+
+  enable() {
+    this.currentWriter = this.writer;
+  }
+
+  disable() {
+    this.currentWriter = nullWriter;
+  }
+
+  write = (m: any, ...args: any[]) => {
+    const tokens = args.map((_) => "%s");
+    if (typeof m === "string" || args.length > 0) {
+      tokens.unshift("%s");
+    }
+    this.currentWriter(`${this.namespace}: ${tokens.join(' ')}`, m, ...args.map(a => JSON.stringify(a)));
+  }
+}
+
+type Pattern = RegExp;
+
+const currentPatterns: Pattern[] = [];
+
+function parsePattern(pattern: string): Pattern {
+  if (pattern === "*") {
+    return /.?/;
+  }
+  return new RegExp("^" + pattern.replace(/\*/g, "[@\\w-]+"), "i");
+}
+
+function pass(namespace: string): boolean {
+  return currentPatterns.some((p) => p.test(namespace));
+}
+
+function nullWriter() {}
+
+/**
+ * Logging utility with [debug](https://www.npmjs.com/package/debug)-like API
+ * @beta
+ */
+export class Logger {
+  public readonly info: WriteFn;
+  public readonly warn: WriteFn;
+  public readonly error: WriteFn;
+  public readonly debug: WriteFn;
+
+  private static items: DebuggerWrapper[] = [];
+
+  constructor(namespace: string, appName = APP_NAME) {
+    const ns = namespace ? `:${namespace}` : "";
+
+    const info = new DebuggerWrapper(console.info.bind(console), `${appName}:INFO${ns}`, pass(namespace));
+    this.info = info.write;
+    
+    const warn = new DebuggerWrapper(console.warn.bind(console), `${appName}:WARN${ns}`, pass(namespace));
+    this.warn = warn.write;
+    
+    const error = new DebuggerWrapper(console.error.bind(console), `${appName}:ERROR${ns}`, pass(namespace));
+    this.error = error.write;
+    
+    const debug = new DebuggerWrapper(console.debug.bind(console), `${appName}:DEBUG${ns}`, pass(namespace));
+    this.debug = debug.write;
+
+    Logger.items.push(warn);
+    Logger.items.push(info);
+    Logger.items.push(error);
+    Logger.items.push(debug);
+  }
+
+  /**
+   * @param patterns - comma-separated list of patterns, can contain '*' as a wildcard
+   */
+  static enable(patterns: string) {
+    currentPatterns.splice(
+      0,
+      currentPatterns.length,
+      ...patterns.split(",").filter(Boolean).map(parsePattern),
+    );
+    Logger.toggleItems();
+  }
+
+  static disable() {
+    currentPatterns.splice(0, currentPatterns.length);
+  }
+
+  private static toggleItems() {
+    for (const w of Logger.items) {
+      if (pass(w.namespace)) {
+        w.enable();
+      } else {
+        w.disable();
+      }
+    }
+  }
+}

package/src/utils/canAutoplay.ts

@@ -0,0 +1,39 @@
+import { Browser } from '@clappr/core';
+import canAutoPlay from 'can-autoplay';
+
+import { reportError, trace } from "../trace/index.js";
+
+export type CanAutoplayResult = {
+  autoPlay: boolean;
+  muted: boolean;
+}
+
+export default async function (): Promise<CanAutoplayResult> {
+  let autoPlay = false;
+  let muted = false;
+
+  trace("canAutoplay enter");
+
+  try {
+    const autoplay = await canAutoPlay.video();
+
+    if (autoplay.result) {
+      autoPlay = true;
+    } else {
+      const checkObj = Browser.isiOS ? { muted: true, inline: true } : { muted: true };
+      const mute = await canAutoPlay.video(checkObj);
+
+      if (!mute.result) {
+        autoPlay = false;
+      } else {
+        muted = true;
+        autoPlay = true;
+      }
+    }
+  } catch (e) {
+    reportError(e);
+  }
+
+  trace("canAutoplay leave", { autoPlay, muted });
+  return { autoPlay, muted };
+}

package/src/utils/errors.ts

@@ -0,0 +1,6 @@
+export function wrapError(error: any): Error {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error(String(error));
+}

package/src/utils/queryParams.ts

@@ -0,0 +1,5 @@
+import { PlayerDebugTag } from "src/types";
+
+function isValidDebugTag(tag: string): tag is PlayerDebugTag {
+  return ['all', 'clappr', 'dash', 'hls', 'none'].includes(tag);
+}

package/src/utils/scripts-load.ts

@@ -0,0 +1,26 @@
+
+export function request(url: string, timeout: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    const win = window, doc = document, el = 'script';
+
+    let timer: number | undefined;
+
+    const onLoad = () => {
+      win.clearTimeout(timer);
+      resolve();
+    };
+
+    const first = doc.getElementsByTagName(el)[0];
+    const script = doc.createElement(el);
+
+    script.src = url;
+    script.async = true;
+    script.onload = onLoad;
+    script.onerror = onLoad; // TODO reject?
+  
+    first?.parentNode?.insertBefore(script, first);
+    if (timeout) {
+      timer = win.setTimeout(onLoad, timeout);
+    }
+  });
+}

package/src/utils/types.ts

@@ -0,0 +1,5 @@
+import { $ } from "@clappr/core";
+
+export type ZeptoResult = ReturnType<typeof $>;
+
+export type TimerId = ReturnType<typeof setTimeout>;