@sapudex/web-components 0.111.0

package/dist/MediaPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlayer.js","sourceRoot":"","sources":["../src/MediaPlayer.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport \"@ui5/webcomponents-icons/dist/v5/play.svg\";\nimport Player from \"video.js/dist/types/player.js\";\nimport type SeekBar from \"video.js/dist/types/control-bar/progress-control/seek-bar\";\nimport UDExMediaPlayerYoutube from \"./MediaPlayerYoutube.js\";\nimport UDExMediaPlayerVimeo, { VimeoPlayer } from \"./MediaPlayerVimeo.js\";\n\n// Template\nimport MediaPlayerTemplate from \"./generated/templates/MediaPlayerTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css\";\n\ndeclare global {\n  interface Window {\n    videojs: any;\n  }\n}\n\nexport enum AspectRatio {\n  \"16:9\" = \"16:9\",\n  \"9:16\" = \"9:16\",\n  \"4:3\" = \"4:3\",\n  \"1:1\" = \"1:1\",\n  \"none\" = \"none\",\n}\n\nexport interface VideoJSPlayer extends Player{\n  qualityLevels?: () => any;\n  textTracks?: () => any;\n  controlBar?: any;\n  bigPlayButton?: any;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/MediaPlayer.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-media-player\n * @public\n */\n@customElement({\n  tag: \"udex-media-player\",\n  renderer: litRender,\n  styles: MediaPlayerCss,\n  template: MediaPlayerTemplate,\n  dependencies: [UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],\n})\n/**\n * Fires when video is played\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoStart\")\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoPause\")\n/**\n * Fires when video is watched\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoComplete\")\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoReady\")\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoProgress\")\n/**\n * Fires when 25% of video is watched\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"video25\")\n/**\n * Fires when 50% of video is watched\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"video50\")\n/**\n * Fires when 75% of video is watched\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"video75\")\nclass UDExMediaPlayer extends UI5Element {\n  /**\n   * Defines the options object of video.js element\n   * accepts following properties: https://videojs.com/guides/options\n   *\n   * @public\n   */\n  @property({ type: String })\n    options!: string;\n  /**\n   * Defines the source of the video  or audio\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    source!: string;\n  /**\n   * Defines the video/audio type (examples: \"video/mp4\" for mp4, \"application/x-mpegURL\" for m3u8, \"audio/mp3\" for mp3) more information https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\n   *\n   * @default \"video/mp4\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"video/mp4\" })\n    type!: string;\n  /**\n   * Defines a title for youtube video\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    title!: string;\n  /**\n   * Defines if only audio should be played\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    audioOnly!: boolean;\n  /**\n   * Defines the poster url\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    poster!: string;\n  /**\n  * Placeholder for all html `track` elements to provide video subtitles.\n  * Example: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`\n  * More information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\n  *\n  * @slot\n  * @public\n  */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    caption!: Array<HTMLElement>;\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    width!: string;\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    height!: string;\n  /**\n   * Defines id of html element that videojs will be initialized with\n   *\n   * @default \"udex-media-player\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"udex-media-player\" })\n    playerid!: string;\n  /**\n   * Defines aspect ratio of video. If set, video will be display in fluid mode.\n   * Possible values: \"16:9\" , \"9:16\", \"4:3\", \"1:1\", \"none\"\n  *\n  * @default \"16:9\"\n  * @public\n  */\n  @property({ type: AspectRatio, defaultValue: \"16:9\" })\n    aspectRatio!: `${AspectRatio}`;\n  /**\n   * If this property is set, whenever user will focus on udex-media-player element, focus will be redirected into Big Play Button element.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: Boolean })\n    playButtonInitialFocus!: boolean;\n  /**\n   * Enable videojs instance to be added to global window object\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: Boolean })\n    enableGlobalDependency!: boolean;\n  /**\n  * @private\n  */\n  @property({ type: Boolean })\n    _allowIframeLoad!: boolean;\n\n  player!: VideoJSPlayer;\n  video25!: boolean;\n  video50!: boolean;\n  video75!: boolean;\n  videoCompleted!: boolean;\n  videoStart!: boolean;\n  videoReady!: boolean;\n  videoProgress!: number;\n\n  getPlayedTime = (target: EventTarget): number => {\n    const progressControl: SeekBar = (target as any)?.player.controlBar?.ProgressControl?.childNameIndex_.seekBar;\n    if (!progressControl) {\n      return 0;\n    }\n\n    return Math.round(progressControl.getPercent() * 100);\n  };\n\n  calculateVideoProgress(timeWatched: number) {\n    if (timeWatched >= 25 && !this.video25) {\n      this.fireEvent(\"video25\");\n      this.video25 = true;\n    }\n\n    if (timeWatched >= 50 && !this.video50) {\n      this.fireEvent(\"video50\");\n      this.video50 = true;\n    }\n\n    if (timeWatched >= 75 && !this.video75) {\n      this.fireEvent(\"video75\");\n      this.video75 = true;\n    }\n\n    this.fireEvent(\"videoProgress\", { progress: timeWatched });\n  }\n\n  checkCaptionsAvailability(player: VideoJSPlayer) {\n    player.on(\"loadedmetadata\", () => {\n      if (!player?.textTracks) { return; }\n\n      const tracks = player?.textTracks();\n      let captionsAvailable = false;\n      for (let i = 0; i < tracks.length; i++) {\n        if (tracks[i].kind === \"captions\" || tracks[i].kind === \"subtitles\") {\n          captionsAvailable = true;\n        }\n      }\n\n      if (!captionsAvailable && !this._tracks.length) {\n        player.controlBar?.removeChild(\"SubsCapsButton\");\n      }\n    });\n  }\n\n  applyScrollIntoTheView() {\n    const bigPlayButton = this.player.bigPlayButton?.el();\n    bigPlayButton.addEventListener(\"focus\", () => {\n      this.player.el().scrollIntoView({\n        behavior: \"smooth\",\n        block: \"center\",\n      });\n    });\n  }\n\n  attachListeners(player: Player) {\n    player.on(\"timeupdate\", (e: Event) => {\n      if (!e.target) {\n        return;\n      }\n\n      const timeWatched = this.getPlayedTime(e.target);\n      if (timeWatched >= 0) {\n        this.calculateVideoProgress(timeWatched);\n      }\n    });\n\n    player.on(\"play\", () => {\n      this.fireEvent(\"videoStart\");\n    });\n\n    player.on(\"ended\", () => {\n      this.fireEvent(\"videoComplete\");\n    });\n\n    player.on(\"pause\", () => {\n      this.fireEvent(\"videoPause\");\n    });\n\n    player.on(\"ready\", () => {\n      this.checkCaptionsAvailability(player);\n      this.applyScrollIntoTheView();\n      this.fireEvent(\"videoReady\");\n    });\n\n    if (this.playButtonInitialFocus) {\n      this.addEventListener(\"focus\", () => {\n        (async () => {\n          await player.getChild(\"BigPlayButton\")?.el_.focus();\n        })();\n      });\n    }\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null {\n    if (this._youtubeSrc) {\n      const player = this.shadowRoot?.querySelector(\"udex-media-player-youtube\") as UDExMediaPlayerYoutube;\n      return player?.getPlayer() || null;\n    }\n    if (this._vimeoSrc) {\n      const player = this.shadowRoot?.querySelector(\"udex-media-player-vimeo\") as UDExMediaPlayerVimeo;\n      return player?.getPlayer() || null;\n    }\n    return this.shadowRoot?.querySelector(\".video-js video\") as HTMLVideoElement || this.shadowRoot?.querySelector(\".video-js audio\") || null;\n  }\n\n  get optionsValue() {\n    const baseOptions = {\n      playbackRates: [1, 1.5, 2],\n      controls: true,\n      audioOnly: this.audioOnly,\n      poster: this.poster,\n      controlBar: {\n        children: [\n          \"PlayToggle\",\n          \"VolumePanel\",\n          \"ProgressControl\",\n          \"RemainingTimeDisplay\",\n          \"SubsCapsButton\",\n          \"PlaybackRateMenuButton\",\n          \"FullscreenToggle\",\n          \"MediaLoader\",\n        ],\n      },\n      userActions: {\n        hotkeys: true,\n      },\n    };\n\n    if (typeof this.options === \"string\") {\n      return this.options ? {\n        ...baseOptions,\n        ...JSON.parse(this.options),\n      } : baseOptions;\n    }\n\n    return this.options;\n  }\n\n  get dataSetup() {\n    return JSON.stringify(this.optionsValue);\n  }\n\n  async setupLanguage(language: string) {\n    try {\n      return await import(`video.js/dist/lang/${language}.json`);\n    } catch (err) {\n      console.warn(\"Cannot load language file\", err);\n    }\n  }\n\n  onAfterRendering(): void {\n    if (this._youtubeSrc || this._vimeoSrc) {\n      return;\n    }\n\n    import(\"video.js\").then(async ({ \"default\": videojs }) => {\n      if (this.enableGlobalDependency) {\n        window.videojs = videojs;\n      }\n      const language: string = this.optionsValue?.language;\n      if (language) {\n        videojs.addLanguage(language, await this.setupLanguage(language));\n      }\n\n      this.player = videojs(this.shadowRoot?.querySelector(\".video-js\") || \"\");\n      this.attachListeners(this.player);\n\n      if (this.audioOnly) { return; }\n\n      const backgroundOpacityElement = this.shadowRoot?.querySelector<HTMLOptionElement>(\".vjs-bg-opacity > select > option[value=\\\"0.5\\\"]\");\n      if (backgroundOpacityElement) {\n        backgroundOpacityElement.value = \"0.7\";\n        backgroundOpacityElement.selected = true;\n      }\n\n      const fontSizeElement = this.shadowRoot?.querySelector<HTMLOptionElement>(\".vjs-font-percent > select > option[value=\\\"1.00\\\"]\");\n      if (fontSizeElement) { fontSizeElement.value = \"1.2245\"; }\n\n      const playbackSpeed = this.shadowRoot?.querySelector<HTMLOptionElement>(\".vjs-playback-rate .vjs-playback-rate-value\");\n      playbackSpeed?.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  handleEmbedPlay() {\n    this._allowIframeLoad = true;\n  }\n\n  handleEmbedVideoReady() {\n    this.fireEvent(\"videoReady\");\n  }\n\n  handleEmbedVideoPlaying = (embedEvent: CustomEvent) => {\n    if (!this.videoStart) {\n      this.fireEvent(\"videoStart\");\n      this.videoStart = true;\n    }\n    const playedTime = Math.round(embedEvent.detail.percentPlayed as number);\n    this.calculateVideoProgress(playedTime);\n  };\n\n  handleEmbedVideoEnded() {\n    this.fireEvent(\"videoComplete\");\n  }\n\n  handleEmbedVideoPause() {\n    this.fireEvent(\"videoPause\");\n  }\n\n  get _iframePosterPreload() {\n    const shouldBlockIframe = this._iframeLoad && this.poster;\n    if (this._allowIframeLoad) {\n      return false;\n    }\n    if (!shouldBlockIframe) {\n      this._allowIframeLoad = true;\n    }\n    return shouldBlockIframe;\n  }\n\n  get _iframeLoad() {\n    return this._youtubeSrc || this._vimeoSrc;\n  }\n\n  get _tracks() {\n    return this.getSlottedNodes(\"caption\");\n  }\n\n  get _vimeoSrc() {\n    return this.source.includes(\"vimeo\");\n  }\n\n  get _youtubeSrc() {\n    return this.source.includes(\"youtube\");\n  }\n\n  get aspectRatioClass() {\n    switch (this.aspectRatio) {\n    case AspectRatio[\"16:9\"]:\n      return \"vjs-16-9 udex-media-player__fluid vjs-fluid\";\n    case AspectRatio[\"9:16\"]:\n      return \"vjs-9-16 udex-media-player__fluid vjs-fluid\";\n    case AspectRatio[\"4:3\"]:\n      return \"vjs-4-3 udex-media-player__fluid vjs-fluid\";\n    case AspectRatio[\"1:1\"]:\n      return \"vjs-1-1 udex-media-player__fluid vjs-fluid\";\n    default:\n      return \"\";\n    }\n  }\n\n  get embedVideoFluidClass() {\n    if (this.aspectRatio === AspectRatio[\"16:9\"] || this.aspectRatio === AspectRatio[\"9:16\"] || this.aspectRatio === AspectRatio[\"4:3\"] || this.aspectRatio === AspectRatio[\"1:1\"]) {\n      return true;\n    }\n    return false;\n  }\n\n  get playerElementId(): string {\n    return this.playerid || \"udex-media-player\";\n  }\n\n  onExitDOM(): void {\n    if (this.player) {\n      this.player.dispose();\n    }\n  }\n}\n\nUDExMediaPlayer.define();\n\nexport default UDExMediaPlayer;\n"]}

package/dist/MediaPlayerVimeo.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="vimeo__player" />
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Player from "@vimeo/player";
+export type VimeoPlayer = Player;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-media-player-vimeo</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MediaPlayerVimeo.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMediaPlayerVimeo extends UI5Element {
+    /**
+   * Defines the source of the video  or audio
+   *
+   * @default ""
+   * @public
+   */
+    source: string;
+    /**
+     * Defines a title for youtube video
+     *
+     * @default ""
+     * @public
+     */
+    title: string;
+    /**
+   * Defines video width. Used for YouTube and Vimeo videos only.
+   * Regular video and audio sizes are control by CSS variables.
+   *
+   * @default ""
+   * @public
+   */
+    width: string;
+    /**
+     * Defines video height. Used for YouTube and Vimeo videos only.
+     * Regular video and audio sizes are control by CSS variables.
+     *
+     * @default ""
+     * @public
+     */
+    height: string;
+    /**
+     * CSS class name for iframe fluid styles
+     *
+     * @default ""
+     * @public
+     */
+    aspectRatioClass: string;
+    /**
+    * Defines if video should be displayed in fluid mode.
+    * In fluid mode, width and height will be ignored and size will be adjusted to the container.
+    *
+    * @default false
+    * @public
+    */
+    fluidMode: boolean;
+    player: Player;
+    setupPlayer: () => void;
+    onEnterDOM(): void;
+    /**
+     * Returns video element
+     * @public
+     */
+    getPlayer(): VimeoPlayer;
+    get fluidModeClass(): "" | "video-js udex-media-player__fluid";
+}
+export default UDExMediaPlayerVimeo;

package/dist/MediaPlayerVimeo.js

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Player from "@vimeo/player";
+import MediaPlayerVimeoTemplate from "./generated/templates/MediaPlayerVimeoTemplate.lit.js";
+// Styles
+import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-media-player-vimeo</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MediaPlayerVimeo.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMediaPlayerVimeo = class UDExMediaPlayerVimeo extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this.setupPlayer = () => {
+            const iframe = this.shadowRoot?.querySelector("iframe");
+            if (!iframe) {
+                return;
+            }
+            this.player = new Player(iframe);
+            this.player.on("timeupdate", e => {
+                this.fireEvent("playing", { percentPlayed: e.percent * 100 });
+            });
+            this.player.on("pause", () => {
+                this.fireEvent("pause");
+            });
+            this.player.on("ended", () => {
+                this.fireEvent("ended");
+            });
+            this.player.on("loaded", () => {
+                this.fireEvent("ready");
+            });
+        };
+    }
+    onEnterDOM() {
+        this.setupPlayer();
+    }
+    /**
+     * Returns video element
+     * @public
+     */
+    getPlayer() {
+        return this.player;
+    }
+    get fluidModeClass() {
+        if (this.fluidMode) {
+            return "video-js udex-media-player__fluid";
+        }
+        return "";
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerVimeo.prototype, "source", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerVimeo.prototype, "title", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerVimeo.prototype, "width", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerVimeo.prototype, "height", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerVimeo.prototype, "aspectRatioClass", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMediaPlayerVimeo.prototype, "fluidMode", void 0);
+UDExMediaPlayerVimeo = __decorate([
+    customElement({
+        tag: "udex-media-player-vimeo",
+        renderer: litRender,
+        styles: [MediaPlayerCss],
+        template: MediaPlayerVimeoTemplate,
+        dependencies: [],
+    })
+    /**
+     * Fires when video is ready
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("ready")
+    /**
+     * Fires when video play ended
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("ended")
+    /**
+     * Fires when video is paused
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("pause")
+    /**
+     * Fires when video watching progress changed
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("playing", {
+        detail: {
+            percentPlayed: { type: Number },
+        },
+    })
+], UDExMediaPlayerVimeo);
+UDExMediaPlayerVimeo.define();
+export default UDExMediaPlayerVimeo;
+//# sourceMappingURL=MediaPlayerVimeo.js.map

package/dist/MediaPlayerVimeo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlayerVimeo.js","sourceRoot":"","sources":["../src/MediaPlayerVimeo.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Player from \"@vimeo/player\";\nimport MediaPlayerVimeoTemplate from \"./generated/templates/MediaPlayerVimeoTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\n\nexport type VimeoPlayer = Player;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player-vimeo</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/MediaPlayerVimeo.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-media-player-vimeo\",\n  renderer: litRender,\n  styles: [MediaPlayerCss],\n  template: MediaPlayerVimeoTemplate,\n  dependencies: [],\n})\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ready\")\n/**\n * Fires when video play ended\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ended\")\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"pause\")\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"playing\", {\n  detail: {\n    percentPlayed: { type: Number },\n  },\n})\nclass UDExMediaPlayerVimeo extends UI5Element {\n  /**\n * Defines the source of the video  or audio\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    source!: string;\n  /**\n   * Defines a title for youtube video\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    title!: string;\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    width!: string;\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    height!: string;\n  /**\n   * CSS class name for iframe fluid styles\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    aspectRatioClass!: string;\n  /**\n  * Defines if video should be displayed in fluid mode.\n  * In fluid mode, width and height will be ignored and size will be adjusted to the container.\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    fluidMode!: boolean;\n\n  player!: Player;\n\n  setupPlayer = () => {\n    const iframe = this.shadowRoot?.querySelector(\"iframe\");\n    if (!iframe) {\n      return;\n    }\n    this.player = new Player(iframe);\n\n    this.player.on(\"timeupdate\", e => {\n      this.fireEvent(\"playing\", { percentPlayed: e.percent * 100 });\n    });\n\n    this.player.on(\"pause\", () => {\n      this.fireEvent(\"pause\");\n    });\n\n    this.player.on(\"ended\", () => {\n      this.fireEvent(\"ended\");\n    });\n\n    this.player.on(\"loaded\", () => {\n      this.fireEvent(\"ready\");\n    });\n  };\n\n  onEnterDOM(): void {\n    this.setupPlayer();\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): VimeoPlayer {\n    return this.player;\n  }\n\n  get fluidModeClass() {\n    if (this.fluidMode) {\n      return \"video-js udex-media-player__fluid\";\n    }\n    return \"\";\n  }\n}\n\nUDExMediaPlayerVimeo.define();\n\nexport default UDExMediaPlayerVimeo;\n"]}

package/dist/MediaPlayerYoutube.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="youtube" />
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { AspectRatio } from "./MediaPlayer.js";
+declare global {
+    interface Window {
+        onYouTubeIframeAPIReady: () => void;
+    }
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-media-player-youtube</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MediaPlayerYoutube.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMediaPlayerYoutube extends UI5Element {
+    /**
+   * Defines the source of the video  or audio
+   *
+   * @default ""
+   * @public
+   */
+    source: string;
+    /**
+   * Defines video width. Used for YouTube and Vimeo videos only.
+   * Regular video and audio sizes are control by CSS variables.
+   *
+   * @default ""
+   * @public
+   */
+    width: string;
+    /**
+     * Defines video height. Used for YouTube and Vimeo videos only.
+     * Regular video and audio sizes are control by CSS variables.
+     *
+     * @default ""
+     * @public
+     */
+    height: string;
+    /**
+     * Defines aspect ratio of video. If set, video will be display in fluid mode.
+     * Possible values: "16:9" , "9:16", "4:3", "1:1", "none"
+    *
+    * @default "16:9"
+    * @public
+    */
+    aspectRatio: `${AspectRatio}`;
+    /**
+    * Defines if video should be displayed in fluid mode.
+    * In fluid mode, width and height will be ignored and size will be adjusted to the container.
+    *
+    * @default false
+    * @public
+    */
+    fluidMode: boolean;
+    private youtubePlayer;
+    private checkInterval?;
+    private videoDuration;
+    get videoId(): string;
+    get url(): URL;
+    get autoplay(): number | undefined;
+    get muted(): number | undefined;
+    get playsinline(): number | undefined;
+    setupYoutubeAPI: () => void;
+    onYouTubeIframeAPIReady: () => void;
+    private onPlayerReady;
+    private onPlayerStateChange;
+    private checkVideoProgress;
+    parseTimeParam(url: any, pattern: RegExp): number | undefined;
+    parseTimeString(stamp: string): number;
+    parseStartTime(url: string): number | undefined;
+    parseEndTime(url: string): number | undefined;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    /**
+     * Returns video element
+     * @public
+     */
+    getPlayer(): YT.Player | null;
+    get fluidModeClass(): "" | "udex-media-player__fluid";
+}
+export default UDExMediaPlayerYoutube;

package/dist/MediaPlayerYoutube.js

@@ -0,0 +1,256 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
+// Styles
+import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
+import MediaPlayerCss from "./generated/themes/MediaPlayer.css";
+import { AspectRatio } from "./MediaPlayer.js";
+const MATCH_NOCOOKIE = /youtube-nocookie\.com/;
+const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
+const NOCOOKIE_HOST = "https://www.youtube-nocookie.com";
+const SDK_URL = "https://www.youtube.com/iframe_api";
+const SDK_GLOBAL_READY = "onYouTubeIframeAPIReady";
+const CHECK_INTERVAL_TIME = 1000;
+const MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/;
+const MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;
+const MATCH_START_STAMP = /(\d+)(h|m|s)/g;
+const MATCH_NUMERIC = /^\d+$/;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-media-player-youtube</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MediaPlayerYoutube.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this.videoDuration = 0;
+        this.setupYoutubeAPI = () => {
+            if (!window.YT) { // Only load script if YT is not already loaded
+                const tag = document.createElement("script");
+                tag.src = SDK_URL;
+                const firstScriptTag = document.getElementsByTagName("script")[0];
+                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+            }
+            window[SDK_GLOBAL_READY] = () => this.onYouTubeIframeAPIReady();
+            // If YouTube IFrame API is already loaded, directly initialize the player
+            if (window.YT && window.YT.Player) {
+                this.onYouTubeIframeAPIReady();
+            }
+        };
+        this.onYouTubeIframeAPIReady = () => {
+            this.youtubePlayer = new YT.Player(this.shadowRoot?.querySelector("#player"), {
+                height: this.height,
+                width: this.width,
+                videoId: this.videoId,
+                playerVars: {
+                    autoplay: this.autoplay ? 1 : 0,
+                    mute: this.muted ? 1 : 0,
+                    playsinline: this.playsinline ? 1 : 0,
+                    origin: window.location.origin,
+                    start: this.parseStartTime(this.source),
+                    end: this.parseEndTime(this.source),
+                },
+                host: MATCH_NOCOOKIE.test(this.source) ? NOCOOKIE_HOST : undefined,
+                events: {
+                    "onReady": this.onPlayerReady,
+                    "onStateChange": this.onPlayerStateChange,
+                },
+            });
+        };
+        this.onPlayerReady = (ytevent) => {
+            this.videoDuration = ytevent.target.getDuration();
+            this.fireEvent("ready");
+        };
+        this.onPlayerStateChange = (ytevent) => {
+            const { data } = ytevent;
+            const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;
+            if (data === PLAYING && !this.checkInterval) {
+                this.checkInterval = window.setInterval(() => {
+                    this.checkVideoProgress();
+                }, CHECK_INTERVAL_TIME);
+            }
+            else if (data !== PLAYING && this.checkInterval) {
+                clearInterval(this.checkInterval);
+                this.checkInterval = undefined;
+            }
+            if (data === ENDED) {
+                this.fireEvent("ended", ytevent);
+            }
+            if (data === PAUSED) {
+                this.fireEvent("pause", ytevent);
+            }
+        };
+    }
+    get videoId() {
+        if (!this.source) {
+            return "";
+        }
+        const urlMatch = this.source.match(MATCH_URL_YOUTUBE);
+        return urlMatch ? urlMatch[1] : "";
+    }
+    get url() {
+        return new URL(this.source);
+    }
+    get autoplay() {
+        const param = this.url.searchParams.get("autoplay");
+        return param ? parseInt(param) : undefined;
+    }
+    get muted() {
+        const param = this.url.searchParams.get("mute");
+        return param ? parseInt(param) : undefined;
+    }
+    get playsinline() {
+        const param = this.url.searchParams.get("playsinline");
+        return param ? parseInt(param) : undefined;
+    }
+    checkVideoProgress() {
+        const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
+        const percentageWatched = (currentTime / this.videoDuration) * 100;
+        this.fireEvent("playing", { percentPlayed: percentageWatched });
+    }
+    parseTimeParam(url, pattern) {
+        if (url instanceof Array) {
+            return undefined;
+        }
+        const match = url.match(pattern);
+        if (match) {
+            const stamp = match[1];
+            if (stamp.match(MATCH_START_STAMP)) {
+                return this.parseTimeString(stamp);
+            }
+            if (MATCH_NUMERIC.test(stamp)) {
+                return parseInt(stamp);
+            }
+        }
+        return undefined;
+    }
+    parseTimeString(stamp) {
+        let seconds = 0;
+        let array = MATCH_START_STAMP.exec(stamp);
+        while (array !== null) {
+            const [, count, period] = array;
+            if (period === "h") {
+                seconds += parseInt(count) * 60 * 60;
+            }
+            if (period === "m") {
+                seconds += parseInt(count) * 60;
+            }
+            if (period === "s") {
+                seconds += parseInt(count);
+            }
+            array = MATCH_START_STAMP.exec(stamp);
+        }
+        return seconds;
+    }
+    parseStartTime(url) {
+        return this.parseTimeParam(url, MATCH_START_QUERY);
+    }
+    parseEndTime(url) {
+        return this.parseTimeParam(url, MATCH_END_QUERY);
+    }
+    onEnterDOM() {
+        this.setupYoutubeAPI();
+    }
+    onExitDOM() {
+        if (this.checkInterval) {
+            clearInterval(this.checkInterval);
+            this.checkInterval = undefined;
+        }
+    }
+    /**
+     * Returns video element
+     * @public
+     */
+    getPlayer() {
+        return this.youtubePlayer || null;
+    }
+    get fluidModeClass() {
+        if (this.fluidMode) {
+            return "udex-media-player__fluid";
+        }
+        return "";
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerYoutube.prototype, "source", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerYoutube.prototype, "width", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMediaPlayerYoutube.prototype, "height", void 0);
+__decorate([
+    property({ type: AspectRatio, defaultValue: "16:9" })
+], UDExMediaPlayerYoutube.prototype, "aspectRatio", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMediaPlayerYoutube.prototype, "fluidMode", void 0);
+UDExMediaPlayerYoutube = __decorate([
+    customElement({
+        tag: "udex-media-player-youtube",
+        renderer: litRender,
+        styles: [MediaPlayerCss, MediaPlayerYoutubeCss],
+        template: MediaPlayerYoutubeTemplate,
+    })
+    /**
+     * Fires when video is ready
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("ready")
+    /**
+     * Fires when video play ended
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("ended")
+    /**
+     * Fires when video is paused
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("pause")
+    /**
+     * Fires when video watching progress changed
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("playing", {
+        detail: {
+            percentPlayed: { type: Number },
+        },
+    })
+], UDExMediaPlayerYoutube);
+UDExMediaPlayerYoutube.define();
+export default UDExMediaPlayerYoutube;
+//# sourceMappingURL=MediaPlayerYoutube.js.map