@ldelia/react-media 0.5.7 → 0.5.9
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useContext, useEffect,
|
|
1
|
+
import React, { useContext, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { ZoomContext } from '../ZoomContext/ZoomContext';
|
|
4
4
|
import { pixelToSeconds, secondsToPixel } from '../utils/utils';
|
|
@@ -16,13 +16,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
|
|
|
16
16
|
const zoomContextValue = useContext(ZoomContext);
|
|
17
17
|
const [selection, setSelection] = useState({ start: null, end: null });
|
|
18
18
|
const [isDragging, setIsDragging] = useState(false);
|
|
19
|
-
let selectedRangeInPixels = useMemo(() => [], []);
|
|
20
|
-
if (selectedRange.length === 2) {
|
|
21
|
-
selectedRangeInPixels = [
|
|
22
|
-
secondsToPixel(zoomContextValue, selectedRange[0]),
|
|
23
|
-
secondsToPixel(zoomContextValue, selectedRange[1]),
|
|
24
|
-
];
|
|
25
|
-
}
|
|
26
19
|
const getMousePointerPixelPosition = (e) => {
|
|
27
20
|
const canvas = canvasRef.current;
|
|
28
21
|
let rect = canvas.getBoundingClientRect();
|
|
@@ -31,6 +24,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
|
|
|
31
24
|
const drawRect = (pixelX0, pixelX1) => {
|
|
32
25
|
const canvas = canvasRef.current;
|
|
33
26
|
const context = canvas.getContext('2d');
|
|
27
|
+
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
34
28
|
context.globalAlpha = 0.3;
|
|
35
29
|
context.fillStyle = window
|
|
36
30
|
.getComputedStyle(canvas)
|
|
@@ -54,19 +48,21 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
|
|
|
54
48
|
if (!canvas)
|
|
55
49
|
return;
|
|
56
50
|
const pixel = getMousePointerPixelPosition(event);
|
|
57
|
-
const
|
|
51
|
+
const seconds = pixelToSeconds(zoomContextValue, pixel);
|
|
58
52
|
if (isDragging) {
|
|
59
53
|
setSelection(prevSelection => {
|
|
60
|
-
if (prevSelection.start ===
|
|
61
|
-
onChange(
|
|
54
|
+
if (prevSelection.start === seconds) {
|
|
55
|
+
onChange(seconds);
|
|
56
|
+
return { start: null, end: null };
|
|
62
57
|
}
|
|
63
58
|
else {
|
|
64
|
-
|
|
59
|
+
const curatedSelection = seconds < prevSelection.start ? [seconds, prevSelection.start] : [prevSelection.start, seconds];
|
|
60
|
+
onRangeChange(curatedSelection);
|
|
61
|
+
return {
|
|
62
|
+
start: curatedSelection[0],
|
|
63
|
+
end: curatedSelection[1],
|
|
64
|
+
};
|
|
65
65
|
}
|
|
66
|
-
return {
|
|
67
|
-
start: prevSelection.start,
|
|
68
|
-
end: second,
|
|
69
|
-
};
|
|
70
66
|
});
|
|
71
67
|
}
|
|
72
68
|
setIsDragging(false);
|
|
@@ -74,26 +70,37 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
|
|
|
74
70
|
// Handle mouse move (for dragging)
|
|
75
71
|
const handleMouseMove = (event) => {
|
|
76
72
|
if (!isDragging)
|
|
77
|
-
return;
|
|
73
|
+
return; // the mouse is moving over the canvas but the user has not clicked yet
|
|
78
74
|
const canvas = canvasRef.current;
|
|
79
75
|
if (!canvas)
|
|
80
76
|
return;
|
|
81
77
|
const pixel = getMousePointerPixelPosition(event);
|
|
82
|
-
const
|
|
83
|
-
setSelection(prevSelection =>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
const seconds = pixelToSeconds(zoomContextValue, pixel);
|
|
79
|
+
setSelection(prevSelection => {
|
|
80
|
+
return {
|
|
81
|
+
start: prevSelection.start,
|
|
82
|
+
end: seconds,
|
|
83
|
+
};
|
|
84
|
+
});
|
|
87
85
|
};
|
|
88
86
|
useEffect(() => {
|
|
89
87
|
const canvas = canvasRef.current;
|
|
90
88
|
// https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
|
|
91
89
|
canvas.width = canvas.offsetWidth;
|
|
92
90
|
canvas.height = canvas.offsetHeight;
|
|
93
|
-
if (
|
|
91
|
+
if (selectedRange.length !== 2 || zoomContextValue.timelineWrapperWidth === 0)
|
|
92
|
+
return;
|
|
93
|
+
drawRect(secondsToPixel(zoomContextValue, selectedRange[0]), secondsToPixel(zoomContextValue, selectedRange[1]));
|
|
94
|
+
}, [selectedRange]);
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
const canvas = canvasRef.current;
|
|
97
|
+
// https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
|
|
98
|
+
canvas.width = canvas.offsetWidth;
|
|
99
|
+
canvas.height = canvas.offsetHeight;
|
|
100
|
+
if (selection.start === null || selection.end === null)
|
|
94
101
|
return;
|
|
95
|
-
drawRect(
|
|
96
|
-
}, [
|
|
102
|
+
drawRect(secondsToPixel(zoomContextValue, selection.start), secondsToPixel(zoomContextValue, selection.end));
|
|
103
|
+
}, [selection, zoomContextValue]);
|
|
97
104
|
return (React.createElement(OverlayCanvas, { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, className: 'media-timeline-range-selector-canvas' }));
|
|
98
105
|
};
|
|
99
106
|
export default React.memo(RangeSelectorCanvas);
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
const TickTimeContainer = styled.span.attrs((props) => ({
|
|
4
4
|
style: {
|
|
5
|
-
left: props
|
|
5
|
+
left: props.$left,
|
|
6
6
|
},
|
|
7
7
|
})) `
|
|
8
8
|
background: transparent;
|
|
@@ -18,7 +18,7 @@ const TickTime = ({ start, leftPosition }) => {
|
|
|
18
18
|
const minutes = Math.floor(start / 60);
|
|
19
19
|
let seconds = start - minutes * 60;
|
|
20
20
|
let secondsFormatted = seconds < 10 ? '0' + seconds : seconds.toString();
|
|
21
|
-
return (React.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
|
|
21
|
+
return (React.createElement(TickTimeContainer, { "$left": leftPosition, className: 'media-timeline-tick-time' },
|
|
22
22
|
minutes,
|
|
23
23
|
":",
|
|
24
24
|
secondsFormatted));
|
|
@@ -2,3 +2,4 @@ import { ReproductionWidgetProps } from '../components/reproduction-widget';
|
|
|
2
2
|
declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
|
|
3
3
|
export default _default;
|
|
4
4
|
export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;
|
|
5
|
+
export declare const PlayAlong: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
2
|
import { ReproductionWidget } from '../components/reproduction-widget';
|
|
3
3
|
export default {
|
|
4
4
|
title: 'ReproductionWidget',
|
|
@@ -12,7 +12,7 @@ const Template = (args) => {
|
|
|
12
12
|
const [reproductionTimestamp, setReproductionTimestamp] = useState(0);
|
|
13
13
|
// Handle initialization of reproduction
|
|
14
14
|
const handleInit = useCallback((reproductionInstance) => {
|
|
15
|
-
const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); };
|
|
15
|
+
const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); console.log("refresh"); };
|
|
16
16
|
setReproduction(reproductionInstance);
|
|
17
17
|
reproductionInstance.on('COUNTING_IN', (args) => { console.log("counting in", args); });
|
|
18
18
|
reproductionInstance.on('PLAYING', refreshEvent);
|
|
@@ -40,7 +40,9 @@ const Template = (args) => {
|
|
|
40
40
|
React.createElement("div", null,
|
|
41
41
|
React.createElement("button", { onClick: handleStop, disabled: !reproduction || reproduction.isStopped() }, "Stop"),
|
|
42
42
|
React.createElement("button", { onClick: handlePause, disabled: !reproduction || !reproduction.isPlaying() }, "Pause"),
|
|
43
|
-
React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume")
|
|
43
|
+
React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"),
|
|
44
|
+
"Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
|
|
45
|
+
reproduction.getCurrentTime())));
|
|
44
46
|
};
|
|
45
47
|
export const Default = Template.bind({});
|
|
46
48
|
Default.args = {
|
|
@@ -48,3 +50,9 @@ Default.args = {
|
|
|
48
50
|
videoId: 'jFI-RBqXzhU',
|
|
49
51
|
songTempo: 180,
|
|
50
52
|
};
|
|
53
|
+
export const PlayAlong = Template.bind({});
|
|
54
|
+
PlayAlong.args = {
|
|
55
|
+
trainingMode: false,
|
|
56
|
+
songTempo: 180,
|
|
57
|
+
duration: 220,
|
|
58
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ldelia/react-media",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.9",
|
|
4
4
|
"description": "A React components collection for media-related features.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"keywords": [
|
|
@@ -114,20 +114,20 @@
|
|
|
114
114
|
"@babel/preset-env": "^7.24.8",
|
|
115
115
|
"@babel/preset-react": "^7.24.7",
|
|
116
116
|
"@babel/preset-typescript": "^7.24.7",
|
|
117
|
-
"@chromatic-com/storybook": "^
|
|
118
|
-
"@storybook/addon-actions": "^8.
|
|
119
|
-
"@storybook/addon-docs": "^8.
|
|
120
|
-
"@storybook/addon-essentials": "^8.
|
|
121
|
-
"@storybook/addon-interactions": "^8.
|
|
117
|
+
"@chromatic-com/storybook": "^3.2.4",
|
|
118
|
+
"@storybook/addon-actions": "^8.5.0",
|
|
119
|
+
"@storybook/addon-docs": "^8.5.0",
|
|
120
|
+
"@storybook/addon-essentials": "^8.5.0",
|
|
121
|
+
"@storybook/addon-interactions": "^8.5.0",
|
|
122
122
|
"@storybook/addon-knobs": "^8.0.1",
|
|
123
|
-
"@storybook/addon-links": "^8.
|
|
124
|
-
"@storybook/addon-onboarding": "^8.
|
|
125
|
-
"@storybook/blocks": "^8.
|
|
126
|
-
"@storybook/node-logger": "^8.
|
|
127
|
-
"@storybook/react": "^8.
|
|
123
|
+
"@storybook/addon-links": "^8.5.0",
|
|
124
|
+
"@storybook/addon-onboarding": "^8.5.0",
|
|
125
|
+
"@storybook/blocks": "^8.5.0",
|
|
126
|
+
"@storybook/node-logger": "^8.5.0",
|
|
127
|
+
"@storybook/react": "^8.5.0",
|
|
128
128
|
"@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
|
|
129
|
-
"@storybook/react-webpack5": "^8.
|
|
130
|
-
"@storybook/test": "^8.
|
|
129
|
+
"@storybook/react-webpack5": "^8.5.0",
|
|
130
|
+
"@storybook/test": "^8.5.0",
|
|
131
131
|
"@testing-library/jest-dom": "^6.4.6",
|
|
132
132
|
"@testing-library/react": "^16.0.0",
|
|
133
133
|
"@testing-library/user-event": "^14.5.2",
|
|
@@ -140,14 +140,14 @@
|
|
|
140
140
|
"babel-loader": "^9.1.3",
|
|
141
141
|
"eslint-config-prettier": "^9.1.0",
|
|
142
142
|
"eslint-plugin-prettier": "^5.1.3",
|
|
143
|
-
"eslint-plugin-storybook": "^0.
|
|
143
|
+
"eslint-plugin-storybook": "^0.11.2",
|
|
144
144
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
145
145
|
"postcss-normalize": "^10.0.1",
|
|
146
146
|
"postcss-preset-env": "^9.5.14",
|
|
147
147
|
"prettier": "^3.3.2",
|
|
148
148
|
"prop-types": "^15.8.1",
|
|
149
149
|
"react-docgen-typescript-plugin": "^1.0.8",
|
|
150
|
-
"storybook": "^8.
|
|
150
|
+
"storybook": "^8.5.0",
|
|
151
151
|
"ts-loader": "^9.5.1",
|
|
152
152
|
"tsconfig-paths-webpack-plugin": "^4.1.0",
|
|
153
153
|
"webpack": "^5.92.0"
|