@sapudex/web-components 0.225.0 → 2.0.0

package/src/MediaPlayer.ts

@@ -3,22 +3,21 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/v5/play.svg";
-import Player from "video.js/dist/types/player.js";
-import type SeekBar from "video.js/dist/types/control-bar/progress-control/seek-bar";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
-import UDExMediaPlayerVimeo, { VimeoPlayer } from "./MediaPlayerVimeo.js";
+import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
+import UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
 
 // Template
 import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.js";
 
 // Styles
-import MediaPlayerCss from "./generated/themes/MediaPlayer.css";
+import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
 declare global {
   interface Window {
@@ -26,7 +25,7 @@ declare global {
   }
 }
 
-export enum AspectRatio {
+export enum UDExAspectRatio {
   "16:9" = "16:9",
   "9:16" = "9:16",
   "4:3" = "4:3",
@@ -34,11 +33,8 @@ export enum AspectRatio {
   "none" = "none",
 }
 
-export interface VideoJSPlayer extends Player{
-  qualityLevels?: () => any;
-  textTracks?: () => any;
-  controlBar?: any;
-  bigPlayButton?: any;
+type UDExMediaPlayerVideoProgressEventDetail = {
+  progress: number,
 }
 
 /**
@@ -80,50 +76,60 @@ export interface VideoJSPlayer extends Player{
  * @allowPreventDefault
  * @public
  */
-@event("videoPause")
+@event("videoPause", { bubbles: true })
 /**
  * Fires when video is watched
  *
  * @allowPreventDefault
  * @public
  */
-@event("videoComplete")
+@event("videoComplete", { bubbles: true })
 /**
  * Fires when video is ready
  *
  * @allowPreventDefault
  * @public
  */
-@event("videoReady")
+@event("videoReady", { bubbles: true })
 /**
  * Fires when video watching progress changed
  *
  * @allowPreventDefault
  * @public
  */
-@event("videoProgress")
+@event("videoProgress", { bubbles: true })
 /**
  * Fires when 25% of video is watched
  *
  * @allowPreventDefault
  * @public
  */
-@event("video25")
+@event("video25", { bubbles: true })
 /**
  * Fires when 50% of video is watched
  *
  * @allowPreventDefault
  * @public
  */
-@event("video50")
+@event("video50", { bubbles: true })
 /**
  * Fires when 75% of video is watched
  *
  * @allowPreventDefault
  * @public
  */
-@event("video75")
+@event("video75", { bubbles: true })
 class UDExMediaPlayer extends UI5Element {
+  eventDetails!: {
+    "videoStart": void,
+    "videoPause": void,
+    "videoComplete": void,
+    "videoReady": void,
+    "videoProgress": UDExMediaPlayerVideoProgressEventDetail,
+    "video25": void,
+    "video50": void,
+    "video75": void,
+  };
   /**
    * Defines the options object of video.js element
    * accepts following properties: https://videojs.com/guides/options
@@ -138,24 +144,24 @@ class UDExMediaPlayer extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    source!: string;
+  @property({ type: String })
+    source: string = "";
   /**
    * 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
    *
    * @default "video/mp4"
    * @public
    */
-  @property({ type: String, defaultValue: "video/mp4" })
-    type!: string;
+  @property({ type: String })
+    type: string = "video/mp4";
   /**
    * Defines a title for youtube video
    *
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    title!: string;
+  @property({ type: String })
+    title: string = "";
   /**
    * Defines if only audio should be played
    *
@@ -170,8 +176,8 @@ class UDExMediaPlayer extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    poster!: string;
+  @property({ type: String })
+    poster: string = "";
   /**
   * Placeholder for all html `track` elements to provide video subtitles.
   * Example: `<track kind='captions' src='./videoSubtitles.vtt' srclang='en' label='English' default />`
@@ -189,8 +195,8 @@ class UDExMediaPlayer extends UI5Element {
  * @default ""
  * @public
  */
-  @property({ type: String, defaultValue: "" })
-    width!: string;
+  @property({ type: String })
+    width: string = "";
   /**
    * Defines video height. Used for YouTube and Vimeo videos only.
    * Regular video and audio sizes are control by CSS variables.
@@ -198,16 +204,16 @@ class UDExMediaPlayer extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    height!: string;
+  @property({ type: String })
+    height: string = "";
   /**
    * Defines id of html element that videojs will be initialized with
    *
    * @default "udex-media-player"
    * @public
    */
-  @property({ type: String, defaultValue: "udex-media-player" })
-    playerid!: string;
+  @property({ type: String })
+    playerid: string = "udex-media-player";
   /**
    * 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"
@@ -215,8 +221,8 @@ class UDExMediaPlayer extends UI5Element {
   * @default "16:9"
   * @public
   */
-  @property({ type: AspectRatio, defaultValue: "16:9" })
-    aspectRatio!: `${AspectRatio}`;
+  @property()
+    aspectRatio: `${UDExAspectRatio}` = "16:9";
   /**
    * If this property is set, whenever user will focus on udex-media-player element, focus will be redirected into Big Play Button element.
    *
@@ -239,7 +245,7 @@ class UDExMediaPlayer extends UI5Element {
   @property({ type: Boolean })
     _allowIframeLoad!: boolean;
 
-  player!: VideoJSPlayer;
+  player!: any;
   video25!: boolean;
   video50!: boolean;
   video75!: boolean;
@@ -249,7 +255,7 @@ class UDExMediaPlayer extends UI5Element {
   videoProgress!: number;
 
   getPlayedTime = (target: EventTarget): number => {
-    const progressControl: SeekBar = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
+    const progressControl = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
     if (!progressControl) {
       return 0;
     }
@@ -258,24 +264,24 @@ class UDExMediaPlayer extends UI5Element {
 
   calculateVideoProgress(timeWatched: number) {
     if (timeWatched >= 25 && !this.video25) {
-      this.fireEvent("video25");
+      this.fireDecoratorEvent("video25");
       this.video25 = true;
     }
 
     if (timeWatched >= 50 && !this.video50) {
-      this.fireEvent("video50");
+      this.fireDecoratorEvent("video50");
       this.video50 = true;
     }
 
     if (timeWatched >= 75 && !this.video75) {
-      this.fireEvent("video75");
+      this.fireDecoratorEvent("video75");
       this.video75 = true;
     }
 
-    this.fireEvent("videoProgress", { progress: timeWatched });
+    this.fireDecoratorEvent("videoProgress", { progress: timeWatched });
   }
 
-  checkCaptionsAvailability(player: VideoJSPlayer) {
+  checkCaptionsAvailability(player: any) {
     player.on("loadedmetadata", () => {
       if (!player?.textTracks) { return; }
 
@@ -303,7 +309,7 @@ class UDExMediaPlayer extends UI5Element {
     });
   }
 
-  attachListeners(player: Player) {
+  attachListeners(player: any) {
     player.on("timeupdate", (e: Event) => {
       if (!e.target) {
         return;
@@ -316,21 +322,21 @@ class UDExMediaPlayer extends UI5Element {
     });
 
     player.on("play", () => {
-      this.fireEvent("videoStart");
+      this.fireDecoratorEvent("videoStart");
     });
 
     player.on("ended", () => {
-      this.fireEvent("videoComplete");
+      this.fireDecoratorEvent("videoComplete");
     });
 
     player.on("pause", () => {
-      this.fireEvent("videoPause");
+      this.fireDecoratorEvent("videoPause");
     });
 
     player.on("ready", () => {
       this.checkCaptionsAvailability(player);
       this.applyScrollIntoTheView();
-      this.fireEvent("videoReady");
+      this.fireDecoratorEvent("videoReady");
     });
 
     if (this.playButtonInitialFocus) {
@@ -358,7 +364,7 @@ class UDExMediaPlayer extends UI5Element {
     return this.shadowRoot?.querySelector(".video-js video") as HTMLVideoElement || this.shadowRoot?.querySelector(".video-js audio") || null;
   }
 
-  setupHotkeys(e: KeyboardEvent, player: VideoJSPlayer) {
+  setupHotkeys(e: KeyboardEvent, player: any) {
     // Back to start
     if (e.key === "0") {
       e.preventDefault();
@@ -405,7 +411,7 @@ class UDExMediaPlayer extends UI5Element {
       e.preventDefault();
       e.stopPropagation();
       const playbackRatesOptions: Array<number> = player.options_.playbackRates;
-      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() as number ?? 1);
       if (currentRateIndex < playbackRatesOptions.length - 1) {
         const newPlaybackRate = currentRateIndex + 1;
         player.playbackRate(playbackRatesOptions[newPlaybackRate]);
@@ -418,7 +424,7 @@ class UDExMediaPlayer extends UI5Element {
       e.preventDefault();
       e.stopPropagation();
       const playbackRatesOptions: Array<number> = player.options_.playbackRates;
-      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() as number ?? 1);
       if (currentRateIndex > 0) {
         const newPlaybackRate = currentRateIndex - 1;
         player.playbackRate(playbackRatesOptions[newPlaybackRate]);
@@ -503,7 +509,9 @@ class UDExMediaPlayer extends UI5Element {
       return;
     }
 
-    import("video.js").then(async ({ "default": videojs }) => {
+    import("video.js").then(async (videojsModule: any) => {
+      const videojs = videojsModule.default;
+
       if (this.enableGlobalDependency) {
         window.videojs = videojs;
       }
@@ -542,12 +550,12 @@ class UDExMediaPlayer extends UI5Element {
   }
 
   handleEmbedVideoReady() {
-    this.fireEvent("videoReady");
+    this.fireDecoratorEvent("videoReady");
   }
 
   handleEmbedVideoPlaying = (embedEvent: CustomEvent) => {
     if (!this.videoStart) {
-      this.fireEvent("videoStart");
+      this.fireDecoratorEvent("videoStart");
       this.videoStart = true;
     }
     const playedTime = Math.round(embedEvent.detail.percentPlayed as number);
@@ -555,11 +563,11 @@ class UDExMediaPlayer extends UI5Element {
   };
 
   handleEmbedVideoEnded() {
-    this.fireEvent("videoComplete");
+    this.fireDecoratorEvent("videoComplete");
   }
 
   handleEmbedVideoPause() {
-    this.fireEvent("videoPause");
+    this.fireDecoratorEvent("videoPause");
   }
 
   get _iframePosterPreload() {
@@ -591,13 +599,13 @@ class UDExMediaPlayer extends UI5Element {
 
   get aspectRatioClass() {
     switch (this.aspectRatio) {
-    case AspectRatio["16:9"]:
+    case UDExAspectRatio["16:9"]:
       return "vjs-16-9 udex-media-player__fluid vjs-fluid";
-    case AspectRatio["9:16"]:
+    case UDExAspectRatio["9:16"]:
       return "vjs-9-16 udex-media-player__fluid vjs-fluid";
-    case AspectRatio["4:3"]:
+    case UDExAspectRatio["4:3"]:
       return "vjs-4-3 udex-media-player__fluid vjs-fluid";
-    case AspectRatio["1:1"]:
+    case UDExAspectRatio["1:1"]:
       return "vjs-1-1 udex-media-player__fluid vjs-fluid";
     default:
       return "";
@@ -605,7 +613,7 @@ class UDExMediaPlayer extends UI5Element {
   }
 
   get embedVideoFluidClass() {
-    if (this.aspectRatio === AspectRatio["16:9"] || this.aspectRatio === AspectRatio["9:16"] || this.aspectRatio === AspectRatio["4:3"] || this.aspectRatio === AspectRatio["1:1"]) {
+    if (this.aspectRatio === UDExAspectRatio["16:9"] || this.aspectRatio === UDExAspectRatio["9:16"] || this.aspectRatio === UDExAspectRatio["4:3"] || this.aspectRatio === UDExAspectRatio["1:1"]) {
       return true;
     }
     return false;

package/src/MediaPlayerVimeo.ts

@@ -1,7 +1,7 @@
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Player from "@vimeo/player";
 import MediaPlayerVimeoTemplate from "./generated/templates/MediaPlayerVimeoTemplate.lit.js";
@@ -11,6 +11,10 @@ import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
 export type VimeoPlayer = Player;
 
+type UDExMediaPLayerViemeoPlayingEventDetail = {
+  percentPlayed: number,
+}
+
 /**
  * @class
  *
@@ -41,49 +45,51 @@ export type VimeoPlayer = Player;
  * @allowPreventDefault
  * @public
  */
-@event("ready")
+@event("ready", { bubbles: true })
 /**
  * Fires when video play ended
  *
  * @allowPreventDefault
  * @public
  */
-@event("ended")
+@event("ended", { bubbles: true })
 /**
  * Fires when video is paused
  *
  * @allowPreventDefault
  * @public
  */
-@event("pause")
+@event("pause", { bubbles: true })
 /**
  * Fires when video watching progress changed
  *
  * @allowPreventDefault
  * @public
  */
-@event("playing", {
-  detail: {
-    percentPlayed: { type: Number },
-  },
-})
+@event("playing", { bubbles: true })
 class UDExMediaPlayerVimeo extends UI5Element {
+  eventDetails!: {
+    "ready": void,
+    "ended": void,
+    "pause": void,
+    "playing": UDExMediaPLayerViemeoPlayingEventDetail,
+  };
   /**
  * Defines the source of the video  or audio
  *
  * @default ""
  * @public
  */
-  @property({ type: String, defaultValue: "" })
-    source!: string;
+  @property({ type: String })
+    source: string = "";
   /**
    * Defines a title for youtube video
    *
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    title!: string;
+  @property({ type: String })
+    title: string = "";
   /**
  * Defines video width. Used for YouTube and Vimeo videos only.
  * Regular video and audio sizes are control by CSS variables.
@@ -91,8 +97,8 @@ class UDExMediaPlayerVimeo extends UI5Element {
  * @default ""
  * @public
  */
-  @property({ type: String, defaultValue: "" })
-    width!: string;
+  @property({ type: String })
+    width: string = "";
   /**
    * Defines video height. Used for YouTube and Vimeo videos only.
    * Regular video and audio sizes are control by CSS variables.
@@ -100,16 +106,16 @@ class UDExMediaPlayerVimeo extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    height!: string;
+  @property({ type: String })
+    height: string = "";
   /**
    * CSS class name for iframe fluid styles
    *
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    aspectRatioClass!: string;
+  @property({ type: String })
+    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.
@@ -130,19 +136,19 @@ class UDExMediaPlayerVimeo extends UI5Element {
     this.player = new Player(iframe);
 
     this.player.on("timeupdate", e => {
-      this.fireEvent("playing", { percentPlayed: e.percent * 100 });
+      this.fireDecoratorEvent("playing", { percentPlayed: e.percent * 100 });
     });
 
     this.player.on("pause", () => {
-      this.fireEvent("pause");
+      this.fireDecoratorEvent("pause");
     });
 
     this.player.on("ended", () => {
-      this.fireEvent("ended");
+      this.fireDecoratorEvent("ended");
     });
 
     this.player.on("loaded", () => {
-      this.fireEvent("ready");
+      this.fireDecoratorEvent("ready");
     });
   };
 

package/src/MediaPlayerYoutube.ts

@@ -1,15 +1,15 @@
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.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";
+import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
+import type { UDExAspectRatio } 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\//;
@@ -28,6 +28,14 @@ declare global {
   }
 }
 
+type UDExMediaPlayerYoutubePlayingEventDetail = {
+  percentPlayed: number,
+}
+
+type UDExMediaPlayerYoutubeBaseEventDetails = {
+  ytevent: YT.OnStateChangeEvent,
+}
+
 /**
  * @class
  *
@@ -57,41 +65,43 @@ declare global {
  * @allowPreventDefault
  * @public
  */
-@event("ready")
+@event("ready", { bubbles: true })
 /**
  * Fires when video play ended
  *
  * @allowPreventDefault
  * @public
  */
-@event("ended")
+@event("ended", { bubbles: true })
 /**
  * Fires when video is paused
  *
  * @allowPreventDefault
  * @public
  */
-@event("pause")
+@event("pause", { bubbles: true })
 /**
  * Fires when video watching progress changed
  *
  * @allowPreventDefault
  * @public
  */
-@event("playing", {
-  detail: {
-    percentPlayed: { type: Number },
-  },
-})
+@event("playing", { bubbles: true })
 class UDExMediaPlayerYoutube extends UI5Element {
+  eventDetails!: {
+    "ready": void,
+    "ended": UDExMediaPlayerYoutubeBaseEventDetails,
+    "pause": UDExMediaPlayerYoutubeBaseEventDetails,
+    "playing": UDExMediaPlayerYoutubePlayingEventDetail,
+  };
   /**
  * Defines the source of the video  or audio
  *
  * @default ""
  * @public
  */
-  @property({ type: String, defaultValue: "" })
-    source!: string;
+  @property({ type: String })
+    source: string = "";
   /**
  * Defines video width. Used for YouTube and Vimeo videos only.
  * Regular video and audio sizes are control by CSS variables.
@@ -99,8 +109,8 @@ class UDExMediaPlayerYoutube extends UI5Element {
  * @default ""
  * @public
  */
-  @property({ type: String, defaultValue: "" })
-    width!: string;
+  @property({ type: String })
+    width: string = "";
   /**
    * Defines video height. Used for YouTube and Vimeo videos only.
    * Regular video and audio sizes are control by CSS variables.
@@ -108,8 +118,8 @@ class UDExMediaPlayerYoutube extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    height!: string;
+  @property({ type: String })
+    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"
@@ -117,8 +127,8 @@ class UDExMediaPlayerYoutube extends UI5Element {
   * @default "16:9"
   * @public
   */
-  @property({ type: AspectRatio, defaultValue: "16:9" })
-    aspectRatio!: `${AspectRatio}`;
+  @property()
+    aspectRatio: `${UDExAspectRatio}` = "16:9";
   /**
   * 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.
@@ -199,7 +209,7 @@ class UDExMediaPlayerYoutube extends UI5Element {
 
   private onPlayerReady = (ytevent: YT.PlayerEvent): void => {
     this.videoDuration = ytevent.target.getDuration();
-    this.fireEvent("ready");
+    this.fireDecoratorEvent("ready");
   };
 
   private onPlayerStateChange = (ytevent: YT.OnStateChangeEvent): void => {
@@ -216,18 +226,18 @@ class UDExMediaPlayerYoutube extends UI5Element {
     }
 
     if (data === ENDED) {
-      this.fireEvent("ended", ytevent);
+      this.fireDecoratorEvent("ended", { ytevent });
     }
 
     if (data === PAUSED) {
-      this.fireEvent("pause", ytevent);
+      this.fireDecoratorEvent("pause", { ytevent });
     }
   };
 
   private checkVideoProgress(): void {
     const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
     const percentageWatched = (currentTime / this.videoDuration) * 100;
-    this.fireEvent("playing", { percentPlayed: percentageWatched });
+    this.fireDecoratorEvent("playing", { percentPlayed: percentageWatched });
   }
 
   parseTimeParam(url: any, pattern: RegExp) {