zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(example/react): improvements to react examples (#210)

Browse Source
This commit is contained in:
Sam Potts
2025-12-10 09:27:38 +11:00
committed by GitHub
parent 546989c2be
commit c35b012250
57 changed files with 2886 additions and 2138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/CurrentTimeDisplay.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { formatDisplayTime, shallowEqual } from '@videojs/utils';
import { useMediaSelector } from '@/store';
import { toConnectedComponent } from '../utils/component-factory';
export function useCurrentTimeDisplayState(_props: any): {
export function useCurrentTimeDisplayState(_props?: any): {
currentTime: number;
duration: number;
} {
packages/react/src/components/FullscreenButton.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
import { useMediaSelector, useMediaStore } from '@/store';
import { toConnectedComponent } from '../utils/component-factory';
export function useFullscreenButtonState(_props: any): {
export function useFullscreenButtonState(_props?: any): {
fullscreen: boolean;
requestEnterFullscreen: () => void;
requestExitFullscreen: () => void;
packages/react/src/components/MuteButton.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
import { useMediaSelector, useMediaStore } from '@/store';
import { toConnectedComponent } from '../utils/component-factory';
export function useMuteButtonState(_props: any): {
export function useMuteButtonState(_props?: any): {
volumeLevel: string;
muted: boolean;
requestMute: () => void;
packages/react/src/components/PlayButton.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
import { useMediaSelector, useMediaStore } from '@/store';
import { toConnectedComponent } from '../utils/component-factory';
export function usePlayButtonState(_props: any): {
export function usePlayButtonState(_props?: any): {
paused: boolean;
requestPlay: () => void;
requestPause: () => void;
packages/react/src/components/TimeSlider.tsx
+2 -2
View File
@@ -27,8 +27,8 @@ interface TimeSliderRenderProps extends React.ComponentProps<'div'> {
// ROOT COMPONENT
// ============================================================================
export function useTimeSliderRootState(props: TimeSliderProps): TimeSliderState {
const { orientation = 'horizontal' } = props;
export function useTimeSliderRootState(props?: TimeSliderProps): TimeSliderState {
const { orientation = 'horizontal' } = props ?? {};
const mediaStore = useMediaStore();
const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);
const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
packages/react/src/components/VolumeSlider.tsx
+2 -2
View File
@@ -28,8 +28,8 @@ interface VolumeSliderRenderProps extends React.ComponentProps<'div'> {
// ROOT COMPONENT
// ============================================================================
export function useVolumeSliderRootState(props: VolumeSliderProps): VolumeSliderState {
const { orientation = 'horizontal' } = props;
export function useVolumeSliderRootState(props?: VolumeSliderProps): VolumeSliderState {
const { orientation = 'horizontal' } = props ?? {};
const mediaStore = useMediaStore();
const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);
const mediaMethods = useMemo(() => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
packages/react/src/index.ts
+6 -6
View File
@@ -1,17 +1,17 @@
'use client';
export { CurrentTimeDisplay } from './components/CurrentTimeDisplay';
export { CurrentTimeDisplay, useCurrentTimeDisplayState } from './components/CurrentTimeDisplay';
export { DurationDisplay } from './components/DurationDisplay';
export { FullscreenButton } from './components/FullscreenButton';
export { FullscreenButton, useFullscreenButtonState } from './components/FullscreenButton';
export { HlsVideo } from './components/HlsVideo';
export { MediaContainer, useMediaContainerRef } from './components/MediaContainer';
export { MuteButton } from './components/MuteButton';
export { PlayButton } from './components/PlayButton';
export { MuteButton, useMuteButtonState } from './components/MuteButton';
export { PlayButton, usePlayButtonState } from './components/PlayButton';
export { Popover } from './components/Popover';
export { PreviewTimeDisplay } from './components/PreviewTimeDisplay';
export { TimeSlider } from './components/TimeSlider';
export { TimeSlider, useTimeSliderRootState } from './components/TimeSlider';
export { Tooltip } from './components/Tooltip';
export { Video } from './components/Video';
export { VolumeSlider } from './components/VolumeSlider';
export { useVolumeSliderRootState, VolumeSlider } from './components/VolumeSlider';
export * from './skins';
export * from '@/store';
packages/react/src/skins/frosted/styles.ts
+2 -2
View File
@@ -24,7 +24,7 @@ const styles: FrostedSkinStyles = {
'vjs:[&_video]:w-full vjs:[&_video]:h-full',
),
Overlay: cn(
'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-linear-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
// ------------------------------------
// FIXME: This is crude temporary logic, we'll improve it later I guess with a [data-show-controls] attribute or something?
'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100',
@@ -55,7 +55,7 @@ const styles: FrostedSkinStyles = {
// ------------------------------------
// FIXME: Temporary hide/show logic, related to above.
'vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',
'vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100',
'vjs:has-data-paused:scale-100 vjs:has-data-paused:opacity-100 vjs:has-data-paused:blur-none vjs:has-data-paused:delay-0 vjs:has-data-paused:duration-100',
'vjs:has-[[aria-expanded="true"]]:scale-100 vjs:has-[[aria-expanded="true"]]:opacity-100 vjs:has-[[aria-expanded="true"]]:blur-none vjs:has-[[aria-expanded="true"]]:delay-0 vjs:has-[[aria-expanded="true"]]:duration-100',
'vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',
// ------------------------------------
packages/react/src/skins/minimal/styles.ts
+4 -4
View File
@@ -24,7 +24,7 @@ const styles: MinimalSkinStyles = {
),
Overlay: cn(
'vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',
'vjs:bg-gradient-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',
'vjs:bg-linear-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',
'vjs:opacity-0 vjs:delay-500 vjs:duration-300',
// High contrast mode
'vjs:contrast-more:from-black/75',
@@ -46,7 +46,7 @@ const styles: MinimalSkinStyles = {
// ------------------------------------
// FIXME: Temporary hide/show logic
'vjs:translate-y-full vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',
'vjs:has-[[data-paused]]:translate-y-0 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-75',
'vjs:has-data-paused:translate-y-0 vjs:has-data-paused:opacity-100 vjs:has-data-paused:blur-none vjs:has-data-paused:delay-0 vjs:has-data-paused:duration-75',
'vjs:has-[[aria-expanded="true"]]:translate-y-0 vjs:has-[[aria-expanded="true"]]:opacity-100 vjs:has-[[aria-expanded="true"]]:blur-none vjs:has-[[aria-expanded="true"]]:delay-0 vjs:has-[[aria-expanded="true"]]:duration-75',
'vjs:group-hover/root:translate-y-0 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',
// ------------------------------------
@@ -112,8 +112,8 @@ const styles: MinimalSkinStyles = {
),
SliderTrack: cn(
'vjs:relative vjs:select-none vjs:rounded-[inherit] vjs:bg-white/10',
'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-[0.1875rem]',
'vjs:data-[orientation=vertical]:w-[0.1875rem]',
'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-0.75',
'vjs:data-[orientation=vertical]:w-0.75',
'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-white',
),
SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),