@desynova-digital/player 4.1.4 → 4.1.5

package/components/Player.js

@@ -203,6 +203,9 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, Player);
     _this = _callSuper(this, Player, [props]);
+    _defineProperty(_this, "getPlayerInstance", function () {
+      return _this;
+    });
     _defineProperty(_this, "handleFullscreenFix", function () {
       // Also trigger our fullscreen handler so ESC exits resize everything reliably.
       _this.handleFullScreenChange();
@@ -237,6 +240,11 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
         reviewIndex: index
       });
     });
+    _defineProperty(_this, "updateSubtitlePreviewDirect", function (previewData) {
+      if (_this.video && _this.video.updateSubtitlePreviewDirect) {
+        _this.video.updateSubtitlePreviewDirect(previewData);
+      }
+    });
     // handleFullScreenChange() {
     //   this.actions.handleFullscreenChange(fullscreen.isFullscreen);
     // }
@@ -553,6 +561,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           _this2._controlBar = c;
         },
         key: "control-bar",
+        settingsData: tabMetadata === null || tabMetadata === void 0 ? void 0 : tabMetadata.settings_data,
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 5,
         playerType: fullProps.playerType,
@@ -648,6 +657,7 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
           _this4._controlBar = c;
         },
         key: "control-bar",
+        settingsData: tabMetadata === null || tabMetadata === void 0 ? void 0 : tabMetadata.settings_data,
         pauseOnOutMarkerSelect: fullProps.pauseOnOutMarkerSelect,
         order: 3,
         playerType: fullProps.playerType,
@@ -789,11 +799,11 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
       }
       this.video.seek(time);
     }
-
-    // jump forward x seconds
   }, {
     key: "forward",
-    value: function forward(seconds) {
+    value:
+    // jump forward x seconds
+    function forward(seconds) {
       this.video.forward(seconds);
     }
 

package/components/Video.js

@@ -140,6 +140,19 @@ var Video = exports["default"] = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "onVideoTimeUpdate", function () {
       _this.updateAnnotateVisibility();
     });
+    _defineProperty(_this, "updateSubtitlePreviewDirect", function (previewData) {
+      var style = _this.getSubtitleStyle(previewData);
+      _this.setState({
+        currentSubtitleObj: {
+          charactername: previewData.charactername || '',
+          line1: previewData.line1 || '',
+          line2: previewData.line2 || '',
+          start_time: previewData.in_time || 0,
+          end_time: previewData.out_time || 0,
+          style: style
+        }
+      });
+    });
     _defineProperty(_this, "buildSmoothPath", function (points, width, height) {
       if (!points || points.length < 2) return '';
       var startX = points[0].x * width;

package/components/marking-controls/MarkingControl.js

@@ -58,7 +58,8 @@ function MarkingControl(_ref) {
     enablePlayerActions = _ref.enablePlayerActions,
     pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect,
     timeCodeFormat = _ref.timeCodeFormat,
-    onRightMenuVisible = _ref.onRightMenuVisible;
+    onRightMenuVisible = _ref.onRightMenuVisible,
+    settingsData = _ref.settingsData;
   var shouldShowMarkers = function shouldShowMarkers() {
     var missingAnyMarker = !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1);
     var blockedType = playerType === 'panel' || playerType === 'default' || playerType === 'clipping_default';
@@ -79,6 +80,7 @@ function MarkingControl(_ref) {
     playerType: playerType,
     onRightMenuVisible: onRightMenuVisible
   })) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1 || (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingDuration["default"], {
+    settingsData: settingsData,
     theme: theme,
     leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
     rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,

package/components/marking-controls/MarkingDuration.js

@@ -19,12 +19,20 @@ var propTypes = {
   frameRate: _propTypes.PropTypes.number,
   initialTime: _propTypes.PropTypes.number,
   timeCodeFormat: _propTypes.PropTypes.string,
-  theme: _propTypes.PropTypes.string
+  theme: _propTypes.PropTypes.string,
+  settingsData: _propTypes.PropTypes.instanceOf(Object)
 };
 var defaultProps = {
   leftMarker: -1,
   rightMarker: -1,
-  frameRate: 0
+  frameRate: 0,
+  settingsData: {
+    allowOverlappingVal: true,
+    maxCharCountVal: 50,
+    maxTimeLimitVal: 7,
+    minTimeLimitVal: 2,
+    showCharCountVal: true
+  }
 };
 var themeColor = function themeColor(theme) {
   return theme ? _tokens.colors[theme].videoPlayer.themeColor : '#00cec6';
@@ -42,10 +50,16 @@ var DurationOnlyWrap = _styledComponents["default"].div(_templateObject2 || (_te
 var DurationRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n  justify-content: center;\n\n  /* bracket icons (your in-marker/out-marker) */\n  ", " {\n    background: transparent;\n    box-shadow: none;\n    margin: 0;\n\n    svg path {\n      fill: ", ";\n      width: 8px;\n    }\n  }\n"])), _components.Icon.Element, function (p) {
   return themeColor(p.theme);
 });
-var DurationPill = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-radius: 5px;\n  background: #0c141d;\n  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n  min-width: 120px;\n  width: auto;\n  white-space: nowrap;\n"])));
-var DurText = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Medium;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.72);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n"])));
+var DurationPill = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-radius: 5px;\n  background: ", ";\n  border: ", ";\n  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n  min-width: 120px;\n  width: auto;\n  white-space: nowrap;\n  transition: all 0.2s ease;\n"])), function (p) {
+  return p.pillBackground || '#0c141d';
+}, function (p) {
+  return p.pillBorder || 'none';
+});
+var DurText = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-family: SFUIText-Medium;\n  font-size: 11px;\n  color: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n  transition: color 0.2s ease;\n"])), function (p) {
+  return p.textColor || 'rgba(255, 255, 255, 0.72)';
+});
 var Dot = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: ", ";\n"])), function (p) {
-  return themeColor(p.theme);
+  return p.textColor || themeColor(p.theme);
 });
 
 /* ---------------- Hover + Tooltip ---------------- */
@@ -53,71 +67,73 @@ var HoverTarget = _styledComponents["default"].span(_templateObject7 || (_templa
 var InOutTooltip = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 50%;\n  bottom: calc(100% + 1px);\n  transform: translate(-50%, 0);\n  opacity: 0;\n  pointer-events: none;\n  transition: 150ms ease;\n  z-index: 9999;\n\n  .bubble {\n    min-width: 150px;\n    padding: 10px 12px;\n    border-radius: 10px;\n    background: rgba(10, 18, 26, 0.95);\n    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);\n    position: relative;\n  }\n\n  /* Downward teal arrow for tooltip */\n  .bubble::after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    bottom: -8px;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 6px solid ", ";\n    filter: drop-shadow(0 2px 6px rgba(0, 206, 198, 0.35));\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n  }\n  .row + .row {\n    margin-top: 4px;\n  }\n\n  .key {\n    font-size: 12px;\n    font-family: SFUIText-Medium;\n\n    line-height: 14px;\n    color: rgba(255, 255, 255, 0.72);\n    min-width: 28px;\n  }\n"])), function (p) {
   return themeColor(p.theme);
 });
+var getDurationStyles = function getDurationStyles(duration, maxTimeLimitVal, minTimeLimitVal) {
+  var isOutOfBounds = duration < minTimeLimitVal || duration > maxTimeLimitVal;
+  if (isOutOfBounds) {
+    return {
+      textColor: '#FF6C56',
+      background: 'rgba(255, 108, 86, 0.10)',
+      border: '1px solid #FF6C56'
+    };
+  }
+  return {
+    textColor: '#18B96E',
+    background: '#18B96E33',
+    border: '1px solid #18B96E'
+  };
+};
 function MarkingDuration(_ref) {
   var leftMarker = _ref.leftMarker,
     rightMarker = _ref.rightMarker,
     initialTime = _ref.initialTime,
     frameRate = _ref.frameRate,
     theme = _ref.theme,
-    timeCodeFormat = _ref.timeCodeFormat;
+    timeCodeFormat = _ref.timeCodeFormat,
+    settingsData = _ref.settingsData;
   var hasAny = leftMarker > -1 || rightMarker > -1;
   if (!hasAny) return null;
   var hasBoth = leftMarker > -1 && rightMarker > -1;
   var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
   var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
-  var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate) : null;
+  var durationInSeconds = hasBoth ? rightMarker - leftMarker : null;
+  var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(durationInSeconds, frameRate) : null;
   var showTooltip = hasBoth;
-  /* ---------------- CASE 1: OLD FLOW UI showDuration = false ---------------- */
-  // if (!showDuration) {
-  //   return (
-  //     <MarkingDurationBlock theme={theme}>
-  //       <Icon name="in-marker" width={6} height={18} />
-
-  //       {leftMarker > -1 && (
-  //         <p>
-  //           <TimeCodeDisplay
-  //             timecode={leftMarkerVal}
-  //             selectedTimecodeFormat={timeCodeFormat}
-  //             fps={frameRate}
-  //           />
-  //         </p>
-  //       )}
-
-  //       {hasBoth && (
-  //         <p>
-  //           {'{'} Dur:{' '}
-  //           <TimeCodeDisplay
-  //             timecode={durMarkerVal}
-  //             selectedTimecodeFormat={timeCodeFormat}
-  //             fps={frameRate}
-  //           />
-  //           {'} '}
-  //           <TimeCodeDisplay
-  //             timecode={rightMarkerVal}
-  //             selectedTimecodeFormat={timeCodeFormat}
-  //             fps={frameRate}
-  //           />
-  //         </p>
-  //       )}
-
-  //       <Icon name="out-marker" width={6} height={18} />
-  //     </MarkingDurationBlock>
-  //   );
-  // }
-
-  var pillContent = hasBoth ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Dur: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
+  var durationStyles = {
+    textColor: themeColor(theme),
+    background: '#0c141d',
+    border: 'none'
+  };
+  if (hasBoth && settingsData) {
+    var maxTimeLimitVal = settingsData.maxTimeLimitVal,
+      minTimeLimitVal = settingsData.minTimeLimitVal;
+    if (maxTimeLimitVal !== undefined && minTimeLimitVal !== undefined) {
+      durationStyles = getDurationStyles(durationInSeconds, maxTimeLimitVal, minTimeLimitVal);
+    }
+  }
+  var pillContent = hasBoth ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: durationStyles.textColor
+    }
+  }, "Dur:"), ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
+    color: durationStyles.textColor,
     timecode: durMarkerVal,
     selectedTimecodeFormat: timeCodeFormat,
     fps: frameRate
-  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "In: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "In:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
     timecode: leftMarkerVal,
     selectedTimecodeFormat: timeCodeFormat,
     fps: frameRate
   }));
   return /*#__PURE__*/_react["default"].createElement(DurationOnlyWrap, null, /*#__PURE__*/_react["default"].createElement(HoverTarget, null, /*#__PURE__*/_react["default"].createElement(DurationRow, {
     theme: theme
-  }, /*#__PURE__*/_react["default"].createElement(DurationPill, null, /*#__PURE__*/_react["default"].createElement(DurText, null, pillContent), /*#__PURE__*/_react["default"].createElement(Dot, {
-    theme: theme
+  }, /*#__PURE__*/_react["default"].createElement(DurationPill, {
+    pillBackground: durationStyles.background,
+    pillBorder: durationStyles.border
+  }, /*#__PURE__*/_react["default"].createElement(DurText, {
+    textColor: durationStyles.textColor
+  }, pillContent), /*#__PURE__*/_react["default"].createElement(Dot, {
+    theme: theme,
+    textColor: durationStyles.textColor
   }))), showTooltip && /*#__PURE__*/_react["default"].createElement(InOutTooltip, {
     className: "inOutTooltip",
     theme: theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {