@desynova-digital/player 4.1.0 → 4.1.2
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.
|
@@ -59,9 +59,15 @@ function MarkingControl(_ref) {
|
|
|
59
59
|
pauseOnOutMarkerSelect = _ref.pauseOnOutMarkerSelect,
|
|
60
60
|
timeCodeFormat = _ref.timeCodeFormat,
|
|
61
61
|
onRightMenuVisible = _ref.onRightMenuVisible;
|
|
62
|
+
var shouldShowMarkers = function shouldShowMarkers() {
|
|
63
|
+
var missingAnyMarker = !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1) || !((playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker) > -1);
|
|
64
|
+
var blockedType = playerType === 'panel' || playerType === 'default' || playerType === 'clipping_default';
|
|
65
|
+
var blockedByPermission = playerReadOnlyMode || disablePlayerActions.includes('marking_controls');
|
|
66
|
+
return missingAnyMarker && !blockedType && !blockedByPermission;
|
|
67
|
+
};
|
|
62
68
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, {
|
|
63
69
|
theme: theme
|
|
64
|
-
}, (
|
|
70
|
+
}, shouldShowMarkers() ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
|
|
65
71
|
theme: theme,
|
|
66
72
|
leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
|
|
67
73
|
actions: actions,
|
|
@@ -72,7 +78,14 @@ function MarkingControl(_ref) {
|
|
|
72
78
|
enablePlayerActions: enablePlayerActions,
|
|
73
79
|
playerType: playerType,
|
|
74
80
|
onRightMenuVisible: onRightMenuVisible
|
|
75
|
-
}), /*#__PURE__*/_react["default"].createElement(
|
|
81
|
+
})) : 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"], {
|
|
82
|
+
theme: theme,
|
|
83
|
+
leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
|
|
84
|
+
rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
|
|
85
|
+
frameRate: frameRate,
|
|
86
|
+
initialTime: initialTime,
|
|
87
|
+
timeCodeFormat: timeCodeFormat
|
|
88
|
+
}) : null, shouldShowMarkers() ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
|
|
76
89
|
theme: theme,
|
|
77
90
|
leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
|
|
78
91
|
rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
|
|
@@ -85,14 +98,7 @@ function MarkingControl(_ref) {
|
|
|
85
98
|
onAddMarker: onAddMarker,
|
|
86
99
|
pauseOnOutMarkerSelect: pauseOnOutMarkerSelect,
|
|
87
100
|
onRightMenuVisible: onRightMenuVisible
|
|
88
|
-
})) : null, (playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker) > -1
|
|
89
|
-
theme: theme,
|
|
90
|
-
leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker,
|
|
91
|
-
rightMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.rightMarker,
|
|
92
|
-
frameRate: frameRate,
|
|
93
|
-
initialTime: initialTime,
|
|
94
|
-
timeCodeFormat: timeCodeFormat
|
|
95
|
-
}) : 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(_MarkingPreview["default"], {
|
|
101
|
+
})) : 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(_MarkingPreview["default"], {
|
|
96
102
|
theme: theme,
|
|
97
103
|
actions: actions,
|
|
98
104
|
leftMarker: playerSelectedMarker === null || playerSelectedMarker === void 0 ? void 0 : playerSelectedMarker.leftMarker
|
|
@@ -19,14 +19,12 @@ var propTypes = {
|
|
|
19
19
|
frameRate: _propTypes.PropTypes.number,
|
|
20
20
|
initialTime: _propTypes.PropTypes.number,
|
|
21
21
|
timeCodeFormat: _propTypes.PropTypes.string,
|
|
22
|
-
theme: _propTypes.PropTypes.string
|
|
23
|
-
showDuration: _propTypes.PropTypes.bool
|
|
22
|
+
theme: _propTypes.PropTypes.string
|
|
24
23
|
};
|
|
25
24
|
var defaultProps = {
|
|
26
25
|
leftMarker: -1,
|
|
27
26
|
rightMarker: -1,
|
|
28
|
-
frameRate: 0
|
|
29
|
-
showDuration: false
|
|
27
|
+
frameRate: 0
|
|
30
28
|
};
|
|
31
29
|
var themeColor = function themeColor(theme) {
|
|
32
30
|
return theme ? _tokens.colors[theme].videoPlayer.themeColor : '#00cec6';
|
|
@@ -41,18 +39,18 @@ var MarkingDurationBlock = _styledComponents["default"].div(_templateObject || (
|
|
|
41
39
|
var DurationOnlyWrap = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0px 5px;\n"])));
|
|
42
40
|
|
|
43
41
|
/* --- Case 2: duration pill like screenshot --- */
|
|
44
|
-
var DurationRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap:
|
|
42
|
+
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) {
|
|
45
43
|
return themeColor(p.theme);
|
|
46
44
|
});
|
|
47
|
-
var DurationPill = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n gap:
|
|
48
|
-
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"])));
|
|
45
|
+
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"])));
|
|
46
|
+
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"])));
|
|
49
47
|
var Dot = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: ", ";\n"])), function (p) {
|
|
50
48
|
return themeColor(p.theme);
|
|
51
49
|
});
|
|
52
50
|
|
|
53
51
|
/* ---------------- Hover + Tooltip ---------------- */
|
|
54
52
|
var HoverTarget = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n\n &:hover .inOutTooltip {\n opacity: 1;\n transform: translate(-50%, -6px);\n pointer-events: auto;\n }\n"])));
|
|
55
|
-
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
|
|
53
|
+
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) {
|
|
56
54
|
return themeColor(p.theme);
|
|
57
55
|
});
|
|
58
56
|
function MarkingDuration(_ref) {
|
|
@@ -64,62 +62,63 @@ function MarkingDuration(_ref) {
|
|
|
64
62
|
timeCodeFormat = _ref.timeCodeFormat;
|
|
65
63
|
var hasAny = leftMarker > -1 || rightMarker > -1;
|
|
66
64
|
if (!hasAny) return null;
|
|
67
|
-
var showDuration = true;
|
|
68
65
|
var hasBoth = leftMarker > -1 && rightMarker > -1;
|
|
69
66
|
var leftMarkerVal = (0, _utils.secondsToTime)(leftMarker, frameRate, initialTime);
|
|
70
67
|
var rightMarkerVal = (0, _utils.secondsToTime)(rightMarker, frameRate, initialTime);
|
|
71
68
|
var durMarkerVal = hasBoth ? (0, _utils.secondsToTime)(rightMarker - leftMarker, frameRate) : null;
|
|
69
|
+
var showTooltip = hasBoth;
|
|
70
|
+
/* ---------------- CASE 1: OLD FLOW UI showDuration = false ---------------- */
|
|
71
|
+
// if (!showDuration) {
|
|
72
|
+
// return (
|
|
73
|
+
// <MarkingDurationBlock theme={theme}>
|
|
74
|
+
// <Icon name="in-marker" width={6} height={18} />
|
|
72
75
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
timecode: leftMarkerVal,
|
|
83
|
-
selectedTimecodeFormat: timeCodeFormat,
|
|
84
|
-
fps: frameRate
|
|
85
|
-
})), hasBoth && /*#__PURE__*/_react["default"].createElement("p", null, '{', " Dur:", ' ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
86
|
-
timecode: durMarkerVal,
|
|
87
|
-
selectedTimecodeFormat: timeCodeFormat,
|
|
88
|
-
fps: frameRate
|
|
89
|
-
}), '} ', /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
90
|
-
timecode: rightMarkerVal,
|
|
91
|
-
selectedTimecodeFormat: timeCodeFormat,
|
|
92
|
-
fps: frameRate
|
|
93
|
-
})), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
|
|
94
|
-
name: "out-marker",
|
|
95
|
-
width: 6,
|
|
96
|
-
height: 18
|
|
97
|
-
}));
|
|
98
|
-
}
|
|
76
|
+
// {leftMarker > -1 && (
|
|
77
|
+
// <p>
|
|
78
|
+
// <TimeCodeDisplay
|
|
79
|
+
// timecode={leftMarkerVal}
|
|
80
|
+
// selectedTimecodeFormat={timeCodeFormat}
|
|
81
|
+
// fps={frameRate}
|
|
82
|
+
// />
|
|
83
|
+
// </p>
|
|
84
|
+
// )}
|
|
99
85
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
86
|
+
// {hasBoth && (
|
|
87
|
+
// <p>
|
|
88
|
+
// {'{'} Dur:{' '}
|
|
89
|
+
// <TimeCodeDisplay
|
|
90
|
+
// timecode={durMarkerVal}
|
|
91
|
+
// selectedTimecodeFormat={timeCodeFormat}
|
|
92
|
+
// fps={frameRate}
|
|
93
|
+
// />
|
|
94
|
+
// {'} '}
|
|
95
|
+
// <TimeCodeDisplay
|
|
96
|
+
// timecode={rightMarkerVal}
|
|
97
|
+
// selectedTimecodeFormat={timeCodeFormat}
|
|
98
|
+
// fps={frameRate}
|
|
99
|
+
// />
|
|
100
|
+
// </p>
|
|
101
|
+
// )}
|
|
102
|
+
|
|
103
|
+
// <Icon name="out-marker" width={6} height={18} />
|
|
104
|
+
// </MarkingDurationBlock>
|
|
105
|
+
// );
|
|
106
|
+
// }
|
|
107
|
+
|
|
108
|
+
var pillContent = hasBoth ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Dur: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
113
109
|
timecode: durMarkerVal,
|
|
114
110
|
selectedTimecodeFormat: timeCodeFormat,
|
|
115
111
|
fps: frameRate
|
|
116
|
-
})), /*#__PURE__*/_react["default"].createElement(
|
|
112
|
+
})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "In: ", /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
113
|
+
timecode: leftMarkerVal,
|
|
114
|
+
selectedTimecodeFormat: timeCodeFormat,
|
|
115
|
+
fps: frameRate
|
|
116
|
+
}));
|
|
117
|
+
return /*#__PURE__*/_react["default"].createElement(DurationOnlyWrap, null, /*#__PURE__*/_react["default"].createElement(HoverTarget, null, /*#__PURE__*/_react["default"].createElement(DurationRow, {
|
|
118
|
+
theme: theme
|
|
119
|
+
}, /*#__PURE__*/_react["default"].createElement(DurationPill, null, /*#__PURE__*/_react["default"].createElement(DurText, null, pillContent), /*#__PURE__*/_react["default"].createElement(Dot, {
|
|
117
120
|
theme: theme
|
|
118
|
-
})), /*#__PURE__*/_react["default"].createElement(
|
|
119
|
-
name: "out-marker",
|
|
120
|
-
width: 8,
|
|
121
|
-
height: 18
|
|
122
|
-
})), /*#__PURE__*/_react["default"].createElement(InOutTooltip, {
|
|
121
|
+
}))), showTooltip && /*#__PURE__*/_react["default"].createElement(InOutTooltip, {
|
|
123
122
|
className: "inOutTooltip",
|
|
124
123
|
theme: theme
|
|
125
124
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -130,13 +129,21 @@ function MarkingDuration(_ref) {
|
|
|
130
129
|
className: "key"
|
|
131
130
|
}, "In:"), /*#__PURE__*/_react["default"].createElement("span", {
|
|
132
131
|
className: "key"
|
|
133
|
-
},
|
|
132
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
133
|
+
timecode: leftMarkerVal,
|
|
134
|
+
selectedTimecodeFormat: timeCodeFormat,
|
|
135
|
+
fps: frameRate
|
|
136
|
+
}))), /*#__PURE__*/_react["default"].createElement("p", {
|
|
134
137
|
className: "row"
|
|
135
138
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
136
139
|
className: "key"
|
|
137
140
|
}, "Out:"), /*#__PURE__*/_react["default"].createElement("span", {
|
|
138
141
|
className: "key"
|
|
139
|
-
},
|
|
142
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.TimeCodeDisplay, {
|
|
143
|
+
timecode: rightMarkerVal,
|
|
144
|
+
selectedTimecodeFormat: timeCodeFormat,
|
|
145
|
+
fps: frameRate
|
|
146
|
+
})))))));
|
|
140
147
|
}
|
|
141
148
|
MarkingDuration.propTypes = propTypes;
|
|
142
149
|
MarkingDuration.defaultProps = defaultProps;
|