@ldelia/react-media 0.5.2 → 0.5.4

package/dist/components/reproduction-widget/ReproductionWidget.d.ts

@@ -7,12 +7,14 @@ interface BaseProps {
 }
 interface TrainingProps extends BaseProps {
     trainingMode: true;
+    duration?: never;
     videoId: string;
 }
 interface NonTrainingProps extends BaseProps {
     trainingMode: false;
+    duration: number;
     videoId?: never;
 }
 export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
-export declare const ReproductionWidget: ({ trainingMode, videoId, songTempo, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
+export declare const ReproductionWidget: ({ trainingMode, duration, videoId, songTempo, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
 export {};

package/dist/components/reproduction-widget/ReproductionWidget.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { YouTubeInnerPlayer } from './inner-players/YouTubeInnerPlayer';
 import { PlayAlongInnerPlayer } from './inner-players/PlayAlongInnerPlayer';
 import { Reproduction } from './models/Reproduction';
-export const ReproductionWidget = ({ trainingMode, videoId, songTempo = 0, onInit, }) => {
-    const DURATION_TO_TEST = 30;
+export const ReproductionWidget = ({ trainingMode, duration, videoId, songTempo = 0, onInit, }) => {
     function onPlayAlongInnerPlayerReadyHandler(event) {
         let newReproduction = Reproduction.newBuilder()
             .withTrainingMode(false)
-            .withSongDuration(DURATION_TO_TEST)
+            .withSongDuration(duration)
             .withSongTempo(songTempo)
             .withCountingIn(songTempo > 0)
             .withInnerPlayer(event.target)

package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.js

@@ -17,6 +17,7 @@ export const YouTubeInnerPlayer = ({ videoId, onReady }) => {
             origin: origin,
         },
     };
+    console.log(videoId, opts);
     if (origin === null) {
         return null;
     }

package/dist/components/reproduction-widget/models/Reproduction.d.ts

@@ -43,7 +43,7 @@ export declare class Reproduction {
     constructor(player: Player, requiresCountingIn: boolean, songTempo: number);
     on(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): number | undefined;
     dispatch(eventName: keyof typeof Reproduction.EVENTS, args?: {}): void;
-    private countIn;
+    private countInAndPlay;
     start(): void;
     play(): void;
     pause(): void;

package/dist/components/reproduction-widget/models/Reproduction.js

@@ -108,7 +108,7 @@ export class Reproduction {
             // setTimeout(handler, 0);
         }
     }
-    countIn(timeout, limit) {
+    countInAndPlay(timeout, limit) {
         // the initial count starts instantly, no need to wait
         this.countingInCounter++;
         this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
@@ -118,7 +118,7 @@ export class Reproduction {
                 clearInterval(interval);
                 this.countingInCounter = 0;
                 if (limit !== 5) {
-                    this.countIn(this.getBPMInterval(), 5);
+                    this.countInAndPlay(this.getBPMInterval(), 5);
                 }
                 else {
                     this.play();
@@ -135,7 +135,7 @@ export class Reproduction {
         }
         if (this.requiresCountingIn && this.getCurrentTime() === 0) {
             this.state = Reproduction.STATES.COUNTING_IN;
-            this.countIn(this.getBPMInterval() * 2, 3);
+            this.countInAndPlay(this.getBPMInterval() * 2, 3);
         }
         else {
             this.play();

package/dist/components/timeline/Timeline.d.ts

@@ -6,6 +6,7 @@ export interface TimelineProps {
     className?: string;
     selectedRange?: number[];
     withTimeBlocks?: boolean;
+    markers?: number[];
     onChange?: (value: number) => void;
     onRangeChange?: (value: number[]) => void;
 }

package/dist/components/timeline/Timeline.js

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { TimelineValue } from './TimelineValue/TimelineValue';
 import { ZoomContext } from './ZoomContext/ZoomContext';
 import { getBlockOffsetForZoomLevel, getTimelineWrapperWidth, numberToPxString, } from './utils/utils';
+import { TimelineMarkers } from './TimelineMarkers/TimelineMarkers';
 const TimelineContainer = styled.div `
   background-color: #f0f0f0;
   border: 1px solid #c9c9c9;
@@ -24,7 +25,7 @@ const TimelineWrapper = styled.div `
   align-items: center;
   overflow: hidden;
 `;
-export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], markers = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
     const timeLineContainerRef = useRef(null);
     const canvasRef = useRef(null);
     const [zoomContextValue, setZoomContextValue] = useState({
@@ -73,5 +74,6 @@ export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], w
             React.createElement(ZoomContext.Provider, { value: zoomContextValue },
                 React.createElement(TimelineCanvas, { ref: canvasRef, duration: duration, withTimeBlocks: withTimeBlocks }),
                 React.createElement(TimelineValue, { value: value, canvasRef: canvasRef }),
+                React.createElement(TimelineMarkers, { markers: markers }),
                 React.createElement(RangeSelectorCanvas, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange })))));
 };

package/dist/components/timeline/TimelineMarkers/TimelineMarkers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    markers: number[];
+}
+export declare const TimelineMarkers: ({ markers }: Props) => React.JSX.Element;
+export {};

package/dist/components/timeline/TimelineMarkers/TimelineMarkers.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+import { secondsToPixel } from '../utils/utils';
+const MarkerContainer = styled.div `
+    position: relative;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+`;
+const MarkerInner = styled.div `
+    & {
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 20px solid #4CAF50; /* Green color */
+        position: absolute;
+    }
+`;
+export const TimelineMarkers = ({ markers }) => {
+    const zoomContextValue = useContext(ZoomContext);
+    return (React.createElement(React.Fragment, null, markers.map((marker, index) => (React.createElement(MarkerContainer, { key: index, style: { left: secondsToPixel(zoomContextValue, marker) } },
+        React.createElement(MarkerInner, null))))));
+};

package/dist/components/timeline/TimelineValue/TimelineValue.js

@@ -12,6 +12,7 @@ const ValueLine = styled.span `
   width: 1px;
   height: 100%;
   background-color: #575757;
+  z-index: 1; // force the ValueLine to be on top of the Markers
 `;
 const PostValueLine = styled.span `
   position: absolute;

package/dist/stories/timeline.stories.d.ts

@@ -7,3 +7,4 @@ export declare const WithSelectedRange: import("@storybook/csf").AnnotatedStoryF
 export declare const WithCustomClassName: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
 export declare const WithoutTimeBlocks: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
 export declare const Minimalist: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
+export declare const WithSelectedRangeAndMarkers: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -52,3 +52,11 @@ Minimalist.args = {
     withTimeBlocks: false,
     className: 'minimalist',
 };
+export const WithSelectedRangeAndMarkers = Template.bind({});
+WithSelectedRangeAndMarkers.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    selectedRange: [20, 30],
+    markers: [90, 108],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [