From 3cfb400155270d95d9c713f5324d4258c3cb0e8d Mon Sep 17 00:00:00 2001 From: Thijs Daniels Date: Thu, 28 Sep 2023 14:21:33 +0200 Subject: [PATCH] fix(react-media): take initial element value into account --- .changeset/thin-cherries-taste.md | 5 ++ .../MediaProvider.tsx | 6 +- .../react-media/contexts/mediaContext.tsx | 70 ++++++++++++++++++ packages/react-media/hooks/useMedia.ts | 4 +- packages/react-media/index.ts | 3 +- .../react-media/providers/MediaContext.tsx | 72 ------------------- 6 files changed, 82 insertions(+), 78 deletions(-) create mode 100644 .changeset/thin-cherries-taste.md rename packages/react-media/{providers => components}/MediaProvider.tsx (98%) create mode 100644 packages/react-media/contexts/mediaContext.tsx delete mode 100644 packages/react-media/providers/MediaContext.tsx diff --git a/.changeset/thin-cherries-taste.md b/.changeset/thin-cherries-taste.md new file mode 100644 index 00000000..c4ba0d1d --- /dev/null +++ b/.changeset/thin-cherries-taste.md @@ -0,0 +1,5 @@ +--- +"@codedazur/react-media": patch +--- + +take initial element value into account diff --git a/packages/react-media/providers/MediaProvider.tsx b/packages/react-media/components/MediaProvider.tsx similarity index 98% rename from packages/react-media/providers/MediaProvider.tsx rename to packages/react-media/components/MediaProvider.tsx index 01c0e216..1d4cc44b 100644 --- a/packages/react-media/providers/MediaProvider.tsx +++ b/packages/react-media/components/MediaProvider.tsx @@ -7,14 +7,13 @@ import { import { ReactNode, SetStateAction, - createContext, useCallback, useEffect, useMemo, useRef, useState, } from "react"; -import { MediaContext, mediaContext } from "./MediaContext"; +import { MediaContext, mediaContext } from "../contexts/mediaContext"; export type MediaTrack = string | { source: string }; @@ -55,7 +54,8 @@ export function MediaProvider({ ? window.document.createElement("video") : null, ); - const elementRef = initialElement ?? internalElementRef; + const elementRef: MaybeRef = + initialElement ?? internalElementRef; const [isPlaying, setIsPlaying] = useState(false); const isPlayingRef = useSynchronizedRef(isPlaying); diff --git a/packages/react-media/contexts/mediaContext.tsx b/packages/react-media/contexts/mediaContext.tsx new file mode 100644 index 00000000..e9bb6cba --- /dev/null +++ b/packages/react-media/contexts/mediaContext.tsx @@ -0,0 +1,70 @@ +import { createContext } from "react"; +import { MediaTrack } from "../components/MediaProvider"; + +export interface MediaContext { + element: HTMLMediaElement | null; + tracks: T[]; + setTracks: (tracks: T[]) => void; + cursor: number; + setCursor: (index: number) => void; + track: T | undefined; + setTrack: (track: T) => void; + isPlaying: boolean; + play: () => void; + pause: () => void; + stop: () => void; + setVolume: (volume: number) => void; + addTrack: (track: T) => void; + insertTrack: (track: T) => void; + canPlayPrevious: boolean; + previous: () => void; + canPlayNext: boolean; + next: () => void; + autoPlay: boolean; + setAutoPlay: (autoPlay: boolean) => void; + shuffle: boolean; + setShuffle: (shuffle: boolean) => void; + toggleShuffle: () => void; + repeat: boolean; + setRepeat: (repeat: boolean) => void; + toggleRepeat: () => void; + setTime: (time: number) => void; + setProgress: (progress: number) => void; + duration: number; +} + +function error() { + throw new Error("No MediaProvider found in ancestry."); +} + +export const mediaContext = createContext({ + element: null, + tracks: [], + setTracks: error, + cursor: 0, + setCursor: error, + track: undefined, + setTrack: error, + isPlaying: false, + play: error, + pause: error, + stop: error, + setVolume: error, + addTrack: error, + insertTrack: error, + canPlayPrevious: false, + previous: error, + canPlayNext: false, + next: error, + autoPlay: false, + setAutoPlay: error, + shuffle: false, + setShuffle: error, + toggleShuffle: error, + repeat: false, + setRepeat: error, + toggleRepeat: error, + setTime: error, + setProgress: error, + duration: 0, +}); diff --git a/packages/react-media/hooks/useMedia.ts b/packages/react-media/hooks/useMedia.ts index 323e0a71..598f2fab 100644 --- a/packages/react-media/hooks/useMedia.ts +++ b/packages/react-media/hooks/useMedia.ts @@ -1,6 +1,6 @@ import { useContext } from "react"; -import { mediaContext, MediaContext } from "../providers/MediaContext"; -import { MediaTrack } from "../providers/MediaProvider"; +import { mediaContext, MediaContext } from "../contexts/mediaContext"; +import { MediaTrack } from "../components/MediaProvider"; export const useMedia = (): MediaContext => useContext(mediaContext) as unknown as MediaContext; diff --git a/packages/react-media/index.ts b/packages/react-media/index.ts index 1b48c0e5..e9b2bc39 100644 --- a/packages/react-media/index.ts +++ b/packages/react-media/index.ts @@ -1,4 +1,5 @@ +export * from "./components/MediaProvider"; +export * from "./contexts/mediaContext"; export * from "./hooks/useMedia"; export * from "./hooks/useMediaProgress"; export * from "./hooks/useMediaVolume"; -export * from "./providers/MediaProvider"; diff --git a/packages/react-media/providers/MediaContext.tsx b/packages/react-media/providers/MediaContext.tsx deleted file mode 100644 index cb382bc3..00000000 --- a/packages/react-media/providers/MediaContext.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import {createContext} from "react"; -import { MediaTrack } from "./MediaProvider"; - -export interface MediaContext { - element: HTMLMediaElement | null; - tracks: T[]; - setTracks: (tracks: T[]) => void; - cursor: number; - setCursor: (index: number) => void; - track: T | undefined; - setTrack: (track: T) => void; - isPlaying: boolean; - play: () => void; - pause: () => void; - stop: () => void; - setVolume: (volume: number) => void; - addTrack: (track: T) => void; - insertTrack: (track: T) => void; - canPlayPrevious: boolean; - previous: () => void; - canPlayNext: boolean; - next: () => void; - autoPlay: boolean; - setAutoPlay: (autoPlay: boolean) => void; - shuffle: boolean; - setShuffle: (shuffle: boolean) => void; - toggleShuffle: () => void; - repeat: boolean; - setRepeat: (repeat: boolean) => void; - toggleRepeat: () => void; - setTime: (time: number) => void; - setProgress: (progress: number) => void; - duration: number; - } - - function error() { - throw new Error("No MediaProvider found in ancestry."); - } - - export const mediaContext = createContext({ - element: null, - tracks: [], - setTracks: error, - cursor: 0, - setCursor: error, - track: undefined, - setTrack: error, - isPlaying: false, - play: error, - pause: error, - stop: error, - setVolume: error, - addTrack: error, - insertTrack: error, - canPlayPrevious: false, - previous: error, - canPlayNext: false, - next: error, - autoPlay: false, - setAutoPlay: error, - shuffle: false, - setShuffle: error, - toggleShuffle: error, - repeat: false, - setRepeat: error, - toggleRepeat: error, - setTime: error, - setProgress: error, - duration: 0, - }); - - \ No newline at end of file