box-content-preview 3.44.0 → 3.46.0

package/dist/lib/index.js

@@ -9340,7 +9340,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.44.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.46.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -11058,7 +11058,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.44.0";
+const Logger_CLIENT_VERSION = "3.46.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -26290,6 +26290,10 @@ class VideoBaseViewer extends media_MediaBaseViewer {
       // Shift up by half the control bar + half the spinner to visually center above the controls
       this.bufferingSpinnerEl.style.marginTop = `-${VIDEO_PLAYER_CONTROL_BAR_HEIGHT / 2 + SPINNER_HALF_SIZE}px`;
     }
+    if (this.featureEnabled('videoPlayerV2.enabled')) {
+      this.wrapperEl.classList.add('bp-media--v2');
+      this.mediaContainerEl.classList.add('bp-media-container--v2');
+    }
     this.lowerLights();
   }
 
@@ -26573,9 +26577,13 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   loadUIReact() {
     super.loadUIReact();
+
+    // For the V2 player, mount the controls on the wrapper (above the media container)
+    // so their width is constrained by the viewport rather than the video
+    const controlsContainerEl = this.featureEnabled('videoPlayerV2.enabled') ? this.wrapperEl : this.mediaContainerEl;
     this.controls = new ControlsRoot({
       className: 'bp-VideoControlsRoot',
-      containerEl: this.mediaContainerEl,
+      containerEl: controlsContainerEl,
       fileId: this.options.file.id,
       onHide: this.handleControlsHide,
       onShow: this.handleControlsShow
@@ -26786,9 +26794,6 @@ class VideoBaseViewer extends media_MediaBaseViewer {
         this.mediaEl.style.width = `${viewport.height * this.aspect}px`;
       }
     }
-    if (this.mediaContainerEl && this.mediaEl.style.width) {
-      this.mediaContainerEl.style.width = this.mediaEl.style.width;
-    }
   }
 
   /**
@@ -26800,15 +26805,15 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   handleNarrowVideoUI() {
     if (this.useReactControls()) {
-      const mediaElWidthNumber = parseInt(this.mediaEl.style.width, 10);
-      if (!Number.isNaN(mediaElWidthNumber)) {
+      const widthNumber = this.featureEnabled('videoPlayerV2.enabled') ? this.wrapperEl.clientWidth : parseInt(this.mediaEl.style.width, 10);
+      if (!Number.isNaN(widthNumber)) {
         // check if play and seek buttons exist in the dom
-        if (this.playContainerEl && mediaElWidthNumber >= SMALL_VIDEO_WIDTH_THRESHOLD) {
+        if (this.playContainerEl && widthNumber >= SMALL_VIDEO_WIDTH_THRESHOLD) {
           this.isNarrowVideo = false;
           this.removePlayButtonWithSeekButtons();
           this.preloader?.showPlayOverlay();
           this.renderUI();
-        } else if (!this.playContainerEl && mediaElWidthNumber < SMALL_VIDEO_WIDTH_THRESHOLD) {
+        } else if (!this.playContainerEl && widthNumber < SMALL_VIDEO_WIDTH_THRESHOLD) {
           this.buildPlayButtonWithSeekButtons();
           this.preloader?.hidePlayOverlay();
           this.isNarrowVideo = true;
@@ -27315,6 +27320,295 @@ function isFpsAvailable(player) {
   const tracks = player.getVariantTracks();
   return tracks.some(t => t.frameRate != null && t.frameRate > 0);
 }
+;// ./src/lib/viewers/controls/media/FilmstripV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/FilmstripV2.tsx
+
+
+
+
+const FilmstripV2_FILMSTRIP_FRAMES_PER_ROW = 100;
+const FILMSTRIP_SOURCE_FRAME_HEIGHT = 90;
+const FILMSTRIP_DISPLAY_HEIGHT = 135;
+const FILMSTRIP_DISPLAY_WIDTH = 240;
+function FilmstripV2(_ref) {
+  let {
+    aspectRatio = 0,
+    imageUrl = '',
+    interval = 1,
+    isShown,
+    position = 0,
+    positionMax = 0,
+    time = 0
+  } = _ref;
+  const [isLoading, setIsLoading] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(true);
+  const [imageWidth, setImageWidth] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const frameNumber = Math.floor(time / interval);
+  const frameRow = Math.floor(frameNumber / FilmstripV2_FILMSTRIP_FRAMES_PER_ROW);
+  const sourceFrameWidth = imageWidth ? Math.floor(imageWidth / FilmstripV2_FILMSTRIP_FRAMES_PER_ROW) : Math.floor(aspectRatio * FILMSTRIP_SOURCE_FRAME_HEIGHT) || Math.floor(FILMSTRIP_DISPLAY_WIDTH * (FILMSTRIP_SOURCE_FRAME_HEIGHT / FILMSTRIP_DISPLAY_HEIGHT));
+  const scale = FILMSTRIP_DISPLAY_HEIGHT / FILMSTRIP_SOURCE_FRAME_HEIGHT;
+  const displayWidth = Math.floor(sourceFrameWidth * scale) || FILMSTRIP_DISPLAY_WIDTH;
+  const backgroundLeft = -(frameNumber % FilmstripV2_FILMSTRIP_FRAMES_PER_ROW) * displayWidth;
+  const backgroundTop = -(frameRow * FILMSTRIP_DISPLAY_HEIGHT);
+  const backgroundWidth = imageWidth ? imageWidth * scale : undefined;
+  const cardWidth = displayWidth + 24;
+  const filmstripLeft = Math.min(Math.max(0, position - cardWidth / 2), positionMax - cardWidth);
+  __WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => {
+    if (!imageUrl) return;
+    const filmstripImage = document.createElement('img');
+    filmstripImage.onload = () => {
+      setImageWidth(filmstripImage.naturalWidth);
+      setIsLoading(false);
+    };
+    filmstripImage.src = imageUrl;
+  }, [imageUrl]);
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: classnames_default()('bp-FilmstripV2', {
+      'bp-is-shown': isShown
+    }),
+    "data-testid": "bp-FilmstripV2",
+    style: {
+      left: `${filmstripLeft}px`
+    }
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-FilmstripV2-frame",
+    "data-testid": "bp-FilmstripV2-frame",
+    style: {
+      backgroundImage: imageUrl ? `url('${imageUrl}')` : '',
+      backgroundPositionX: backgroundLeft,
+      backgroundPositionY: backgroundTop,
+      backgroundSize: backgroundWidth ? `${backgroundWidth}px auto` : undefined,
+      height: FILMSTRIP_DISPLAY_HEIGHT,
+      width: displayWidth
+    }
+  }, isLoading && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-crawler",
+    "data-testid": "bp-FilmstripV2-crawler"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null))), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-FilmstripV2-time",
+    "data-testid": "bp-FilmstripV2-time"
+  }, formatTime(time)));
+}
+;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/TimeControlsV2.tsx
+
+
+
+
+
+
+
+const TimeControlsV2_round = value => {
+  return +value.toFixed(4);
+};
+const TimeControlsV2_percent = (value1, value2) => {
+  return TimeControlsV2_round(value1 / value2 * 100);
+};
+function TimeControlsV2(_ref) {
+  let {
+    aspectRatio,
+    currentTime = 0,
+    durationTime = 0,
+    filmstripInterval,
+    filmstripUrl,
+    fps,
+    mediaEl,
+    onTimeChange
+  } = _ref;
+  const [isSliderHovered, setIsSliderHovered] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
+  const [hoverPosition, setHoverPosition] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const [hoverPositionMax, setHoverPositionMax] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const [hoverTime, setHoverTime] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
+  const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
+  const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
+  const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
+  const handleMouseMove = (newTime, newPosition, width) => {
+    setHoverPosition(newPosition);
+    setHoverPositionMax(width);
+    setHoverTime(newTime);
+  };
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-TimeControlsV2",
+    "data-testid": "bp-time-controls-v2"
+  }, !!filmstripInterval && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FilmstripV2, {
+    aspectRatio: aspectRatio,
+    imageUrl: filmstripUrl,
+    interval: filmstripInterval,
+    isShown: isSliderHovered,
+    position: hoverPosition,
+    positionMax: hoverPositionMax,
+    time: hoverTime
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(SliderControl, {
+    className: "bp-TimeControlsV2-slider",
+    "data-resin-target": "timeScrubber",
+    max: durationValue,
+    min: 0,
+    onBlur: (noop_default()),
+    onFocus: (noop_default()),
+    onMouseOut: () => setIsSliderHovered(false),
+    onMouseOver: () => setIsSliderHovered(true),
+    onMove: handleMouseMove,
+    onUpdate: onTimeChange,
+    step: fps ? 1 / fps : 5,
+    title: "Media Slider",
+    track: `linear-gradient(to right, ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__} calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} 100%)`,
+    value: currentValue
+  }));
+}
+;// ./src/lib/viewers/media/VideoControlsV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/VideoControlsV2.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function VideoControlsV2(_ref) {
+  let {
+    annotationColor,
+    annotationMode,
+    aspectRatio,
+    audioTrack,
+    audioTracks,
+    autoplay,
+    currentTime = 0,
+    durationTime = 0,
+    filmstripInterval,
+    filmstripUrl,
+    fps,
+    hasDrawing,
+    hasRegion,
+    isAutoGeneratedSubtitles,
+    isHDSupported,
+    isNarrowVideo,
+    isPlaying,
+    mediaEl,
+    movePlayback,
+    onAnnotationColorChange,
+    onAnnotationModeClick,
+    onAnnotationModeEscape,
+    onAudioTrackChange,
+    onAutoplayChange,
+    onMuteChange,
+    onPlayPause,
+    onQualityChange,
+    onRateChange,
+    onSubtitleChange,
+    onSubtitlesToggle,
+    onTimeChange,
+    onVolumeChange,
+    quality,
+    rate,
+    subtitle,
+    subtitles = [],
+    videoAnnotationsEnabled = false,
+    volume
+  } = _ref;
+  const PlayPauseIcon = isPlaying ? icons_IconPause24 : icons_IconPlay24;
+  const playPauseTitle = isPlaying ? "Pause" : "Play";
+  const skipForwardTitle = "Skip forward";
+  const skipBackwardTitle = "Skip backward";
+  const moveForward = () => {
+    movePlayback(true, MEDIA_PLAYBACK_SKIP_DURATION);
+  };
+  const moveBackward = () => {
+    movePlayback(false, MEDIA_PLAYBACK_SKIP_DURATION);
+  };
+  const timeLabel = isNarrowVideo ? formatTime(currentTime) : `${formatTime(currentTime)} / ${formatTime(durationTime)}`;
+  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2",
+    "data-testid": "media-controls-wrapper-v2"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(TimeControlsV2, {
+    aspectRatio: aspectRatio,
+    currentTime: currentTime,
+    durationTime: durationTime,
+    filmstripInterval: filmstripInterval,
+    filmstripUrl: filmstripUrl,
+    fps: fps,
+    mediaEl: mediaEl,
+    onTimeChange: onTimeChange
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-bar"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--left"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MediaToggle, {
+    className: "bp-VideoControlsV2-playPause",
+    "data-resin-target": "playPause",
+    onClick: () => onPlayPause(!isPlaying),
+    title: playPauseTitle
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(PlayPauseIcon, null)), !isNarrowVideo && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(__WEBPACK_EXTERNAL_MODULE_react_default__.Fragment, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-divider"
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MediaToggle, {
+    className: "bp-VideoControlsV2-skipBtn",
+    "data-resin-target": "skipBackward",
+    onClick: moveBackward,
+    title: skipBackwardTitle
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconArrowCurveBack24, null)), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MediaToggle, {
+    className: "bp-VideoControlsV2-skipBtn",
+    "data-resin-target": "skipForward",
+    onClick: moveForward,
+    title: skipForwardTitle
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconArrowCurveForward24, null)), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-divider"
+  })), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
+    className: "bp-VideoControlsV2-timestamp",
+    "data-testid": "bp-VideoControlsV2-timestamp"
+  }, timeLabel)), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--right"
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VolumeControls, {
+    onMuteChange: onMuteChange,
+    onVolumeChange: onVolumeChange,
+    volume: volume
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(SubtitlesToggle, {
+    isAutoGeneratedSubtitles: isAutoGeneratedSubtitles,
+    isShowingSubtitles: subtitle !== SUBTITLES_OFF,
+    onSubtitlesToggle: onSubtitlesToggle,
+    subtitles: subtitles
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MediaSettings, {
+    audioTrack: audioTrack,
+    audioTracks: audioTracks,
+    autoplay: autoplay,
+    className: "bp-VideoControls-settings",
+    isHDSupported: isHDSupported,
+    onAudioTrackChange: onAudioTrackChange,
+    onAutoplayChange: onAutoplayChange,
+    onQualityChange: onQualityChange,
+    onRateChange: onRateChange,
+    onSubtitleChange: onSubtitleChange,
+    quality: quality,
+    rate: rate,
+    subtitle: subtitle,
+    subtitles: subtitles
+  }), videoAnnotationsEnabled && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(__WEBPACK_EXTERNAL_MODULE_react_default__.Fragment, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-VideoControlsV2-divider"
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnnotationsControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    hasDrawing: hasDrawing,
+    hasRegion: hasRegion,
+    isVideo: true,
+    onAnnotationModeClick: onAnnotationModeClick,
+    onAnnotationModeEscape: onAnnotationModeEscape
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DrawingControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    onAnnotationColorChange: onAnnotationColorChange
+  })))));
+}
 ;// ./src/lib/viewers/media/DashViewer.js
 function DashViewer_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function DashViewer_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? DashViewer_ownKeys(Object(t), !0).forEach(function (r) { DashViewer_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : DashViewer_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27334,6 +27628,7 @@ function DashViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t
 
 
 
+
 const CSS_CLASS_DASH = 'bp-media-dash';
 const CSS_CLASS_HD = 'bp-media-controls-is-hd';
 const SEGMENT_SIZE = 5;
@@ -28520,28 +28815,24 @@ class DashViewer extends media_VideoBaseViewer {
     } = this.options;
     const canAnnotate = this.areNewAnnotationsEnabled() && this.hasAnnotationCreatePermission() && this.videoAnnotationsEnabled;
     const annotationsEnabled = !!this.annotator && this.videoAnnotationsEnabled;
-    this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControls, {
+    const sharedProps = {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
       aspectRatio: this.aspect,
       audioTrack: this.selectedAudioTrack,
       audioTracks: this.audioTracks,
       autoplay: this.isAutoplayEnabled(),
-      bufferedRange: this.mediaEl.buffered,
       currentTime: this.mediaEl.currentTime,
       durationTime: this.mediaEl.duration,
-      experiences: this.experiences,
       filmstripInterval: this.filmstripInterval,
       filmstripUrl: this.filmstripUrl,
       fps: this.featureEnabled('frameStep.enabled') && isFpsAvailable(this.player) ? getVideoFps(this.player) : undefined,
       hasDrawing: canDraw,
-      hasHighlight: false,
       hasRegion: canAnnotate,
       isAutoGeneratedSubtitles: !!this.autoCaptionDisplayer,
       isHDSupported: this.hdVideoId !== -1,
       isNarrowVideo: this.isNarrowVideo,
       isPlaying: !this.mediaEl.paused,
-      isPlayingHD: this.isPlayingHD(),
       mediaEl: this.mediaEl,
       movePlayback: this.movePlayback,
       onAnnotationColorChange: this.handleAnnotationColorChange,
@@ -28549,7 +28840,6 @@ class DashViewer extends media_VideoBaseViewer {
       onAnnotationModeEscape: this.handleAnnotationControlsEscape,
       onAudioTrackChange: this.setAudioTrack,
       onAutoplayChange: this.setAutoplay,
-      onFullscreenToggle: this.toggleFullscreen,
       onMuteChange: this.toggleMute,
       onPlayPause: this.handlePlayRequest,
       onQualityChange: this.setQuality,
@@ -28564,7 +28854,18 @@ class DashViewer extends media_VideoBaseViewer {
       subtitles: this.textTracks,
       videoAnnotationsEnabled: annotationsEnabled,
       volume: this.mediaEl.volume
-    }));
+    };
+    if (this.featureEnabled('videoPlayerV2.enabled')) {
+      this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControlsV2, sharedProps));
+      return;
+    }
+    this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControls, DashViewer_extends({}, sharedProps, {
+      bufferedRange: this.mediaEl.buffered,
+      experiences: this.experiences,
+      hasHighlight: false,
+      isPlayingHD: this.isPlayingHD(),
+      onFullscreenToggle: this.toggleFullscreen
+    })));
   }
 }
 /* harmony default export */ const media_DashViewer = (DashViewer);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.44.0",
+    "version": "3.46.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",