🚀 RELEASE: Bump to v0.2.0

.gitignore

@@ -1 +1,2 @@
 node_modules/
+dist/

README.md

@@ -1,6 +1,7 @@
 # Cern Paella Plugins
 
 [![Build and push to NPM](https://github.com/cern-vc/cern-paella-plugins/actions/workflows/build.yml/badge.svg)](https://github.com/cern-vc/cern-paella-plugins/actions/workflows/build.yml)
+[![npm version](https://badge.fury.io/js/cern-paella-plugins.svg)](https://badge.fury.io/js/cern-paella-plugins)
 
 This repository contains the plugins for the Paella Player used at CERN.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cern-paella-plugins",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Paella plugins for cern use",
   "main": "src/index.js",
   "module": "dist/cern-paella-plugins.js",

src/plugins/ch.cern.paella.liveStreamIndicatorPlugin.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable max-classes-per-file */
+import { Canvas, CanvasPlugin, createElementWithHtmlText } from "paella-core";
+import * as img_url from "./icons/live-icon.png";
+
+// Canvas implementation
+export class LiveStreamIndicatorCanvas extends Canvas {
+  /**
+   * This  class displays an image indicating whether the stream is live or not.
+   *
+   * @param {*} player
+   * @param {*} videoContainer
+   * @param {*} stream
+   */
+  constructor(player, videoContainer, stream) {
+    super("div", player, videoContainer);
+    this.stream = stream;
+    this.parentContainer = videoContainer;
+  }
+
+  /**
+   * When the plugin is loaded, this code will be executed.
+   * It will display the image of the live stream indicator if the stream is live.
+   *
+   * @param {*} player
+   */
+  async loadCanvas() {
+    let isLiveStream = false;
+
+    const streamSources = this.stream.sources;
+
+    const setStreamAsLive = (key, value) => {
+      const tempIsLiveStream = value[0].isLiveStream;
+      if (tempIsLiveStream) {
+        isLiveStream = tempIsLiveStream;
+      }
+    };
+
+    Object.keys(streamSources).forEach((key) => {
+      setStreamAsLive(key, streamSources[key]);
+    });
+
+    if (isLiveStream) {
+      const indicator = document.getElementById("live-stream-indicator");
+      if (indicator) {
+        return;
+      }
+      console.log("Stream is live. Displaying the live stream indicator");
+      createElementWithHtmlText(
+        `<div id="live-stream-indicator"><img class="live-image-plugin" src="${img_url.default}"/></div>`,
+        this.parentContainer
+      );
+    }
+  }
+}
+
+// Canvas plugin definition
+export default class LiveStreamIndicatorPlugin extends CanvasPlugin {
+  // eslint-disable-next-line class-methods-use-this
+  get parentContainer() {
+    return "videoContainer"; // or videoContainer
+  }
+
+  isCompatible(stream) {
+    if (!Array.isArray(stream.canvas) || stream.canvas.length === 0) {
+      console.log("No canvas defined in the stream");
+      // By default, the default canvas is HTML video canvas
+      this.stream = stream;
+      return true;
+    }
+
+    return super.isCompatible(stream);
+  }
+
+  getCanvasInstance(videoContainer) {
+    return new LiveStreamIndicatorCanvas(
+      this.player,
+      videoContainer,
+      this.stream
+    );
+  }
+}

src/plugins/ch.cern.paella.liveStreamingProgressIndicator.js

@@ -0,0 +1,110 @@
+import { ProgressIndicatorPlugin } from "paella-core";
+
+function draw(context, width, height) {
+  console.log("draw params", {
+    context,
+    width,
+    height,
+  });
+  let posX = 0;
+  let textMargin = 0;
+  const circleSize = 8;
+
+  if (this.side === "left") {
+    posX = this.margin;
+    textMargin = circleSize + 4;
+  } else if (this.side === "center") {
+    posX = width / 2;
+    textMargin = 0;
+  } else if (this.side === "right") {
+    posX = width - this.margin;
+    textMargin = -(circleSize + 4);
+  }
+
+  const circleMargin = this.side === "center" ? -40 : 0;
+  context.fillStyle = this.textColor;
+  context.font = `bold 14px Arial`;
+  context.textAlign = this.side;
+  const textHeight = height / 2 + 3;
+
+  context.fillText("Live", posX + textMargin, textHeight);
+
+  context.beginPath();
+  context.fillStyle = this.circleColor;
+  context.arc(
+    posX + circleMargin,
+    height / 2,
+    circleSize / 2,
+    0,
+    2 * Math.PI,
+    false
+  );
+  context.fill();
+}
+
+function minHeight() {
+  return 25;
+}
+
+function minHeightHover() {
+  return 25;
+}
+
+export default class LiveStreamingProgressIndicatorPlugin extends ProgressIndicatorPlugin {
+  async isEnabled() {
+    const e = await super.isEnabled();
+    console.log("isEnabled1", e);
+    console.log("player", this.player);
+    console.log("isEnabled2", this.player.videoContainer.isLiveStream);
+    return true;
+    return e && this.player.videoContainer.isLiveStream;
+  }
+
+  async load() {
+    this.layer = this.config.layer ?? "foreground";
+    this.side = this.config.side ?? "right";
+    this.margin = this.config.margin ?? 50;
+    this.textColor = this.config.textColor ?? "white";
+    this.circleColor = this.config.circleColor ?? "red";
+
+    if (["foreground", "background"].indexOf(this.layer) === -1) {
+      throw new Error(
+        "Invalid layer set in plugin 'es.upv.paella.liveStreamingPlugin'. Valid values are 'foreground' or 'background'"
+      );
+    }
+
+    if (["left", "center", "right"].indexOf(this.side) === -1) {
+      throw new Error(
+        "Invalid side set in plugin 'es.upv.paella.liveStreamingPlugin'. Valid values are 'left', 'center' or 'right'"
+      );
+    }
+
+    console.log("load params", {
+      layer: this.layer,
+      side: this.side,
+      margin: this.margin,
+      textColor: this.textColor,
+      circleColor: this.circleColor,
+    });
+  }
+
+  drawForeground(context, width, height, isHover) {
+    if (this.layer === "foreground") {
+      draw.apply(this, [context, width, height, isHover]);
+    }
+  }
+
+  drawBackground(context, width, height, isHover) {
+    if (this.layer === "background") {
+      draw.apply(this, [context, width, height, isHover]);
+    }
+  }
+
+  get minHeight() {
+    return minHeight.apply(this);
+  }
+
+  get minHeightHover() {
+    return minHeightHover.apply(this);
+  }
+}

src/plugins/ch.cern.paella.matomoAnalyticsPlugin.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-multi-assign */
+import { DataPlugin } from "paella-core";
+
+export default class MatomoAnalyticsUserTrackingDataPlugin extends DataPlugin {
+  async load() {
+    console.log("Loading matomo analytics plugin");
+    const { trackingId } = this.config;
+    // const domain = this.config.domain || "auto";
+    if (trackingId) {
+      console.log("Matomo Analytics Enabled");
+      const _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      // eslint-disable-next-line func-names
+      (function () {
+        const u = "https://webanalytics.web.cern.ch/";
+        _paq.push(["setTrackerUrl", `${u}matomo.php`]);
+        _paq.push(["setSiteId", trackingId]);
+        const d = document;
+        const g = d.createElement("script");
+        const s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = `${u}matomo.js`;
+        s.parentNode.insertBefore(g, s);
+      })();
+    } else {
+      console.log(
+        "No Matomo Tracking ID found in config file. Disabling Matomo Analytics",
+      );
+    }
+  }
+
+  async write(context, { id }, data) {
+    if (this.config.category === undefined || this.config.category === true) {
+      const category = "PaellaPlayer";
+      const action = data.event;
+      const labelData = {
+        videoId: id,
+        plugin: data.plugin,
+      };
+
+      // try {
+      //   // Test if data parameters can be serialized
+      //   JSON.stringify(data.params);
+      //   labelData.params = data.params;
+      // } catch (error) {
+      //   console.log(error);
+      // }
+
+      const label = JSON.stringify(labelData);
+      if (category.length > 0 && action.length > 0) {
+        // _paq.push(['trackEvent', 'Contact', 'Email Link Click', '[email protected]']);
+        // eslint-disable-next-line no-undef
+        _paq.push(["trackEvent", category, action, label]);
+      }
+    }
+  }
+}

src/plugins/ch.cern.paella.matomoAnalyticsUserTrackingPlugin.js

@@ -0,0 +1,50 @@
+import { Events, EventLogPlugin } from "paella-core";
+
+// const eventKeys = Object.keys(Events);
+
+const getPaellaEvents = (events) =>
+  events.map((eventName) => Events[eventName]);
+
+export default class MatomoAnalyticsUserEventTrackerPlugin extends EventLogPlugin {
+  get events() {
+    if (this.config.events) {
+      return getPaellaEvents(this.config.events);
+    }
+
+    return [
+      Events.PLAY,
+      Events.PAUSE,
+      Events.SEEK,
+      Events.STOP,
+      Events.ENDED,
+      Events.FULLSCREEN_CHANGED,
+      Events.VOLUME_CHANGED,
+      Events.BUTTON_PRESS,
+      Events.RESIZE_END,
+    ];
+  }
+
+  async onEvent(event, params) {
+    const id = this.player.videoId;
+    // Remove plugin reference to avoid circular references
+    if (params.plugin) {
+      const { name, config } = params.plugin;
+      // eslint-disable-next-line no-param-reassign
+      params.plugin = { name, config };
+    }
+    const trackingData = { event, params };
+
+    switch (event) {
+      case Events.SHOW_POPUP:
+      case Events.HIDE_POPUP:
+      case Events.BUTTON_PRESS:
+        trackingData.plugin = params.plugin?.name || null;
+        break;
+      default:
+        break;
+    }
+
+    const context = this.config.context || "matomoUserTracking";
+    await this.player.data.write(context, { id }, trackingData);
+  }
+}