@cloudflare/realtimekit-ui 1.0.4 → 1.0.5-staging.2

package/dist/cjs/rtk-livestream-indicator_3.cjs.entry.js

@@ -35672,7 +35672,7 @@ function formatSecondsToHHMMSS(seconds) {
         : `${mins}:${secs.toString().padStart(2, '0')}`;
 }
 
-const rtkLivestreamPlayerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;justify-content:space-between;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8)}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));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,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));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{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}";
+const rtkLivestreamPlayerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;max-height:100%;min-height:100%;width:100%;min-width:100%;max-width:100%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.player-container{position:relative;margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-4, 16px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-0, 0px);display:flex;flex-grow:1;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-md, 8px)}.loader{position:absolute;z-index:10;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));display:flex;flex-direction:column;align-items:center;justify-content:center}p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);font-size:16px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.unmute-popup{position:absolute;z-index:30 !important;display:flex;width:var(--rtk-space-72, 288px);flex-direction:column;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding:var(--rtk-space-4, 16px);text-align:center;max-width:70%}.unmute-popup h3{margin:var(--rtk-space-0, 0px);font-size:16px;font-weight:500}.unmute-popup p{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);font-size:14px}.control-bar{position:absolute;bottom:0;left:16px;right:16px;display:flex;height:auto;align-items:center;padding:12px 16px;z-index:30;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));border-radius:6px;border-radius:var(--rtk-border-radius-md, 8px);background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8);gap:12px}.timings{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.control-btn{border:none;margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));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;gap:12px;flex-shrink:0}#livestream-video,.livestream-video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:100% !important;min-height:100% !important;-o-object-fit:fill !important;object-fit:fill !important;z-index:10;border-radius:var(--rtk-border-radius-md, 8px);border-width:0px}:host:not(:fullscreen) .video-container{padding:16px 16px 0 16px}:host(:fullscreen) .video-container,:host(:-webkit-full-screen) .video-container,:host(:-moz-full-screen) .video-container{padding:0}.level-select{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));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{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.volume-control-holder{display:flex;justify-content:center;align-items:center}.seekbar-container{flex:1;min-width:100px;padding:0 12px;display:flex;align-items:center}.seekbar{width:100%;height:20px;cursor:pointer;display:flex;align-items:center}.seekbar-track{position:relative;width:100%;height:4px;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.seekbar-progress{position:absolute;top:0;left:0;height:100%;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));transition:width 0.1s ease}.seekbar-handle{position:absolute;top:50%;width:12px;height:12px;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));transform:translate(-50%, -50%);transition:left 0.1s ease;opacity:0}.seekbar:hover .seekbar-handle{opacity:1}.seekbar:hover .seekbar-track{height:6px}.seekbar:hover .seekbar-handle{width:14px;height:14px}";
 const RtkLivestreamPlayerStyle0 = rtkLivestreamPlayerCss;
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -35704,21 +35704,42 @@ const RtkLivestreamPlayer = class {
         this.currentTime = 0;
         this.duration = 0;
         this.hideControls = true;
+        this.isDragging = false;
+        this.seekPosition = 0;
+        this.isSeeking = false;
         this.hideControlsTimeout = null;
+        this.seekingTimeout = null;
         this.livestreamUpdateListener = (state) => {
             this.playbackUrl = this.meeting.livestream.playbackUrl;
             this.livestreamState = state;
         };
         this.updateProgress = () => {
-            this.currentTime = this.videoRef.currentTime;
+            // During seeking, avoid updating currentTime to prevent fluctuations
+            if (!this.isSeeking) {
+                this.currentTime = this.videoRef.currentTime;
+            }
         };
         this.updateHlsStatsPeriodically = () => {
-            var _a, _b;
-            // Total duration is where video is + the latency that is there
-            this.duration = (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.currentTime) || 0) + (((_b = this.hls) === null || _b === void 0 ? void 0 : _b.latency) || 0);
+            var _a, _b, _c;
+            // Use HLS seekable ranges to get actual duration instead of currentTime + latency
+            // This prevents duration from fluctuating when seeking
+            if (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.seekable) && this.videoRef.seekable.length > 0) {
+                this.duration = this.videoRef.seekable.end(this.videoRef.seekable.length - 1);
+            }
+            else {
+                // Fallback to currentTime + latency if seekable ranges aren't available
+                this.duration = (((_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.currentTime) || 0) + (((_c = this.hls) === null || _c === void 0 ? void 0 : _c.latency) || 0);
+            }
         };
         this.fastForwardToLatest = () => {
-            this.videoRef.currentTime = this.duration - 1; // Move to the latest time
+            var _a;
+            // Use seekable range for more accurate live edge positioning
+            if (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.seekable) && this.videoRef.seekable.length > 0) {
+                this.videoRef.currentTime = this.videoRef.seekable.end(this.videoRef.seekable.length - 1) - 1;
+            }
+            else {
+                this.videoRef.currentTime = this.duration - 1; // Fallback
+            }
         };
         this.togglePlay = () => {
             if (this.videoRef.paused) {
@@ -35751,6 +35772,74 @@ const RtkLivestreamPlayer = class {
                 this.hideControls = true;
             }, 5000);
         };
+        this.seekToPosition = (position) => {
+            if (!this.videoRef)
+                return;
+            // Clamp position to valid range
+            const clampedPosition = Math.max(0, Math.min(position, this.duration));
+            // Set seeking state to prevent currentTime fluctuations
+            this.isSeeking = true;
+            // Update currentTime immediately for UI feedback
+            this.currentTime = clampedPosition;
+            try {
+                this.videoRef.currentTime = clampedPosition;
+                // Clear any existing timeout
+                if (this.seekingTimeout) {
+                    clearTimeout(this.seekingTimeout);
+                }
+                // Reset seeking state after a short delay to allow video to stabilize
+                this.seekingTimeout = setTimeout(() => {
+                    this.isSeeking = false;
+                    // Update currentTime one final time to ensure accuracy
+                    this.currentTime = this.videoRef.currentTime;
+                }, 200);
+            }
+            catch (error) {
+                this.isSeeking = false;
+                this.meeting.__internals__.logger.warn('rtk-livestream-player:: Seek failed', { error });
+            }
+        };
+        this.onSeekbarMouseDown = (event) => {
+            event.preventDefault();
+            this.isDragging = true;
+            this.updateSeekPosition(event);
+            document.addEventListener('mousemove', this.onSeekbarMouseMove);
+            document.addEventListener('mouseup', this.onSeekbarMouseUp);
+        };
+        this.onSeekbarMouseMove = (event) => {
+            if (!this.isDragging)
+                return;
+            this.updateSeekPosition(event);
+        };
+        this.onSeekbarMouseUp = (event) => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.updateSeekPosition(event);
+            this.seekToPosition(this.seekPosition);
+            document.removeEventListener('mousemove', this.onSeekbarMouseMove);
+            document.removeEventListener('mouseup', this.onSeekbarMouseUp);
+        };
+        this.onSeekbarClick = (event) => {
+            if (this.isDragging)
+                return;
+            this.updateSeekPosition(event);
+            this.seekToPosition(this.seekPosition);
+        };
+        this.updateSeekPosition = (event) => {
+            const seekbar = event.currentTarget;
+            const rect = seekbar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progress = Math.max(0, Math.min(1, clickX / rect.width));
+            // Map progress to duration
+            this.seekPosition = progress * this.duration;
+        };
+        this.getSeekbarProgress = () => {
+            if (this.isDragging) {
+                return this.duration > 0 ? this.seekPosition / this.duration : 0;
+            }
+            return this.duration > 0 ? this.currentTime / this.duration : 0;
+        };
         this.getLoadingState = () => {
             let loadingMessage = '';
             let isLoading = false;
@@ -35820,7 +35909,7 @@ const RtkLivestreamPlayer = class {
                     });
                     window.rtk_hls = this.hls;
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Loading source`);
-                    this.hls.loadSource(this.playbackUrl);
+                    this.hls.loadSource(this.playbackUrl + '?dvrEnabled=true');
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Attaching video element to HLS`);
                     this.hls.attachMedia(this.videoRef);
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Waiting async for HLS manifest parsing`);
@@ -35838,7 +35927,7 @@ const RtkLivestreamPlayer = class {
                                 setTimeout(() => {
                                     if (this.playbackUrl && this.livestreamState === 'LIVESTREAMING') {
                                         this.meeting.__internals__.logger.info('rtk-livestream-player:: Retrying playbackUrl');
-                                        this.hls.loadSource(this.playbackUrl);
+                                        this.hls.loadSource(this.playbackUrl + '?dvrEnabled=true');
                                     }
                                 }, 5000);
                                 return;
@@ -35931,6 +36020,9 @@ const RtkLivestreamPlayer = class {
         this.meeting.livestream.removeListener('livestreamUpdate', this.livestreamUpdateListener);
         this.videoRef.removeEventListener('timeupdate', this.updateProgress);
         clearInterval(this.statsIntervalTimer);
+        if (this.seekingTimeout) {
+            clearTimeout(this.seekingTimeout);
+        }
         this.videoRef = null;
         if (this.hls) {
             this.hls.destroy();
@@ -35962,7 +36054,7 @@ const RtkLivestreamPlayer = class {
         // <!-- Control Bar -->
         index$1.h("div", { class: "control-bar" }, index$1.h("div", { class: "control-groups" }, index$1.h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === uiStore.PlayerState.PLAYING
                 ? this.iconPack.pause
-                : this.iconPack.play }), index$1.h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), index$1.h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), index$1.h("div", { class: "control-groups" }, index$1.h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (index$1.h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), index$1.h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
+                : this.iconPack.play }), index$1.h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), index$1.h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), index$1.h("div", { class: "seekbar-container" }, index$1.h("div", { class: "seekbar", onMouseDown: this.onSeekbarMouseDown, onClick: this.onSeekbarClick }, index$1.h("div", { class: "seekbar-track" }, index$1.h("div", { class: "seekbar-progress", style: { width: `${this.getSeekbarProgress() * 100}%` } }), index$1.h("div", { class: "seekbar-handle", style: { left: `${this.getSeekbarProgress() * 100}%` } })))), index$1.h("div", { class: "control-groups" }, index$1.h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (index$1.h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), index$1.h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
                 var _a;
                 // Create a <style> element
                 const style = document.createElement('style');

package/dist/collection/components/rtk-dialog/rtk-dialog.css

@@ -42,6 +42,14 @@ p {
 }
 
 ::slotted(*) {
-  max-height: 100%;
+  /*
+   * In Safari, 
+   * Adding max-h-full might break settings, audio_playback and troubleshooting modals.
+   * If you ever have to add max-h-full back,
+   * Make sure to test with Safari.
+   */
   max-width: 100%;
+  height: auto;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
 }

package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.css

@@ -94,11 +94,11 @@ p {
   right: 16px;
   display: flex;
   height: auto;
-  justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   z-index: 30; /* Higher z-index to ensure it's above the video */ --tw-bg-opacity: 1; background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
   border-radius: 6px; /* rounded-md fallback */ border-radius: var(--rtk-border-radius-md, 8px); background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / 0.8);
+  gap: 12px;
 }
 
 .timings {
@@ -135,7 +135,8 @@ p {
 .control-groups{
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  gap: 12px;
+  flex-shrink: 0;
 }
 
 #livestream-video,
@@ -198,4 +199,67 @@ p {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+/* Seekbar Styles */
+.seekbar-container {
+  flex: 1;
+  min-width: 100px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+}
+
+.seekbar {
+  width: 100%;
+  height: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.seekbar-track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
+}
+
+.seekbar-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
+  transition: width 0.1s ease;
+}
+
+.seekbar-handle {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
+  transform: translate(-50%, -50%);
+  transition: left 0.1s ease;
+  opacity: 0;
+}
+
+.seekbar:hover .seekbar-handle {
+  opacity: 1;
+}
+
+.seekbar:hover .seekbar-track {
+  height: 6px;
+}
+
+.seekbar:hover .seekbar-handle {
+  width: 14px;
+  height: 14px;
 }

package/dist/collection/components/rtk-livestream-player/rtk-livestream-player.js

@@ -32,21 +32,42 @@ export class RtkLivestreamPlayer {
         this.currentTime = 0;
         this.duration = 0;
         this.hideControls = true;
+        this.isDragging = false;
+        this.seekPosition = 0;
+        this.isSeeking = false;
         this.hideControlsTimeout = null;
+        this.seekingTimeout = null;
         this.livestreamUpdateListener = (state) => {
             this.playbackUrl = this.meeting.livestream.playbackUrl;
             this.livestreamState = state;
         };
         this.updateProgress = () => {
-            this.currentTime = this.videoRef.currentTime;
+            // During seeking, avoid updating currentTime to prevent fluctuations
+            if (!this.isSeeking) {
+                this.currentTime = this.videoRef.currentTime;
+            }
         };
         this.updateHlsStatsPeriodically = () => {
-            var _a, _b;
-            // Total duration is where video is + the latency that is there
-            this.duration = (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.currentTime) || 0) + (((_b = this.hls) === null || _b === void 0 ? void 0 : _b.latency) || 0);
+            var _a, _b, _c;
+            // Use HLS seekable ranges to get actual duration instead of currentTime + latency
+            // This prevents duration from fluctuating when seeking
+            if (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.seekable) && this.videoRef.seekable.length > 0) {
+                this.duration = this.videoRef.seekable.end(this.videoRef.seekable.length - 1);
+            }
+            else {
+                // Fallback to currentTime + latency if seekable ranges aren't available
+                this.duration = (((_b = this.videoRef) === null || _b === void 0 ? void 0 : _b.currentTime) || 0) + (((_c = this.hls) === null || _c === void 0 ? void 0 : _c.latency) || 0);
+            }
         };
         this.fastForwardToLatest = () => {
-            this.videoRef.currentTime = this.duration - 1; // Move to the latest time
+            var _a;
+            // Use seekable range for more accurate live edge positioning
+            if (((_a = this.videoRef) === null || _a === void 0 ? void 0 : _a.seekable) && this.videoRef.seekable.length > 0) {
+                this.videoRef.currentTime = this.videoRef.seekable.end(this.videoRef.seekable.length - 1) - 1;
+            }
+            else {
+                this.videoRef.currentTime = this.duration - 1; // Fallback
+            }
         };
         this.togglePlay = () => {
             if (this.videoRef.paused) {
@@ -79,6 +100,74 @@ export class RtkLivestreamPlayer {
                 this.hideControls = true;
             }, 5000);
         };
+        this.seekToPosition = (position) => {
+            if (!this.videoRef)
+                return;
+            // Clamp position to valid range
+            const clampedPosition = Math.max(0, Math.min(position, this.duration));
+            // Set seeking state to prevent currentTime fluctuations
+            this.isSeeking = true;
+            // Update currentTime immediately for UI feedback
+            this.currentTime = clampedPosition;
+            try {
+                this.videoRef.currentTime = clampedPosition;
+                // Clear any existing timeout
+                if (this.seekingTimeout) {
+                    clearTimeout(this.seekingTimeout);
+                }
+                // Reset seeking state after a short delay to allow video to stabilize
+                this.seekingTimeout = setTimeout(() => {
+                    this.isSeeking = false;
+                    // Update currentTime one final time to ensure accuracy
+                    this.currentTime = this.videoRef.currentTime;
+                }, 200);
+            }
+            catch (error) {
+                this.isSeeking = false;
+                this.meeting.__internals__.logger.warn('rtk-livestream-player:: Seek failed', { error });
+            }
+        };
+        this.onSeekbarMouseDown = (event) => {
+            event.preventDefault();
+            this.isDragging = true;
+            this.updateSeekPosition(event);
+            document.addEventListener('mousemove', this.onSeekbarMouseMove);
+            document.addEventListener('mouseup', this.onSeekbarMouseUp);
+        };
+        this.onSeekbarMouseMove = (event) => {
+            if (!this.isDragging)
+                return;
+            this.updateSeekPosition(event);
+        };
+        this.onSeekbarMouseUp = (event) => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.updateSeekPosition(event);
+            this.seekToPosition(this.seekPosition);
+            document.removeEventListener('mousemove', this.onSeekbarMouseMove);
+            document.removeEventListener('mouseup', this.onSeekbarMouseUp);
+        };
+        this.onSeekbarClick = (event) => {
+            if (this.isDragging)
+                return;
+            this.updateSeekPosition(event);
+            this.seekToPosition(this.seekPosition);
+        };
+        this.updateSeekPosition = (event) => {
+            const seekbar = event.currentTarget;
+            const rect = seekbar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progress = Math.max(0, Math.min(1, clickX / rect.width));
+            // Map progress to duration
+            this.seekPosition = progress * this.duration;
+        };
+        this.getSeekbarProgress = () => {
+            if (this.isDragging) {
+                return this.duration > 0 ? this.seekPosition / this.duration : 0;
+            }
+            return this.duration > 0 ? this.currentTime / this.duration : 0;
+        };
         this.getLoadingState = () => {
             let loadingMessage = '';
             let isLoading = false;
@@ -148,7 +237,7 @@ export class RtkLivestreamPlayer {
                     });
                     window.rtk_hls = this.hls;
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Loading source`);
-                    this.hls.loadSource(this.playbackUrl);
+                    this.hls.loadSource(this.playbackUrl + '?dvrEnabled=true');
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Attaching video element to HLS`);
                     this.hls.attachMedia(this.videoRef);
                     this.meeting.__internals__.logger.info(`rtk-livestream-player:: Waiting async for HLS manifest parsing`);
@@ -166,7 +255,7 @@ export class RtkLivestreamPlayer {
                                 setTimeout(() => {
                                     if (this.playbackUrl && this.livestreamState === 'LIVESTREAMING') {
                                         this.meeting.__internals__.logger.info('rtk-livestream-player:: Retrying playbackUrl');
-                                        this.hls.loadSource(this.playbackUrl);
+                                        this.hls.loadSource(this.playbackUrl + '?dvrEnabled=true');
                                     }
                                 }, 5000);
                                 return;
@@ -259,6 +348,9 @@ export class RtkLivestreamPlayer {
         this.meeting.livestream.removeListener('livestreamUpdate', this.livestreamUpdateListener);
         this.videoRef.removeEventListener('timeupdate', this.updateProgress);
         clearInterval(this.statsIntervalTimer);
+        if (this.seekingTimeout) {
+            clearTimeout(this.seekingTimeout);
+        }
         this.videoRef = null;
         if (this.hls) {
             this.hls.destroy();
@@ -290,7 +382,7 @@ export class RtkLivestreamPlayer {
         // <!-- Control Bar -->
         h("div", { class: "control-bar" }, h("div", { class: "control-groups" }, h("rtk-icon", { id: "playPause", onClick: this.togglePlay, size: "lg", class: "control-btn", icon: this.playerState === PlayerState.PLAYING
                 ? this.iconPack.pause
-                : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
+                : this.iconPack.play }), h("rtk-icon", { size: "lg", class: "control-btn", icon: this.iconPack.fastForward, onClick: this.fastForwardToLatest }), h("span", { class: "timings" }, formatSecondsToHHMMSS(this.currentTime), " /", ' ', formatSecondsToHHMMSS(this.duration))), h("div", { class: "seekbar-container" }, h("div", { class: "seekbar", onMouseDown: this.onSeekbarMouseDown, onClick: this.onSeekbarClick }, h("div", { class: "seekbar-track" }, h("div", { class: "seekbar-progress", style: { width: `${this.getSeekbarProgress() * 100}%` } }), h("div", { class: "seekbar-handle", style: { left: `${this.getSeekbarProgress() * 100}%` } })))), h("div", { class: "control-groups" }, h("select", { class: "level-select", onChange: (e) => this.changeQuality(parseInt(e.target.value)) }, this.qualityLevels.map((level) => (h("option", { value: level.level, selected: this.selectedQuality === level.level }, level.resolution)))), h("rtk-fullscreen-toggle", { id: "fullscreen", class: "control-btn fullscreen-btn", targetElement: this.videoContainerRef, size: "sm", iconPack: this.iconPack, t: this.t, ref: (fullScreenToggle) => {
                 var _a;
                 // Create a <style> element
                 const style = document.createElement('style');
@@ -438,7 +530,10 @@ export class RtkLivestreamPlayer {
             "selectedQuality": {},
             "currentTime": {},
             "duration": {},
-            "hideControls": {}
+            "hideControls": {},
+            "isDragging": {},
+            "seekPosition": {},
+            "isSeeking": {}
         };
     }
     static get events() {