feat(livestream): WEB-4088 custom livestream player with stats

packages/core/package.json

@@ -46,11 +46,12 @@
     "@floating-ui/dom": "^1.1.0",
     "@stencil/core": "2.20.0",
     "hark": "^1.2.3",
+    "hls.js": "^1.5.17",
     "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@dyteinternals/utils": "^1.7.10",
+    "@dyteinternals/utils": "^3.1.0",
     "@dytesdk/web-core": "staging",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",

packages/core/src/components.d.ts

@@ -3088,7 +3088,7 @@ export namespace Components {
         /**
           * Icon Pack
          */
-        "iconPack": { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; };
+        "iconPack": { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; };
         /**
           * Language
          */
@@ -8370,7 +8370,7 @@ declare namespace LocalJSX {
         /**
           * Icon Pack
          */
-        "iconPack"?: { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; };
+        "iconPack"?: { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; };
         /**
           * Tab change event
          */

packages/core/src/components/dyte-livestream-player/dyte-livestream-player.css

@@ -1,15 +1,11 @@
 @import '../../styles/reset.css';
 
 :host {
-  @apply bg-background-900 mx-2 flex h-full w-full rounded-md;
+  @apply bg-background-900 flex h-full max-h-full min-h-full w-full min-w-full max-w-full rounded-md;
 }
 
 .player-container {
-  @apply relative m-4 flex grow items-center justify-center overflow-hidden rounded-md;
-}
-
-.player {
-  @apply bg-background-1000 rounded-md left-0 h-full w-auto aspect-video z-20 border-[0px];;
+  @apply relative m-4 flex grow items-center justify-center rounded-md;
 }
 
 .loader {
@@ -21,13 +17,6 @@ p {
   @apply text-text-700 text-text-lg my-1;
 }
 
-.latency-controls {
-  @apply absolute bottom-4 right-4 z-20 flex flex-row items-center;
-}
-
-.sync-live-stream {
-  @apply text-text-sm bg-brand-500 cursor-pointer rounded-sm px-2 py-1;
-}
 
 .unmute-popup {
   @apply bg-background-800 absolute !z-30 flex w-72 flex-col rounded-md p-4 text-center;
@@ -38,4 +27,81 @@ p {
   p {
     @apply text-text-md my-3;
   }
+}
+
+.control-bar {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  height: auto;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px 0px 10px;
+  z-index: 10; /* Ensures the control bar is above the video */
+}
+
+.timings {
+  @apply text-text-on-brand;
+}
+
+.control-btn {
+  border: none;
+  @apply bg-brand-500 text-text-on-brand rounded-sm mr-2;
+  cursor: pointer;
+  font-size: 24px;
+  height: 30px;
+  width: 30px;
+}
+
+.fullscreen-btn {
+  margin-right: 20px;
+  height: 30px;
+}
+
+.control-btn:hover {
+  opacity: 0.8;
+}
+
+.control-btn:focus {
+  outline: none;
+}
+
+
+.control-groups{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+#livestream-video {
+  aspect-ratio: 16/9;
+  max-width: 100%;
+  min-width: 100%;
+  @apply rounded-md left-0 w-auto aspect-video z-20 border-[0px];;
+}
+
+
+.level-select {
+  @apply bg-brand-500 text-text-on-brand rounded-sm;
+  border: none;
+  padding: 5px 10px;
+  font-size: 14px;
+  height: 30px;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.level-select:focus {
+  outline: none;
+}
+
+.level-select option {
+  @apply bg-brand-500 text-text-on-brand rounded-sm;
+}
+
+.volume-control-holder{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }