refactor(video-player-v2): gate time view dropdown behind split (#1695)

kduncanhsu · Duncan Hsu · web-flow · commit ed6eb50c7d90 · 2026-07-06T15:58:27.000-07:00
* refactor(video-player-v2): gate time view dropdown behind split

* test(video): update test syntax to be more clear

---------

Co-authored-by: Duncan Hsu &lt;kduncanhsu@box.com&gt;
diff --git a/src/lib/viewers/controls/media/FilmstripV2.tsx b/src/lib/viewers/controls/media/FilmstripV2.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import formatTimecode from '../../media/formatTimecode';
-import { DEFAULT_FPS } from '../../media/videoFps';
+import { formatTime } from './DurationLabels';
 import './FilmstripV2.scss';
 
 const FILMSTRIP_FRAMES_PER_ROW = 100;
@@ -22,7 +22,7 @@ export type Props = {
 
 export default function FilmstripV2({
     aspectRatio = 0,
-    fps = DEFAULT_FPS,
+    fps,
     imageUrl = '',
     interval = 1,
     isShown,
@@ -84,7 +84,7 @@ export default function FilmstripV2({
                 )}
             </div>
             <div className="bp-FilmstripV2-time" data-testid="bp-FilmstripV2-time">
-                {formatTimecode(time, fps)}
+                {fps ? formatTimecode(time, fps) : formatTime(time)}
             </div>
         </div>
     );
diff --git a/src/lib/viewers/controls/media/TimestampControl.scss b/src/lib/viewers/controls/media/TimestampControl.scss
@@ -6,14 +6,11 @@
     align-items: center;
 }
 
-.bp-TimestampControl-button {
-    @include bp-Control--fade;
-    @include bp-Control--outline;
-
+.bp-TimestampControl-button,
+.bp-TimestampControl-static {
     display: flex;
     gap: 4px;
     align-items: center;
-    margin: 0;
     padding: 6px 12px;
     color: $white;
     font-weight: normal;
@@ -22,11 +19,18 @@
     line-height: 20px;
     letter-spacing: .3px;
     white-space: nowrap;
+    user-select: none;
+}
+
+.bp-TimestampControl-button {
+    @include bp-Control--fade;
+    @include bp-Control--outline;
+
+    margin: 0;
     background: transparent;
     border: 0;
     border-radius: $bp-controls-button-radius;
     cursor: pointer;
-    user-select: none;
 
     &:focus:not(:disabled),
     &.bp-is-open {
diff --git a/src/lib/viewers/controls/media/TimestampControl.tsx b/src/lib/viewers/controls/media/TimestampControl.tsx
@@ -20,6 +20,7 @@ export type Props = {
     currentTime?: number;
     durationTime?: number;
     fps?: number;
+    canChangeTimeFormat?: boolean;
     isNarrowWidth?: boolean;
     mediaEl?: HTMLVideoElement | null;
 };
@@ -46,6 +47,7 @@ export default function TimestampControl({
     currentTime = 0,
     durationTime = 0,
     fps = DEFAULT_FPS,
+    canChangeTimeFormat = false,
     isNarrowWidth = false,
     mediaEl,
 }: Props): JSX.Element {
@@ -138,6 +140,22 @@ export default function TimestampControl({
         handleSelect(selectedFormat);
     };
 
+    if (!canChangeTimeFormat) {
+        return (
+            <div className="bp-TimestampControl" data-testid="bp-TimestampControl">
+                <span className="bp-TimestampControl-static" data-testid="bp-TimestampControl-static">
+                    <span className="bp-TimestampControl-current">{formatTime(currentTime)}</span>
+                    {!isNarrowWidth && (
+                        <>
+                            <span className="bp-TimestampControl-separator">/</span>
+                            <span className="bp-TimestampControl-duration">{formatTime(durationTime)}</span>
+                        </>
+                    )}
+                </span>
+            </div>
+        );
+    }
+
     return (
         <div ref={containerElRef} className="bp-TimestampControl" data-testid="bp-TimestampControl">
             <button
diff --git a/src/lib/viewers/controls/media/__tests__/FilmstripV2-test.tsx b/src/lib/viewers/controls/media/__tests__/FilmstripV2-test.tsx
@@ -55,18 +55,24 @@ describe('FilmstripV2', () => {
         });
     });
 
-    describe('timecode', () => {
-        test('should display formatted time', () => {
+    describe('time display', () => {
+        test('should display standard time when fps is not provided', () => {
             render(<FilmstripV2 time={65} />);
             const timeEl = screen.getByTestId('bp-FilmstripV2-time');
             expect(timeEl).toHaveTextContent('1:05');
         });
 
-        test('should display 0:00 for time 0', () => {
+        test('should display 0:00 for time 0 when fps is not provided', () => {
             render(<FilmstripV2 time={0} />);
             const timeEl = screen.getByTestId('bp-FilmstripV2-time');
             expect(timeEl).toHaveTextContent('0:00');
         });
+
+        test('should display timecode when fps is provided', () => {
+            render(<FilmstripV2 fps={30} time={61.5} />);
+            const timeEl = screen.getByTestId('bp-FilmstripV2-time');
+            expect(timeEl).toHaveTextContent('00:01:01:15');
+        });
     });
 
     describe('loading state', () => {
diff --git a/src/lib/viewers/controls/media/__tests__/TimestampControl-test.tsx b/src/lib/viewers/controls/media/__tests__/TimestampControl-test.tsx
@@ -20,7 +20,16 @@ describe('TimestampControl', () => {
     });
 
     const getWrapper = (props = {}) =>
-        render(<TimestampControl currentTime={65} durationTime={120} fps={24} mediaEl={videoEl} {...props} />);
+        render(
+            <TimestampControl
+                canChangeTimeFormat
+                currentTime={65}
+                durationTime={120}
+                fps={24}
+                mediaEl={videoEl}
+                {...props}
+            />,
+        );
 
     const getButton = () => screen.getByTestId('bp-TimestampControl-button');
 
@@ -43,6 +52,23 @@ describe('TimestampControl', () => {
         });
     });
 
+    describe('when canChangeTimeFormat is false', () => {
+        test('should render static standard time without a dropdown', () => {
+            getWrapper({ canChangeTimeFormat: false });
+
+            expect(screen.getByTestId('bp-TimestampControl-static')).toBeInTheDocument();
+            expect(screen.getByTestId('bp-TimestampControl-static')).toHaveTextContent('1:05/2:00');
+            expect(screen.queryByTestId('bp-TimestampControl-button')).not.toBeInTheDocument();
+        });
+
+        test('should render only current time when isNarrowWidth is true', () => {
+            getWrapper({ canChangeTimeFormat: false, isNarrowWidth: true });
+
+            expect(screen.getByTestId('bp-TimestampControl-static')).toHaveTextContent('1:05');
+            expect(screen.getByTestId('bp-TimestampControl-static')).not.toHaveTextContent('/');
+        });
+    });
+
     describe('dropdown', () => {
         test('should open the flyout with 3 format options when clicked', async () => {
             const user = userEvent.setup();
diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js
@@ -1214,16 +1214,11 @@ class DashViewer extends VideoBaseViewer {
 
     /**
      * Returns the FPS to use for frame-based UI (timecode/frame formats, scrubber step).
-     * V2 player always has an FPS (manifest value or 24fps fallback); the V1 player
-     * only exposes it when frame stepping is enabled and the manifest provides it.
+     * Only exposes FPS when frame stepping is enabled and the manifest provides it.
      *
      * @return {number|undefined} Frames per second
      */
     getFps() {
-        if (this.isVideoPlayerV2) {
-            return getVideoFps(this.player);
-        }
-
         return this.featureEnabled('frameStep.enabled') && isFpsAvailable(this.player)
             ? getVideoFps(this.player)
             : undefined;
@@ -1280,6 +1275,7 @@ class DashViewer extends VideoBaseViewer {
             audioTracks: this.audioTracks,
             autoplay: this.isAutoplayEnabled(),
             bufferedRange: this.mediaEl.buffered,
+            canChangeTimeFormat: this.featureEnabled('frameStep.enabled'),
             currentTime: this.mediaEl.currentTime,
             durationTime: this.mediaEl.duration,
             experiences: this.experiences,
diff --git a/src/lib/viewers/media/VideoControlsV2.tsx b/src/lib/viewers/media/VideoControlsV2.tsx
@@ -26,6 +26,7 @@ export type Props = DurationLabelsProps &
     TimeControlsProps &
     VolumeControlsProps & {
         fps?: number;
+        canChangeTimeFormat?: boolean;
         annotationColor?: string;
         annotationMode?: AnnotationMode;
         experiences?: Experiences;
@@ -57,6 +58,7 @@ export default function VideoControlsV2({
     filmstripInterval,
     filmstripUrl,
     fps,
+    canChangeTimeFormat,
     guide,
     hasDrawing,
     hasRegion,
@@ -152,6 +154,7 @@ export default function VideoControlsV2({
                             </>
                         )}
                         <TimestampControl
+                            canChangeTimeFormat={canChangeTimeFormat}
                             currentTime={currentTime}
                             durationTime={durationTime}
                             fps={fps}
diff --git a/src/lib/viewers/media/__tests__/DashViewer-test.js b/src/lib/viewers/media/__tests__/DashViewer-test.js
@@ -1884,27 +1884,7 @@ describe('lib/viewers/media/DashViewer', () => {
     });
 
     describe('getFps()', () => {
-        test('should return manifest fps when videoPlayerV2 is enabled', () => {
-            dash.player = {
-                getVariantTracks: () => [{ frameRate: 30, active: true }],
-                destroy: jest.fn(),
-            };
-            dash.isVideoPlayerV2 = true;
-
-            expect(dash.getFps()).toBe(30);
-        });
-
-        test('should return 24fps fallback when videoPlayerV2 is enabled but manifest fps is unavailable', () => {
-            dash.player = {
-                getVariantTracks: () => [{ active: true }],
-                destroy: jest.fn(),
-            };
-            dash.isVideoPlayerV2 = true;
-
-            expect(dash.getFps()).toBe(24);
-        });
-
-        test('should return manifest fps when only frameStep is enabled and fps is available', () => {
+        test('should return manifest fps when frameStep is enabled and fps is available', () => {
             dash.player = {
                 getVariantTracks: () => [{ frameRate: 30, active: true }],
                 destroy: jest.fn(),
@@ -1914,7 +1894,7 @@ describe('lib/viewers/media/DashViewer', () => {
             expect(dash.getFps()).toBe(30);
         });
 
-        test('should return undefined when only frameStep is enabled and fps is unavailable', () => {
+        test('should return undefined when frameStep is enabled but fps is unavailable', () => {
             dash.player = {
                 getVariantTracks: () => [{ active: true }],
                 destroy: jest.fn(),
@@ -1924,7 +1904,7 @@ describe('lib/viewers/media/DashViewer', () => {
             expect(dash.getFps()).toBeUndefined();
         });
 
-        test('should return undefined when neither feature is enabled', () => {
+        test('should return undefined when frameStep is not enabled', () => {
             dash.player = {
                 getVariantTracks: () => [{ frameRate: 30, active: true }],
                 destroy: jest.fn(),
diff --git a/src/lib/viewers/media/__tests__/VideoControlsV2-test.tsx b/src/lib/viewers/media/__tests__/VideoControlsV2-test.tsx
@@ -84,22 +84,37 @@ describe('VideoControlsV2', () => {
     });
 
     describe('timestamp', () => {
-        test('should show current / total time when not narrow', () => {
+        test('should show static standard time when canChangeTimeFormat is false', () => {
             render(<VideoControlsV2 {...defaultProps} currentTime={65} durationTime={120} />);
+            const timestamp = screen.getByTestId('bp-TimestampControl-static');
+            expect(timestamp).toHaveTextContent('1:05/2:00');
+            expect(screen.queryByTestId('bp-TimestampControl-button')).not.toBeInTheDocument();
+        });
+
+        test('should show current / total time when not narrow', () => {
+            render(<VideoControlsV2 {...defaultProps} canChangeTimeFormat currentTime={65} durationTime={120} />);
             const timestamp = screen.getByTestId('bp-TimestampControl-button');
             expect(timestamp).toHaveTextContent('1:05/2:00');
         });
 
         test('should show only current time when narrow', () => {
-            render(<VideoControlsV2 {...defaultProps} currentTime={65} durationTime={120} isNarrowVideo />);
+            render(
+                <VideoControlsV2
+                    {...defaultProps}
+                    canChangeTimeFormat
+                    currentTime={65}
+                    durationTime={120}
+                    isNarrowVideo
+                />,
+            );
             const timestamp = screen.getByTestId('bp-TimestampControl-button');
             expect(timestamp).toHaveTextContent('1:05');
             expect(timestamp).not.toHaveTextContent('/');
         });
 
         test('should open the time format dropdown when timestamp is clicked', async () => {
             const user = userEvent.setup();
-            render(<VideoControlsV2 {...defaultProps} currentTime={65} durationTime={120} />);
+            render(<VideoControlsV2 {...defaultProps} canChangeTimeFormat currentTime={65} durationTime={120} />);
 
             await user.click(screen.getByTestId('bp-TimestampControl-button'));
             expect(screen.getByTestId('bp-TimestampControl-flyout')).toBeInTheDocument();
