Skip to content

Commit

Permalink
Merge pull request #35 from dyte-io/feat/WEB-4088-cf-viewer-with-stats
Browse files Browse the repository at this point in the history 
feat(livestream): WEB-4088 custom livestream player with stats
  • Loading branch information
@ravindra-dyte
ravindra-dyte authored Jan 3, 2025
2 parents b24d079 + 07f0e99 commit f4eb0a4
Show file tree
Hide file tree
Showing 11 changed files with 411 additions and 133 deletions.
19 changes: 13 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3092,7 +3092,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
*/
Expand Down Expand Up @@ -8378,7 +8378,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
*/
Expand Down
92 changes: 79 additions & 13 deletions packages/core/src/components/dyte-livestream-player/dyte-livestream-player.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
Loading

0 comments on commit f4eb0a4

Please sign in to comment.