@srgssr/pillarbox-web 1.12.2

package/dist/types/src/utils/PlayerEvents.d.ts

@@ -0,0 +1,177 @@
+/**
+ * Exhaustive list of player events.
+ *
+ * See below the documentation related to the media events
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events
+ *
+ * @namespace {Object} PlayerEvents
+ */
+/**
+ * Triggered when the media can start playing.
+ *
+ * @event PlayerEvents#CAN_PLAY
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event
+ */
+export const CAN_PLAY: string;
+/**
+ * Triggered when the media can be played through to the end without buffering.
+ *
+ * @event PlayerEvents#CAN_PLAY_THROUGH
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
+ */
+export const CAN_PLAY_THROUGH: string;
+/**
+ * Triggered when the duration of the media changes.
+ *
+ * @event PlayerEvents#DURATION_CHANGE
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event
+ */
+export const DURATION_CHANGE: string;
+/**
+ * Triggered when the media element is emptied (e.g., reset as part of the seeking process).
+ *
+ * @event PlayerEvents#EMPTIED
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event
+ */
+export const EMPTIED: string;
+/**
+ * Triggered when the media playback has ended.
+ *
+ * @event PlayerEvents#ENDED
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
+ */
+export const ENDED: string;
+/**
+ * Triggered when an error occurs during media playback.
+ *
+ * @event PlayerEvents#ERROR
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event
+ */
+export const ERROR: string;
+/**
+ * Triggered when the media data has been loaded.
+ *
+ * @event PlayerEvents#LOADED_DATA
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
+ */
+export const LOADED_DATA: string;
+/**
+ * Triggered when metadata for the media has been loaded.
+ *
+ * @event PlayerEvents#LOADED_METADATA
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
+ */
+export const LOADED_METADATA: string;
+/**
+ * Triggered when the browser starts looking for media data.
+ *
+ * @event PlayerEvents#LOAD_START
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event
+ */
+export const LOAD_START: string;
+/**
+ * Triggered when the media playback is paused.
+ *
+ * @event PlayerEvents#PAUSE
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event
+ */
+export const PAUSE: string;
+/**
+ * Triggered when the media playback is resumed or started.
+ *
+ * @event PlayerEvents#PLAY
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event
+ */
+export const PLAY: string;
+/**
+ * Triggered when the media playback is in progress.
+ *
+ * @event PlayerEvents#PLAYING
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event
+ */
+export const PLAYING: string;
+/**
+ * Triggered as the media is being loaded.
+ *
+ * @event PlayerEvents#PROGRESS
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event
+ */
+export const PROGRESS: string;
+/**
+ * Triggered when the playback rate changes.
+ *
+ * @event PlayerEvents#RATE_CHANGE
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event
+ */
+export const RATE_CHANGE: string;
+/**
+ * Triggered when a seek operation is completed.
+ *
+ * @event PlayerEvents#SEEKED
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event
+ */
+export const SEEKED: string;
+/**
+ * Triggered when a seek operation is in progress.
+ *
+ * @event PlayerEvents#SEEKING
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event
+ */
+export const SEEKING: string;
+/**
+ * Triggered when the media playback is stalled.
+ *
+ * @event PlayerEvents#STALLED
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event
+ */
+export const STALLED: string;
+/**
+ * Triggered when media loading is suspended.
+ *
+ * @event PlayerEvents#SUSPEND
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event
+ */
+export const SUSPEND: string;
+/**
+ * Triggered when the current playback position is updated.
+ *
+ * @event PlayerEvents#TIME_UPDATE
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
+ */
+export const TIME_UPDATE: string;
+/**
+ * Triggered when the volume is changed.
+ *
+ * @event PlayerEvents#VOLUME_CHANGE
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event
+ */
+export const VOLUME_CHANGE: string;
+/**
+ * Triggered when the media playback is waiting for data.
+ *
+ * @event PlayerEvents#WAITING
+ * @type {string}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event
+ */
+export const WAITING: string;
+//# sourceMappingURL=PlayerEvents.d.ts.map

package/dist/types/src/utils/PlayerEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerEvents.d.ts","sourceRoot":"","sources":["../../../../src/utils/PlayerEvents.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;GAMG;AACH,uBAHU,MAAM,CAGkB;AAElC;;;;;;GAMG;AACH,+BAHU,MAAM,CAGiC;AAEjD;;;;;;GAMG;AACH,8BAHU,MAAM,CAGgC;AAEhD;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB;AAEjC;;;;;;GAMG;AACH,oBAHU,MAAM,CAGa;AAE7B;;;;;;GAMG;AACH,oBAHU,MAAM,CAGa;AAE7B;;;;;;GAMG;AACH,0BAHU,MAAM,CAGwB;AAExC;;;;;;GAMG;AACH,8BAHU,MAAM,CAGgC;AAEhD;;;;;;GAMG;AACH,yBAHU,MAAM,CAGsB;AAEtC;;;;;;GAMG;AACH,oBAHU,MAAM,CAGa;AAE7B;;;;;;GAMG;AACH,mBAHU,MAAM,CAGW;AAE3B;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB;AAEjC;;;;;;GAMG;AACH,uBAHU,MAAM,CAGmB;AAEnC;;;;;;GAMG;AACH,0BAHU,MAAM,CAGwB;AAExC;;;;;;GAMG;AACH,qBAHU,MAAM,CAGe;AAE/B;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB;AAEjC;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB;AAEjC;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB;AAEjC;;;;;;GAMG;AACH,0BAHU,MAAM,CAGwB;AAExC;;;;;;GAMG;AACH,4BAHU,MAAM,CAG4B;AAE5C;;;;;;GAMG;AACH,sBAHU,MAAM,CAGiB"}

package/dist/types/src/utils/typedef.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents the result of building key systems.
+ */
+export interface KeySystems {
+    /**
+     *   A mapping of DRM types to their corresponding key systems information.
+     *   For "FAIRPLAY" type, it includes a structure with certificate and license URIs;
+     *   for other types, it's a string representing the license URL.
+     */
+    keySystems: {
+        [x: string]: {
+            certificateUri: string;
+            licenseUri: string;
+        } | string;
+    };
+}
+//# sourceMappingURL=typedef.d.ts.map

package/dist/types/src/utils/typedef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typedef.d.ts","sourceRoot":"","sources":["../../../../src/utils/typedef.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,UAAU,EAAE;QACV,CAAC,CAAC,EAAE,MAAM,GAAG;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,UAAU,EAAE,MAAM,CAAC;SACpB,GAAG,MAAM,CAAC;KACZ,CAAC;CACH"}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@srgssr/pillarbox-web",
+  "description": "Pillarbox is the modern SRG SSR player",
+  "version": "1.12.2",
+  "type": "module",
+  "module": "dist/pillarbox.es.js",
+  "main": "dist/pillarbox.cjs.js",
+  "style": "./dist/pillarbox.min.css",
+  "types": "./dist/types/build.es.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/pillarbox.es.js",
+      "require": "./dist/pillarbox.cjs.js"
+    },
+    "./core": {
+      "import": "./dist/pillarbox-core.es.js",
+      "require": "./dist/pillarbox-core.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist/*",
+    "scss/*"
+  ],
+  "directories": {
+    "doc": "docs"
+  },
+  "targets": {
+    "main": false,
+    "github-page": {
+      "publicUrl": "./",
+      "isLibrary": false,
+      "outputFormat": "esmodule"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:lib && npm run build:typings && npm run build:css",
+    "build:css": "sass ./scss/pillarbox.scss:dist/pillarbox.min.css --style compressed --source-map --load-path node_modules",
+    "build:lib": "rollup -c",
+    "build:typings": "npx -p typescript tsc",
+    "eslint": "eslint --ext .js src",
+    "generate:docs": "jsdoc --configure docs/api/jsdoc.json --verbose",
+    "github:page": "parcel build index.html --target github-page && npm run generate:docs",
+    "outdated": "npm outdated",
+    "prebuild": "rimraf dist",
+    "release:ci": "semantic-release",
+    "start": "parcel -p 6969 index.html",
+    "stylelint": "stylelint **/*.scss --custom-syntax --allow-empty-input",
+    "stylelint:fix": "stylelint **/*.scss --fix",
+    "test": "jest --verbose",
+    "test:watch": "jest --watch --verbose"
+  },
+  "keywords": [],
+  "author": "SRG SSR",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SRGSSR/pillarbox-web/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SRGSSR/pillarbox-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://srgssr.github.io/pillarbox-web-demo/",
+  "devDependencies": {
+    "@babel/core": "^7.24.1",
+    "@babel/preset-env": "^7.24.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@parcel/transformer-sass": "^2.11.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^ 9.2.5",
+    "@semantic-release/npm": "^11.0.2",
+    "@types/jest": "^29.5.12",
+    "babel-jest": "^29.5.0",
+    "better-docs": "^2.7.3",
+    "buffer": "^6.0.3",
+    "clean-jsdoc-theme": "^4.2.17",
+    "eslint": "^8.55.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.6.1",
+    "jsdoc": "^4.0.2",
+    "jsdoc-tsimport-plugin": "^1.0.5",
+    "parcel": "^2.11.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.9.6",
+    "rollup-plugin-filesize": "^10.0.0",
+    "sass": "^1.70.0",
+    "semantic-release": "^23.0.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-order": "^6.0.4",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "video.js": "^8.11.8",
+    "videojs-contrib-eme": "^3.11.2"
+  }
+}

package/scss/components/_big-play.scss

@@ -0,0 +1,30 @@
+/*
+******************************************************************************
+-- Big play button: Initial play button shown before the video has played
+******************************************************************************
+*/
+&:hover .vjs-big-play-button {
+  background-color: #16161688;
+  transition: background-color .25s ease;
+}
+
+// Refer to https://github.com/videojs/video.js/pull/8398
+.vjs-big-play-button {
+  width: 2em;
+  height: 2em;
+  margin: 0;
+  font-size: 2.25em;
+  background: transparent;
+  border: 0.1em solid #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color .25s ease;
+}
+
+.vjs-big-play-button .vjs-icon-placeholder::before {
+  position: initial;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75em;
+}

package/scss/components/_captions-settings.scss

@@ -0,0 +1,71 @@
+/*
+******************************************************************************
+-- Text track settings: Displayed when editing text track parameters
+******************************************************************************
+*/
+.vjs-modal-dialog.vjs-text-track-settings {
+  top: 50%;
+  left: 50%;
+  max-width: 25em;
+  max-height: 50em;
+  background: rgba(22,22,22,.95);
+  border-radius: 0.5em;
+  box-shadow: 2px 2px 3px #0005;
+  transform: translate(-50%, -50%);
+  overscroll-behavior: contain;
+}
+
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: flex;
+  flex-direction: column;
+  padding: 1em 1.5em 0;
+}
+
+.vjs-text-track-settings legend {
+  font-size: 1em;
+}
+
+.vjs-text-track-settings fieldset span {
+  padding-inline: 0;
+}
+
+.vjs-text-track-settings fieldset {
+  display: flex;
+  margin: 0 0 1em 0;
+  padding: 0;
+}
+
+&.video-js .vjs-text-track-settings select {
+  margin: 0.25em 0 0 0;
+  padding: 0.5em;
+  color: #fff;
+  background: #3f3f3f;
+  border: none;
+  appearance: auto;
+
+  &:focus-within {
+    outline: solid;
+  }
+}
+
+.vjs-track-settings-controls {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    justify-content: end;
+
+    button {
+    margin-block: 1em;
+    padding: .25em .5em;
+    color: #fff;
+    background: #3f3f3f;
+
+    &:hover {
+      background: #5c5c5c;
+    }
+  }
+
+  .vjs-default-button {
+    margin-right: 0;
+  }
+}

package/scss/components/_control-bar.scss

@@ -0,0 +1,15 @@
+/*
+******************************************************************************
+-- Control bar: Contains the main controls of the player
+******************************************************************************
+*/
+&:not(.vjs-audio-only-mode) .vjs-control-bar {
+  align-items: flex-end;
+  height: 6em;
+  padding-inline: 1em;
+  background: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
+}
+
+&.vjs-audio-only-mode .vjs-control-bar {
+  background-color: #1e232c;
+}

package/scss/components/_control-spacer.scss

@@ -0,0 +1,9 @@
+/*
+******************************************************************************
+-- Spacer control: Spacer used as an insertion point
+******************************************************************************
+*/
+&:not(.vjs-audio-only-mode) .vjs-custom-control-spacer {
+  display: block;
+  flex: auto;
+}

package/scss/components/_control.scss

@@ -0,0 +1,8 @@
+/*
+******************************************************************************
+-- Control: Control bar components
+******************************************************************************
+*/
+.vjs-control {
+  height: 3em;
+}

package/scss/components/_error.scss

@@ -0,0 +1,10 @@
+/*
+******************************************************************************
+-- Error: Displayed when an error occurs
+******************************************************************************
+*/
+.vjs-error-display .vjs-modal-dialog-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/scss/components/_layout.scss

@@ -0,0 +1,63 @@
+/*
+******************************************************************************
+-- Title bar : Defines the default player size for each break point
+******************************************************************************
+*/
+&.vjs-layout-tiny {
+  font-size: 8px;
+}
+
+&.vjs-layout-x-small {
+  font-size: 10px;
+}
+
+&.vjs-layout-small {
+  font-size: 12px;
+}
+
+&.vjs-layout-medium {
+  font-size: 14px;
+}
+
+&.vjs-layout-large {
+  font-size: 16px;
+}
+
+&.vjs-layout-x-large {
+  font-size: 18px;
+}
+
+&.vjs-layout-huge {
+  font-size: 20px;
+}
+
+/*
+******************************************************************************
+-- Time control
+******************************************************************************
+*/
+// Avoid displaying the time controls if the source is a live stream and is small layouts
+&:not(.vjs-layout-tiny, .vjs-layout-x-small, .vjs-live) .vjs-time-divider,
+&:not(.vjs-layout-tiny, .vjs-layout-x-small, .vjs-live) .vjs-current-time,
+&:not(.vjs-layout-tiny, .vjs-layout-x-small, .vjs-live) .vjs-duration {
+  display: block;
+  padding: 0;
+  font-weight: bold;
+}
+
+/*
+******************************************************************************
+-- Progress control
+******************************************************************************
+*/
+// Avoid hiding the progress control
+&.vjs-layout-tiny,
+&.vjs-layout-x-small {
+  .vjs-progress-control {
+    display: flex;
+  }
+}
+
+&.vjs-layout-x-small.vjs-audio-only-mode .vjs-custom-control-spacer {
+  display: none;
+}

package/scss/components/_loading.scss

@@ -0,0 +1,34 @@
+/*
+******************************************************************************
+-- Loading spinner: Displayed while the media is loading
+******************************************************************************
+*/
+// Refer to https://github.com/videojs/video.js/pull/8369
+& .vjs-loading-spinner {
+  border: 0.25em solid transparent;
+}
+
+.vjs-loading-spinner,
+.vjs-loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: #333;
+  }
+  20% {
+    border-top-color: #333;
+  }
+  35% {
+    border-top-color: #fff;
+  }
+  60% {
+    border-top-color: #333;
+  }
+  100% {
+    border-top-color: #333;
+  }
+}

package/scss/components/_progress.scss

@@ -0,0 +1,70 @@
+/*
+******************************************************************************
+-- Progress control: Contains the load progress, and play progress
+******************************************************************************
+*/
+&:not(.vjs-audio-only-mode) .vjs-progress-control {
+  position: absolute;
+  bottom: 3em;
+  width: calc(100% - 2em);
+  height: 1em;
+}
+
+.vjs-progress-holder {
+  margin: 0;
+}
+
+.vjs-load-progress {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 1em;
+
+  div {
+    background: transparent;
+  }
+}
+
+&.vjs-scrubbing,
+&.vjs-seeking {
+  .vjs-play-progress .vjs-time-tooltip {
+    display: none;
+  }
+}
+
+.vjs-play-progress {
+  color: #af001e;
+  background: #af001e;
+  border-radius: 1em;
+}
+
+.vjs-play-progress::before {
+  font-size: 0px;
+  text-shadow: 0px 0px 1px #000;
+}
+
+.vjs-progress-control:hover  {
+  .vjs-play-progress::before {
+    font-size: .9em;
+  }
+
+  // Avoids recalculation of time tooltip position
+  .vjs-time-tooltip {
+    right: 0% !important;
+    transform: translateX(50%);
+  }
+}
+
+.vjs-progress-holder:focus-visible {
+  .vjs-play-progress::before {
+    font-size: .9em;
+  }
+}
+
+.vjs-time-tooltip,
+.vjs-mouse-display .vjs-time-tooltip {
+  top: -3em;
+  padding: 0.4em;
+  color: #fff;
+  font-weight: bold;
+  text-shadow: 1px 1px 3px #000, 1px 1px 2px #000;
+  background-color: transparent;
+}

package/scss/components/_slider.scss

@@ -0,0 +1,9 @@
+/*
+******************************************************************************
+-- Slider: Provides base functionality for sliders like the seek bar
+******************************************************************************
+*/
+.vjs-slider {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 1em;
+}

package/scss/components/_text-track.scss

@@ -0,0 +1,8 @@
+/*
+******************************************************************************
+-- Text track display: Displays text track cues
+******************************************************************************
+*/
+.vjs-text-track-display {
+  inset: 0 0 4em;
+}

package/scss/components/_time.scss

@@ -0,0 +1,29 @@
+/*
+******************************************************************************
+-- Time control: Provides media-related time information
+******************************************************************************
+*/
+.vjs-current-time {
+  margin-left: 1em;
+}
+
+.vjs-time-divider {
+  min-width: 1em;
+  text-align: center;
+}
+
+.vjs-remaining-time {
+  display: none;
+}
+
+&.vjs-audio-only-mode {
+  .vjs-current-time,
+  .vjs-time-divider,
+  .vjs-duration {
+    order: 1;
+  }
+
+  .vjs-duration {
+    margin-right: 1em;
+  }
+}

package/scss/components/_title-bar.scss

@@ -0,0 +1,9 @@
+/*
+******************************************************************************
+-- Title bar: Displays the title and/or description of the current media
+******************************************************************************
+*/
+.vjs-title-bar {
+  padding-bottom: 2em;
+  background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 100%);
+}