@desynova-digital/player 4.0.98 → 4.0.99
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.
package/components/SDOutline.js
CHANGED
|
@@ -1,23 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports["default"] = SDOutline;
|
|
7
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
10
|
var _propTypes = require("prop-types");
|
|
10
11
|
var _colors = _interopRequireDefault(require("../colors"));
|
|
11
12
|
var _templateObject, _templateObject2;
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
17
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
19
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
20
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
21
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
13
22
|
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
14
23
|
var propTypes = {
|
|
15
24
|
player: _propTypes.PropTypes.instanceOf(Object),
|
|
16
25
|
actions: _propTypes.PropTypes.instanceOf(Object)
|
|
17
26
|
};
|
|
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
|
|
19
|
-
if (props.isFullscreen && props.isRightMenuVisible) {
|
|
20
|
-
return
|
|
27
|
+
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 height: ", ";\n padding-left: ", ";\n"])), _colors["default"].common.base.white, function (props) {
|
|
28
|
+
if (props.isFullscreen && props.isRightMenuVisible && props.calculatedHeight) {
|
|
29
|
+
return "".concat(props.calculatedHeight, "px");
|
|
21
30
|
} else {
|
|
22
31
|
return props.heightRatio ? "calc(100% * ".concat(props.heightRatio, ")") : '100%';
|
|
23
32
|
}
|
|
@@ -34,7 +43,106 @@ function SDOutline(_ref) {
|
|
|
34
43
|
text = _ref.text,
|
|
35
44
|
keyData = _ref.keyData,
|
|
36
45
|
isRightMenuVisible = _ref.isRightMenuVisible;
|
|
46
|
+
var _useState = (0, _react.useState)(null),
|
|
47
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
48
|
+
calculatedHeight = _useState2[0],
|
|
49
|
+
setCalculatedHeight = _useState2[1];
|
|
50
|
+
var containerRef = (0, _react.useRef)(null);
|
|
51
|
+
var calculateHeightBasedOnResolution = function calculateHeightBasedOnResolution() {
|
|
52
|
+
if (!player.isFullscreen || !isRightMenuVisible) {
|
|
53
|
+
setCalculatedHeight(null);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
try {
|
|
57
|
+
// Get video element
|
|
58
|
+
var videoElement = document.querySelector('video');
|
|
59
|
+
if (!videoElement) return;
|
|
60
|
+
|
|
61
|
+
// Get video width and height
|
|
62
|
+
var videoWidth = videoElement.videoWidth;
|
|
63
|
+
var videoHeight = videoElement.videoHeight;
|
|
64
|
+
if (!videoWidth || !videoHeight) return;
|
|
65
|
+
|
|
66
|
+
// Calculate aspect ratio
|
|
67
|
+
var aspectRatio = videoWidth / videoHeight;
|
|
68
|
+
|
|
69
|
+
// Get container width
|
|
70
|
+
var leftVideoSection = document.querySelector('.left-video-section');
|
|
71
|
+
if (!leftVideoSection) return;
|
|
72
|
+
var containerWidth = leftVideoSection.getBoundingClientRect().width;
|
|
73
|
+
var newHeight;
|
|
74
|
+
var is169Ratio = aspectRatio > 1.5;
|
|
75
|
+
var is43Ratio = aspectRatio < 1.5;
|
|
76
|
+
if (is43Ratio) {
|
|
77
|
+
// For 4:3 aspect ratio: height = width * 0.75 (3/4)
|
|
78
|
+
newHeight = containerWidth * (3 / 4);
|
|
79
|
+
} else {
|
|
80
|
+
// For 16:9 aspect ratio: height = width * 0.5625 (9/16)
|
|
81
|
+
newHeight = containerWidth * (9 / 16);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Apply heightRatio if provided
|
|
85
|
+
var finalHeight = newHeight;
|
|
86
|
+
if (heightRatio !== undefined) {
|
|
87
|
+
// heightRatio of 0.8 means 80%, 0.9 means 90%, etc.
|
|
88
|
+
finalHeight = newHeight * heightRatio;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Set height in pixels
|
|
92
|
+
setCalculatedHeight(finalHeight);
|
|
93
|
+
} catch (error) {
|
|
94
|
+
console.error('Error calculating height:', error);
|
|
95
|
+
setCalculatedHeight(null);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
(0, _react.useEffect)(function () {
|
|
99
|
+
calculateHeightBasedOnResolution();
|
|
100
|
+
// Optional: Recalculate on window resize
|
|
101
|
+
var handleResize = function handleResize() {
|
|
102
|
+
calculateHeightBasedOnResolution();
|
|
103
|
+
};
|
|
104
|
+
window.addEventListener('resize', handleResize);
|
|
105
|
+
// Use ResizeObserver for container resize
|
|
106
|
+
var leftVideoSection = document.querySelector('.left-video-section');
|
|
107
|
+
var resizeObserver;
|
|
108
|
+
if (leftVideoSection) {
|
|
109
|
+
resizeObserver = new ResizeObserver(function () {
|
|
110
|
+
// Debounce to prevent excessive calculations
|
|
111
|
+
clearTimeout(resizeObserver.timeout);
|
|
112
|
+
resizeObserver.timeout = setTimeout(calculateHeightBasedOnResolution, 100);
|
|
113
|
+
});
|
|
114
|
+
resizeObserver.observe(leftVideoSection);
|
|
115
|
+
}
|
|
116
|
+
return function () {
|
|
117
|
+
window.removeEventListener('resize', handleResize);
|
|
118
|
+
if (resizeObserver && leftVideoSection) {
|
|
119
|
+
resizeObserver.unobserve(leftVideoSection);
|
|
120
|
+
clearTimeout(resizeObserver.timeout);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
}, [player.isFullscreen, isRightMenuVisible, heightRatio]);
|
|
124
|
+
|
|
125
|
+
// Recalculate when video metadata is loaded
|
|
126
|
+
(0, _react.useEffect)(function () {
|
|
127
|
+
var videoElement = document.querySelector('video');
|
|
128
|
+
if (videoElement) {
|
|
129
|
+
videoElement.addEventListener('loadedmetadata', calculateHeightBasedOnResolution);
|
|
130
|
+
}
|
|
131
|
+
return function () {
|
|
132
|
+
if (videoElement) {
|
|
133
|
+
videoElement.removeEventListener('loadedmetadata', calculateHeightBasedOnResolution);
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
}, []);
|
|
137
|
+
|
|
138
|
+
// Also recalculate when heightRatio changes
|
|
139
|
+
(0, _react.useEffect)(function () {
|
|
140
|
+
if (player.isFullscreen && isRightMenuVisible) {
|
|
141
|
+
calculateHeightBasedOnResolution();
|
|
142
|
+
}
|
|
143
|
+
}, [heightRatio]);
|
|
37
144
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SDPlayerBorder, {
|
|
145
|
+
ref: containerRef,
|
|
38
146
|
style: !player[keyData] ? {
|
|
39
147
|
display: 'none'
|
|
40
148
|
} : {
|
|
@@ -45,6 +153,7 @@ function SDOutline(_ref) {
|
|
|
45
153
|
paddingLeftRatio: paddingLeftRatio,
|
|
46
154
|
isFullscreen: player.isFullscreen,
|
|
47
155
|
isRightMenuVisible: isRightMenuVisible,
|
|
156
|
+
calculatedHeight: calculatedHeight,
|
|
48
157
|
onClick: function onClick() {
|
|
49
158
|
if (player.paused) {
|
|
50
159
|
actions.play();
|
|
@@ -27,7 +27,7 @@ var MarkerTimeline = _styledComponents["default"].div(_templateObject || (_templ
|
|
|
27
27
|
Marker Dot
|
|
28
28
|
---------------------------------------------------------- */
|
|
29
29
|
var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: #0c141d;\n z-index: ", ";\n pointer-events: auto;\n\n font-family: SFUIText-Medium;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n\n &::before {\n content: '';\n position: absolute;\n width: 32px;\n height: 32px;\n top: -6px;\n left: -6px;\n }\n\n /* --- NEW top vertical line --- */\n &::after {\n content: '';\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 1.5px;\n height: 5px;\n background: #bfbfbf;\n opacity: ", ";\n transition: opacity 0.15s ease-out;\n }\n\n ", "\n"])), function (p) {
|
|
30
|
-
return p.isHovered ?
|
|
30
|
+
return p.isHovered ? 2 : 1;
|
|
31
31
|
}, function (p) {
|
|
32
32
|
return p.showLine ? 1 : 0;
|
|
33
33
|
}, function (p) {
|
|
@@ -37,7 +37,7 @@ var MarkerDot = _styledComponents["default"].div(_templateObject2 || (_templateO
|
|
|
37
37
|
/* ----------------------------------------------------------
|
|
38
38
|
END MARKER DOT
|
|
39
39
|
---------------------------------------------------------- */
|
|
40
|
-
var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 24px; /* bigger like your screenshot */\n height: 24px;\n border-radius: 50%;\n background: #47d2c7; /* teal outer circle */\n border: 2px solid #00b9b0; /* ring / boundary */\n display: flex;\n align-items: center;\n justify-content: center;\n z-index:
|
|
40
|
+
var EndMarkerDot = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: -6px;\n transform: translateX(-50%);\n width: 24px; /* bigger like your screenshot */\n height: 24px;\n border-radius: 50%;\n background: #47d2c7; /* teal outer circle */\n border: 2px solid #00b9b0; /* ring / boundary */\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n opacity: 0;\n transition: opacity 0.15s ease-out;\n\n &::after {\n content: '';\n width: 6px; /* inner white dot */\n height: 6px;\n background: #ffffff;\n border-radius: 50%;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 1.5px;\n height: 5px;\n background: #bfbfbf;\n opacity: 1;\n\n transition: opacity 0.15s ease-out;\n }\n"])));
|
|
41
41
|
|
|
42
42
|
/* ----------------------------------------------------------
|
|
43
43
|
SEGMENT LINE
|
|
@@ -49,7 +49,7 @@ var MarkerLine = _styledComponents["default"].div(_templateObject4 || (_template
|
|
|
49
49
|
---------------------------------------------------------- */
|
|
50
50
|
|
|
51
51
|
var HoverScroll = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow-y: auto;\n max-height: 360px; /* 400 total - header height */\n\n /* Hide scrollbar everywhere */\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
52
|
-
var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 40px;\n left: 0;\n right: auto !important;\n width: max-content;\n\n background: #303f51;\n border: 2px solid rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(12px);\n border-radius: 12px;\n padding: 0;\n color: white;\n z-index:
|
|
52
|
+
var HoverBox = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 40px;\n left: 0;\n right: auto !important;\n width: max-content;\n\n background: #303f51;\n border: 2px solid rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(12px);\n border-radius: 12px;\n padding: 0;\n color: white;\n z-index: 2;\n box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);\n animation: fadeInBox 0.18s ease-out;\n\n display: flex;\n flex-direction: column;\n\n min-width: 180px;\n max-width: 220px;\n max-height: 400px;\n overflow: hidden; /* prevent scroll at root */\n"])));
|
|
53
53
|
var HoverHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: #3e6673;\n color: #00cec6;\n font-size: 12px;\n font-weight: 700;\n padding: 10px 12px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n font-family: SFUIText-Regular;\n\n position: sticky;\n top: 0;\n z-index: 2; /* must be above scroll content */\n\n width: 100%;\n box-sizing: border-box;\n"])));
|
|
54
54
|
var HoverComment = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 12px 14px;\n background: transparent;\n transition: background 0.15s ease, transform 0.15s ease;\n border-radius: 6px;\n position: relative;\n\n /* FIX */\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n\n &:hover {\n background: rgba(255, 255, 255, 0.07);\n }\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1.3px;\n background: rgba(255, 255, 255, 0.12);\n }\n"])));
|
|
55
55
|
var HoverName = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 6px;\n text-transform: capitalize;\n"])));
|
|
@@ -213,7 +213,6 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
213
213
|
}, {
|
|
214
214
|
key: "handleMouseDown",
|
|
215
215
|
value: function handleMouseDown() {
|
|
216
|
-
console.log('handleMouse handleMouseDown');
|
|
217
216
|
this.setState({
|
|
218
217
|
sliderActive: true
|
|
219
218
|
});
|
|
@@ -221,7 +220,6 @@ var SeekBar = exports["default"] = /*#__PURE__*/function (_Component) {
|
|
|
221
220
|
}, {
|
|
222
221
|
key: "handleMouseUp",
|
|
223
222
|
value: function handleMouseUp(event) {
|
|
224
|
-
console.log('handleMouse handleMouseUp');
|
|
225
223
|
var actions = this.props.actions;
|
|
226
224
|
var newTime = this.getNewTime(event);
|
|
227
225
|
// Set new time (tell video to seek to new time)
|