@desynova-digital/player 4.0.86 → 4.0.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/Player.js +33 -5
  2. package/components/PlayerHeader.js +2 -4
  3. package/components/SDOutline.js +9 -2
  4. package/components/Video.js +1 -3
  5. package/components/progress-bar/RenderCommentMarkers.js +8 -8
  6. package/package.json +1 -1
package/components/Player.js CHANGED
@@ -727,10 +727,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
727
727
  var _this$props6 = this.props,
728
728
  controlType = _this$props6.controlType,
729
729
  playerType = _this$props6.playerType,
730
- fileType = _this$props6.fileType;
730
+ fileType = _this$props6.fileType,
731
+ isRightMenuVisible = _this$props6.isRightMenuVisible;
732
+
731
733
  //added for header height
732
734
  var headerHeight = playerHeader ? playerHeader.offsetHeight : 60;
733
735
  var totalHeight = window.innerHeight;
736
+ var totalWidth = window.innerWidth;
734
737
  var newHeight;
735
738
  var height = 0;
736
739
  _toConsumableArray(leftSectionRef.children).forEach(function (child) {
@@ -741,7 +744,13 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
741
744
  //for rightsection top to again 0px
742
745
  rightSectionRef.style.top = '0px';
743
746
  }
744
-
747
+ //toggle functionality fullscreen on player header
748
+ if (player.isFullscreen) {
749
+ var containerWidth = playerContainer.offsetWidth;
750
+ playerHeader.style.width = "".concat(containerWidth, "px");
751
+ } else {
752
+ playerHeader.style.width = '100%';
753
+ }
745
754
  //added for full screen with right section to little down for video player
746
755
  if (rightSectionRef && player.isFullscreen) {
747
756
  newHeight = totalHeight - headerHeight;
@@ -774,6 +783,28 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
774
783
  video.style.height = videoHeight + 'px';
775
784
  video.style.margin = '0 auto';
776
785
  video.classList.add('ratio-border');
786
+ }
787
+ // Fullscreen mode with right section consideration
788
+ else if (player.isFullscreen) {
789
+ // Calculate available width considering right section
790
+ var availableWidth = totalWidth;
791
+ if (isRightMenuVisible) {
792
+ // Subtract right section width from available width
793
+ availableWidth = totalWidth - rightSectionRef.offsetWidth;
794
+ }
795
+ // Calculate video dimensions based on available space
796
+ videoHeight = totalHeight - headerHeight - progressControl.offsetHeight - controlBar.offsetHeight;
797
+ videoWidth = videoHeight * (16 / 9);
798
+ // If video width exceeds available width, recalculate based on width
799
+ if (videoWidth > availableWidth) {
800
+ videoWidth = availableWidth;
801
+ videoHeight = videoWidth * (9 / 16);
802
+ }
803
+ video.style.paddingTop = '0';
804
+ video.style.width = videoWidth + 'px';
805
+ video.style.height = videoHeight + 'px';
806
+ video.style.margin = '0 auto';
807
+ video.classList.add('ratio-border');
777
808
  } else if (window.innerHeight < 1024 && (playerContainer.offsetHeight > window.innerHeight || window.innerHeight > playerContainer.offsetHeight)) {
778
809
  var playlistMinHeight = 150;
779
810
  if (controlType === 'default') {
@@ -803,13 +834,10 @@ var Player = exports["default"] = /*#__PURE__*/function (_Component) {
803
834
  }
804
835
  if (player.isFullscreen && progressControl) {
805
836
  videoHeight = window.innerHeight - playerHeader.offsetHeight - progressControl.offsetHeight - controlBar.offsetHeight;
806
- videoWidth = videoHeight * (16 / 9);
807
837
  if (videoWidth > window.innerWidth) {
808
- videoWidth = window.innerWidth;
809
838
  videoHeight = videoWidth * (9 / 16);
810
839
  }
811
840
  video.style.paddingTop = '0';
812
- video.style.width = videoWidth + 'px';
813
841
  video.style.height = videoHeight + 'px';
814
842
  video.style.margin = '0 auto';
815
843
  video.classList.add('ratio-border');
package/components/PlayerHeader.js CHANGED
@@ -48,10 +48,8 @@ var propTypes = {
48
48
  activeVersion: _propTypes.PropTypes.instanceOf(Object),
49
49
  versions: _propTypes.PropTypes.instanceOf(Array)
50
50
  };
51
- var PlayerHeaderBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n background: #000;\n transition: all 250ms ease-in-out;\n height: ", ";\n // width: 100%;\n width: ", ";\n z-index: 1;\n position: ", ";\n top: ", ";\n overflow: ", ";\n"])), function (props) {
51
+ var PlayerHeaderBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n background: #000;\n transition: all 250ms ease-in-out;\n height: ", ";\n width: 100%;\n z-index: 1;\n position: ", ";\n top: ", ";\n overflow: ", ";\n"])), function (props) {
52
52
  return props.player === 'panel' && props.active || props.player !== 'panel' ? '60px' : '0px';
53
- }, function (props) {
54
- return props.isRightMenuVisible && props.isFullscreen ? '157%' : '100%';
55
53
  }, function (props) {
56
54
  return props.player === 'panel' ? 'absolute' : 'relative';
57
55
  }, function (props) {
@@ -237,7 +235,7 @@ var PlayerHeader = exports["default"] = /*#__PURE__*/function (_Component) {
237
235
  player: playerType,
238
236
  isFullscreen: isFullscreen,
239
237
  isRightMenuVisible: isRightMenuVisible
240
- }, !isFullscreen && !isUserGuest && /*#__PURE__*/_react["default"].createElement(BackButton, _extends({
238
+ }, !isUserGuest && /*#__PURE__*/_react["default"].createElement(BackButton, _extends({
241
239
  display: "rounded",
242
240
  appearance: "cta",
243
241
  icon: "arrow-left",
package/components/SDOutline.js CHANGED
@@ -16,7 +16,11 @@ var propTypes = {
16
16
  actions: _propTypes.PropTypes.instanceOf(Object)
17
17
  };
18
18
  var SDPlayerBorder = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n opacity: 0.3;\n border: solid 1px ", ";\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n position: absolute;\n // padding-left: 75%;\n // height: 100%;\n height: ", ";\n padding-left: ", "\n"])), _colors["default"].common.base.white, function (props) {
19
- return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
19
+ if (props.isFullscreen && props.isRightMenuVisible) {
20
+ return props.heightRatio ? "calc(75% * ".concat(props.heightRatio, ")") : '75%';
21
+ } else {
22
+ return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
23
+ }
20
24
  }, function (props) {
21
25
  return props.paddingLeftPercent ? "calc(".concat(props.paddingLeftPercent, " * ").concat(props.paddingLeftRatio, ")") : '75%';
22
26
  });
@@ -28,7 +32,8 @@ function SDOutline(_ref) {
28
32
  paddingLeftPercent = _ref.paddingLeftPercent,
29
33
  paddingLeftRatio = _ref.paddingLeftRatio,
30
34
  text = _ref.text,
31
- keyData = _ref.keyData;
35
+ keyData = _ref.keyData,
36
+ isRightMenuVisible = _ref.isRightMenuVisible;
32
37
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
33
38
  style: !player[keyData] ? {
34
39
  display: 'none'
@@ -38,6 +43,8 @@ function SDOutline(_ref) {
38
43
  heightRatio: heightRatio,
39
44
  paddingLeftPercent: paddingLeftPercent,
40
45
  paddingLeftRatio: paddingLeftRatio,
46
+ isFullscreen: player.isFullscreen,
47
+ isRightMenuVisible: isRightMenuVisible,
41
48
  onClick: function onClick() {
42
49
  if (player.paused) {
43
50
  actions.play();
package/components/Video.js CHANGED
@@ -107,10 +107,8 @@ var defaultProps = {
107
107
  var SubTitleSection = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n font-family: SFUIText-Regular;\n font-size: 16px;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: center;\n text-align: center;\n color: #ffffff;\n height: 90%;\n align-items: center;\n\n .subtitleContainer {\n border-radius: 4px;\n width: fit-content;\n background: #000000;\n opacity: 0.9;\n padding: ", ";\n line-height: 20px;\n position: absolute;\n\n i,\n em {\n font-style: italic; /* Override the font style for <em> tags inside elements with the class .someClass */\n }\n\n strong {\n font-weight: bold;\n }\n }\n .longSubtitleStyles {\n overflow-y: auto;\n height: fit-content;\n max-height: 70px;\n max-width: 75%;\n width: fit-content;\n }\n"])), function (props) {
108
108
  return props.currentSubtitleObj && props.currentSubtitleObj.line1 ? '8px 10px' : '0px';
109
109
  });
110
- var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n &.video-react-player-block {\n position: relative;\n transition: all 0.1s ease-in-out;\n -moz-transition: all 0.1s ease-in-out;\n -webkit-transition: all 0.1s ease-in-out;\n -ms-transition: all 0.1s ease-in-out;\n -o-transition: all 0.1s ease-in-out;\n ", "\n video {\n position: absolute;\n top: 0;\n left: 0;\n // width: 100%;\n width: ", ";\n height: 100%;\n right: 0;\n bottom: 0;\n }\n .audio-tracks {\n position: relative;\n display: flex;\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n z-index: 10;\n position: absolute;\n width: 100%;\n bottom: 0;\n p {\n cursor: pointer;\n padding: 10px;\n }\n }\n .loader-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: 10;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &.ratio-border {\n // border: 1px solid rgba(255, 255, 255, 0.5);\n &:after {\n content: ", ";\n position: absolute;\n color: #fff;\n font-family: SFUIText-Regular;\n font-size: 12px;\n transform: rotate(-90deg);\n top: 20%;\n left: -50px;\n }\n }\n"])), function (props) {
110
+ var VideoBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n &.video-react-player-block {\n position: relative;\n transition: all 0.1s ease-in-out;\n -moz-transition: all 0.1s ease-in-out;\n -webkit-transition: all 0.1s ease-in-out;\n -ms-transition: all 0.1s ease-in-out;\n -o-transition: all 0.1s ease-in-out;\n ", "\n video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n right: 0;\n bottom: 0;\n }\n .audio-tracks {\n position: relative;\n display: flex;\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n z-index: 10;\n position: absolute;\n width: 100%;\n bottom: 0;\n p {\n cursor: pointer;\n padding: 10px;\n }\n }\n .loader-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n z-index: 10;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &.ratio-border {\n // border: 1px solid rgba(255, 255, 255, 0.5);\n &:after {\n content: ", ";\n position: absolute;\n color: #fff;\n font-family: SFUIText-Regular;\n font-size: 12px;\n transform: rotate(-90deg);\n top: 20%;\n left: -50px;\n }\n }\n"])), function (props) {
111
111
  return props.svgLayerActive && "\n pointer-events: none;\n video {\n pointer-events: none;\n }\n ";
112
- }, function (props) {
113
- return props.isRightMenuVisible && props.isFullScreen ? '74%' : '100%';
114
112
  }, function (props) {
115
113
  return props.HDBorder ? '"16:9 Safe Area"' : '';
116
114
  });
package/components/progress-bar/RenderCommentMarkers.js CHANGED
@@ -21,18 +21,15 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
21
21
  /* ----------------------------------------------------------
22
22
  TIMELINE MAIN WRAPPER
23
23
  ---------------------------------------------------------- */
24
- var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 15px;\n"])));
25
-
24
+ var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 11px;\n"])));
26
25
  /* ----------------------------------------------------------
27
26
  MARKER DOT (start dot)
28
27
  ---------------------------------------------------------- */
29
- var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -8px;\n transform: translateX(-50%);\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #47d2c7;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #0a0f18;\n font-weight: 700;\n font-size: 11px;\n cursor: pointer;\n z-index: 9000;\n\n &:hover {\n background: #3bbfb6;\n }\n"])));
30
-
28
+ var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #47d2c7;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #0a0f18;\n font-weight: 600;\n font-size: 10px;\n cursor: pointer;\n z-index: 9000;\n\n &:hover {\n background: #3bbfb6;\n }\n"])));
31
29
  /* ----------------------------------------------------------
32
30
  END MARKER DOT (VISIBLE ONLY ON HOVER)
33
31
  ---------------------------------------------------------- */
34
- var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -8px;\n transform: translateX(-50%);\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #2ee8dd;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9000;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n cursor: pointer;\n\n &::after {\n content: '';\n width: 10px;\n height: 10px;\n background: white;\n border-radius: 50%;\n }\n"])));
35
-
32
+ var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #2ee8dd;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9000;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n cursor: pointer;\n\n &::after {\n content: '';\n width: 10px;\n height: 10px;\n background: white;\n border-radius: 50%;\n }\n"])));
36
33
  /* ----------------------------------------------------------
37
34
  HORIZONTAL SEGMENT LINE
38
35
  ---------------------------------------------------------- */
@@ -41,9 +38,11 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
41
38
  /* ----------------------------------------------------------
42
39
  HOVER BOX
43
40
  ---------------------------------------------------------- */
44
- var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 30px;\n left: var(--left);\n transform: translateX(-50%);\n width: auto;\n min-width: 150px;\n max-width: 220px;\n max-height: 400px;\n background: #303f51;\n backdrop-filter: blur(12px);\n border-radius: 10px;\n padding: 0px 9px 8px 9px;\n color: white;\n z-index: 999999;\n box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n font-family: 'Inter', 'SF Pro Display', 'Segoe UI', sans-serif;\n overflow-y: auto;\n animation: fadeInBox 0.18s ease-out;\n"])));
41
+ var HoverBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 30px;\n left: var(--left);\n transform: translateX(-50%);\n // width: auto;\n min-width: 150px;\n max-width: 220px;\n max-height: 400px;\n background: #303f51;\n backdrop-filter: blur(12px);\n border-radius: 10px;\n padding: ", ";\n color: white;\n z-index: 999999;\n box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n font-family: 'Inter', 'SF Pro Display', 'Segoe UI', sans-serif;\n overflow-y: auto;\n animation: fadeInBox 0.18s ease-out;\n"])), function (props) {
42
+ return props.commentLength > 1 ? '0px 9px 8px 4px' : '10px 9px 8px 4px';
43
+ });
45
44
  var HoverHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: calc(100% + 18px);\n position: relative;\n left: -9px;\n background: #3e6673;\n color: #46d7ff;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n padding: 10px 12px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n margin-bottom: 8px;\n"])));
46
- var HoverComment = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 10px 0;\n position: relative;\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: -9px;\n width: calc(100% + 18px);\n height: 1px;\n background: rgba(255, 255, 255, 0.12);\n }\n"])));
45
+ var HoverComment = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 10px 0;\n position: relative;\n border-radius: 5px;\n transition: background 0.15s ease, transform 0.15s ease;\n &:hover {\n background: rgba(255, 255, 255, 0.08); /* subtle highlight */\n transform: translateX(2px); /* slight movement */\n }\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: -9px;\n width: calc(100% + 18px);\n height: 1px;\n background: rgba(255, 255, 255, 0.12);\n }\n"])));
47
46
  var HoverName = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: 13px;\n font-weight: 700;\n color: #afb2ba;\n margin-bottom: 8px;\n"])));
48
47
  var HoverTime = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: 11px;\n color: #afb2ba;\n margin-bottom: 5px;\n"])));
49
48
  var HoverText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-size: 13px;\n color: #fff;\n line-height: 1.35;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n"])));
@@ -156,6 +155,7 @@ var RenderCommentMarkers = function RenderCommentMarkers(props) {
156
155
  opacity: hovered === time ? 1 : 0
157
156
  }
158
157
  }), hovered === time && /*#__PURE__*/_react["default"].createElement(HoverBox, {
158
+ commentLength: comments.length,
159
159
  tabIndex: 0,
160
160
  style: {
161
161
  '--left': "".concat(getSafeLeft(startPercent), "%")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desynova-digital/player",
3
- "version": "4.0.86",
3
+ "version": "4.0.88",
4
4
  "description": "Video Player Package for Contido Application",
5
5
  "main": "index.js",
6
6
  "scripts": {