@innovui/react-native 0.4.0 → 0.4.1
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.
|
@@ -13,7 +13,11 @@ export type VideoPlayerProps = Omit<ViewProps, 'style'> & {
|
|
|
13
13
|
position?: number;
|
|
14
14
|
/** Duração total, em segundos. */
|
|
15
15
|
duration?: number;
|
|
16
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Em tela cheia: mostra o ícone de sair. Só vale com `onToggleFullscreen`. Ligue ao estado do
|
|
18
|
+
* vídeo (`onFullscreenEnter`/`onFullscreenExit` do `VideoView`): no iOS, é com ele que o
|
|
19
|
+
* `VideoPlayer` liga os controles do sistema na tela cheia.
|
|
20
|
+
*/
|
|
17
21
|
fullscreen?: boolean;
|
|
18
22
|
onPlayPause?: () => void;
|
|
19
23
|
/** Chamado com a posição (em segundos) tocada ou arrastada na barra. */
|
|
@@ -2,7 +2,7 @@ import { cn } from "../../utils/cn.js";
|
|
|
2
2
|
import { useToken } from "../_shared/use-token.js";
|
|
3
3
|
import { formatTime, useSeek } from "../_shared/media.js";
|
|
4
4
|
import { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon } from "../_shared/media-icons.js";
|
|
5
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
5
|
+
import { cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from "react";
|
|
6
6
|
import { AccessibilityInfo, Pressable, Text, View } from "react-native";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
//#region src/components/video-player/video-player.tsx
|
|
@@ -28,6 +28,10 @@ function VideoPlayer({ className, children, label = "Vídeo", playing = false, p
|
|
|
28
28
|
const visible = active || !playing || screenReader;
|
|
29
29
|
const progress = duration ? Math.min(position / duration, 1) * 100 : 0;
|
|
30
30
|
const ended = !playing && duration > 0 && position >= duration - .1;
|
|
31
|
+
const [entering, setEntering] = useState(false);
|
|
32
|
+
const toggleFullscreen = useRef(onToggleFullscreen);
|
|
33
|
+
toggleFullscreen.current = onToggleFullscreen;
|
|
34
|
+
const nativeControls = entering || fullscreen;
|
|
31
35
|
useEffect(() => {
|
|
32
36
|
AccessibilityInfo.isScreenReaderEnabled().then(setScreenReader);
|
|
33
37
|
const subscription = AccessibilityInfo.addEventListener("screenReaderChanged", setScreenReader);
|
|
@@ -47,6 +51,12 @@ function VideoPlayer({ className, children, label = "Vídeo", playing = false, p
|
|
|
47
51
|
else setActive(true);
|
|
48
52
|
return () => clearTimeout(timer.current);
|
|
49
53
|
}, [playing, show]);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
if (!entering) return;
|
|
56
|
+
toggleFullscreen.current?.();
|
|
57
|
+
const done = setTimeout(() => setEntering(false), 2e3);
|
|
58
|
+
return () => clearTimeout(done);
|
|
59
|
+
}, [entering]);
|
|
50
60
|
const playPause = () => {
|
|
51
61
|
if (ended) onSeek?.(0);
|
|
52
62
|
onPlayPause?.();
|
|
@@ -59,7 +69,7 @@ function VideoPlayer({ className, children, label = "Vídeo", playing = false, p
|
|
|
59
69
|
/* @__PURE__ */ jsx(View, {
|
|
60
70
|
pointerEvents: "none",
|
|
61
71
|
className: "absolute inset-0",
|
|
62
|
-
children
|
|
72
|
+
children: isValidElement(children) && children.props.nativeControls !== void 0 ? cloneElement(children, { nativeControls: nativeControls || children.props.nativeControls }) : children
|
|
63
73
|
}),
|
|
64
74
|
/* @__PURE__ */ jsx(Pressable, {
|
|
65
75
|
accessible: false,
|
|
@@ -118,7 +128,7 @@ function VideoPlayer({ className, children, label = "Vídeo", playing = false, p
|
|
|
118
128
|
}), onToggleFullscreen && /* @__PURE__ */ jsx(Pressable, {
|
|
119
129
|
accessibilityRole: "button",
|
|
120
130
|
accessibilityLabel: fullscreen ? "Sair da tela cheia" : "Tela cheia",
|
|
121
|
-
onPress: onToggleFullscreen,
|
|
131
|
+
onPress: () => fullscreen ? onToggleFullscreen() : setEntering(true),
|
|
122
132
|
className: button,
|
|
123
133
|
children: fullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, { color: onSurface }) : /* @__PURE__ */ jsx(MaximizeIcon, { color: onSurface })
|
|
124
134
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-player.js","names":[],"sources":["../../../src/components/video-player/video-player.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { AccessibilityInfo, Pressable, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { formatTime, useSeek } from '../_shared/media'\nimport { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\n\nexport type VideoPlayerProps = Omit<ViewProps, 'style'> & {\n className?: string\n /** A superfície de vídeo (ex.: o `VideoView` do `expo-video`), que preenche o player. */\n children: ReactNode\n /** Nome acessível do player. */\n label?: string\n /** Tocando agora: mostra o botão de pausar e esconde o play central. */\n playing?: boolean\n /** Posição atual, em segundos. */\n position?: number\n /** Duração total, em segundos. */\n duration?: number\n /** Em tela cheia: mostra o ícone de sair. Só vale com `onToggleFullscreen`. */\n fullscreen?: boolean\n onPlayPause?: () => void\n /** Chamado com a posição (em segundos) tocada ou arrastada na barra. */\n onSeek?: (seconds: number) => void\n /** Sem ele, o botão de tela cheia não aparece. */\n onToggleFullscreen?: () => void\n /** Tempo sem interação, em ms, até esconder os controles durante a reprodução. Padrão: 2500. */\n hideControlsAfter?: number\n}\n\n// 44px: o mínimo de área de toque recomendado no iOS (Apple HIG) e perto dos 48dp do Android.\nconst button =\n 'size-11 shrink-0 items-center justify-center rounded-full active:bg-media-on-surface/15'\n\n/**\n * Casca de player de vídeo: play/pause central, posição, tempo e tela cheia sobre o seu vídeo.\n * Não toca nada: quem usa guarda o estado (por exemplo com `expo-video`) e o passa por props,\n * ligando os `on…` ao player de verdade. Tocar no vídeo mostra ou esconde os controles, que também\n * somem sozinhos depois de um tempo sem toques enquanto toca (com leitor de tela ligado, ficam).\n */\nexport function VideoPlayer({\n className,\n children,\n label = 'Vídeo',\n playing = false,\n position = 0,\n duration = 0,\n fullscreen = false,\n onPlayPause,\n onSeek,\n onToggleFullscreen,\n hideControlsAfter = 2500,\n ...props\n}: VideoPlayerProps) {\n const [active, setActive] = useState(true)\n const [screenReader, setScreenReader] = useState(false)\n const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n const onSurface = useToken('--color-media-on-surface')\n const accent = useToken('--color-interactive-primary')\n const seek = useSeek({ position, duration, label: 'Posição do vídeo', onSeek })\n const visible = active || !playing || screenReader\n const progress = duration ? Math.min(position / duration, 1) * 100 : 0\n const ended = !playing && duration > 0 && position >= duration - 0.1\n\n useEffect(() => {\n AccessibilityInfo.isScreenReaderEnabled().then(setScreenReader)\n const subscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReader)\n return () => subscription.remove()\n }, [])\n\n const hide = () => {\n clearTimeout(timer.current)\n setActive(false)\n }\n\n const show = useCallback(() => {\n setActive(true)\n clearTimeout(timer.current)\n timer.current = setTimeout(() => setActive(false), hideControlsAfter)\n }, [hideControlsAfter])\n\n useEffect(() => {\n if (playing) show()\n else setActive(true)\n return () => clearTimeout(timer.current)\n }, [playing, show])\n\n // No expo-video, `play()` no fim do vídeo não faz nada: volta ao começo antes.\n const playPause = () => {\n if (ended) onSeek?.(0)\n onPlayPause?.()\n }\n\n return (\n <View\n accessibilityLabel={label}\n className={cn(\n 'aspect-video w-full overflow-hidden rounded-lg bg-media-surface shadow-lg',\n className,\n )}\n {...props}\n >\n <View pointerEvents=\"none\" className=\"absolute inset-0\">\n {children}\n </View>\n {/* Tocar no vídeo só mostra/esconde os controles: pausar sem querer é o erro mais comum no celular. */}\n <Pressable\n accessible={false}\n onPress={() => {\n if (!playing) return\n if (visible) hide()\n else show()\n }}\n className=\"absolute inset-0\"\n >\n {visible && <View pointerEvents=\"none\" className=\"absolute inset-0 bg-media-surface/40\" />}\n </Pressable>\n <View\n pointerEvents={visible ? 'box-none' : 'none'}\n importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}\n accessibilityElementsHidden={!visible}\n className={cn('absolute inset-0', !visible && 'opacity-0')}\n >\n <View pointerEvents=\"box-none\" className=\"absolute inset-0 items-center justify-center\">\n <Pressable\n accessibilityRole=\"button\"\n accessibilityLabel={playing ? 'Pausar' : 'Reproduzir'}\n onPress={() => {\n playPause()\n show()\n }}\n className=\"size-14 items-center justify-center rounded-full bg-media-on-surface shadow-lg active:opacity-80\"\n >\n {playing ? (\n <PauseIcon filled size={24} color={accent} />\n ) : (\n <PlayIcon filled size={24} color={accent} />\n )}\n </Pressable>\n </View>\n <View pointerEvents=\"box-none\" className=\"absolute inset-x-0 bottom-0\">\n <View\n pointerEvents=\"box-none\"\n className=\"h-11 flex-row items-center justify-between pl-4 pr-1\"\n >\n <Text\n accessible={false}\n className=\"text-xs font-medium leading-4 text-media-on-surface\"\n style={{ fontVariant: ['tabular-nums'] }}\n >\n {formatTime(position)} / {formatTime(duration)}\n </Text>\n {onToggleFullscreen && (\n <Pressable\n accessibilityRole=\"button\"\n accessibilityLabel={fullscreen ? 'Sair da tela cheia' : 'Tela cheia'}\n onPress={onToggleFullscreen}\n className={button}\n >\n {fullscreen ? (\n <MinimizeIcon color={onSurface} />\n ) : (\n <MaximizeIcon color={onSurface} />\n )}\n </Pressable>\n )}\n </View>\n {/* 32px de altura para o dedo acertar a barra de 4px; sobe 8px sobre a folga do botão acima. */}\n <View {...seek.props} className=\"-mt-2 mx-4 h-8 justify-center\">\n {/* Filhos ignoram toques para que `locationX` seja sempre relativo à barra. */}\n <View pointerEvents=\"none\" className=\"h-1 w-full rounded-full bg-media-on-surface/30\">\n <View\n className=\"h-full rounded-full bg-media-accent\"\n style={{ width: `${progress}%` }}\n />\n <View\n className=\"absolute -top-1 size-3 rounded-full bg-media-accent\"\n style={{ left: `${progress}%`, marginLeft: -6 }}\n />\n </View>\n </View>\n </View>\n </View>\n </View>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"video-player.js","names":[],"sources":["../../../src/components/video-player/video-player.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport {\n cloneElement,\n isValidElement,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { AccessibilityInfo, Pressable, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { formatTime, useSeek } from '../_shared/media'\nimport { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\n\nexport type VideoPlayerProps = Omit<ViewProps, 'style'> & {\n className?: string\n /** A superfície de vídeo (ex.: o `VideoView` do `expo-video`), que preenche o player. */\n children: ReactNode\n /** Nome acessível do player. */\n label?: string\n /** Tocando agora: mostra o botão de pausar e esconde o play central. */\n playing?: boolean\n /** Posição atual, em segundos. */\n position?: number\n /** Duração total, em segundos. */\n duration?: number\n /**\n * Em tela cheia: mostra o ícone de sair. Só vale com `onToggleFullscreen`. Ligue ao estado do\n * vídeo (`onFullscreenEnter`/`onFullscreenExit` do `VideoView`): no iOS, é com ele que o\n * `VideoPlayer` liga os controles do sistema na tela cheia.\n */\n fullscreen?: boolean\n onPlayPause?: () => void\n /** Chamado com a posição (em segundos) tocada ou arrastada na barra. */\n onSeek?: (seconds: number) => void\n /** Sem ele, o botão de tela cheia não aparece. */\n onToggleFullscreen?: () => void\n /** Tempo sem interação, em ms, até esconder os controles durante a reprodução. Padrão: 2500. */\n hideControlsAfter?: number\n}\n\n// 44px: o mínimo de área de toque recomendado no iOS (Apple HIG) e perto dos 48dp do Android.\nconst button =\n 'size-11 shrink-0 items-center justify-center rounded-full active:bg-media-on-surface/15'\n\n/**\n * Casca de player de vídeo: play/pause central, posição, tempo e tela cheia sobre o seu vídeo.\n * Não toca nada: quem usa guarda o estado (por exemplo com `expo-video`) e o passa por props,\n * ligando os `on…` ao player de verdade. Tocar no vídeo mostra ou esconde os controles, que também\n * somem sozinhos depois de um tempo sem toques enquanto toca (com leitor de tela ligado, ficam).\n */\nexport function VideoPlayer({\n className,\n children,\n label = 'Vídeo',\n playing = false,\n position = 0,\n duration = 0,\n fullscreen = false,\n onPlayPause,\n onSeek,\n onToggleFullscreen,\n hideControlsAfter = 2500,\n ...props\n}: VideoPlayerProps) {\n const [active, setActive] = useState(true)\n const [screenReader, setScreenReader] = useState(false)\n const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n const onSurface = useToken('--color-media-on-surface')\n const accent = useToken('--color-interactive-primary')\n const seek = useSeek({ position, duration, label: 'Posição do vídeo', onSeek })\n const visible = active || !playing || screenReader\n const progress = duration ? Math.min(position / duration, 1) * 100 : 0\n const ended = !playing && duration > 0 && position >= duration - 0.1\n // Em tela cheia o vídeo sai do player e os nossos controles não vão junto: ligamos os do sistema.\n // No iOS eles precisam estar ligados antes de abrir, então `entering` vem antes do `onToggleFullscreen`.\n const [entering, setEntering] = useState(false)\n const toggleFullscreen = useRef(onToggleFullscreen)\n toggleFullscreen.current = onToggleFullscreen\n const nativeControls = entering || fullscreen\n\n useEffect(() => {\n AccessibilityInfo.isScreenReaderEnabled().then(setScreenReader)\n const subscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReader)\n return () => subscription.remove()\n }, [])\n\n const hide = () => {\n clearTimeout(timer.current)\n setActive(false)\n }\n\n const show = useCallback(() => {\n setActive(true)\n clearTimeout(timer.current)\n timer.current = setTimeout(() => setActive(false), hideControlsAfter)\n }, [hideControlsAfter])\n\n useEffect(() => {\n if (playing) show()\n else setActive(true)\n return () => clearTimeout(timer.current)\n }, [playing, show])\n\n useEffect(() => {\n if (!entering) return\n toggleFullscreen.current?.()\n // ponytail: se `fullscreen` nunca for ligado ao estado, os controles do sistema voltam a sumir após 2s\n const done = setTimeout(() => setEntering(false), 2000)\n return () => clearTimeout(done)\n }, [entering])\n\n // No expo-video, `play()` no fim do vídeo não faz nada: volta ao começo antes.\n const playPause = () => {\n if (ended) onSeek?.(0)\n onPlayPause?.()\n }\n\n return (\n <View\n accessibilityLabel={label}\n className={cn(\n 'aspect-video w-full overflow-hidden rounded-lg bg-media-surface shadow-lg',\n className,\n )}\n {...props}\n >\n <View pointerEvents=\"none\" className=\"absolute inset-0\">\n {isValidElement<{ nativeControls?: boolean }>(children) &&\n children.props.nativeControls !== undefined\n ? cloneElement(children, {\n nativeControls: nativeControls || children.props.nativeControls,\n })\n : children}\n </View>\n {/* Tocar no vídeo só mostra/esconde os controles: pausar sem querer é o erro mais comum no celular. */}\n <Pressable\n accessible={false}\n onPress={() => {\n if (!playing) return\n if (visible) hide()\n else show()\n }}\n className=\"absolute inset-0\"\n >\n {visible && <View pointerEvents=\"none\" className=\"absolute inset-0 bg-media-surface/40\" />}\n </Pressable>\n <View\n pointerEvents={visible ? 'box-none' : 'none'}\n importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}\n accessibilityElementsHidden={!visible}\n className={cn('absolute inset-0', !visible && 'opacity-0')}\n >\n <View pointerEvents=\"box-none\" className=\"absolute inset-0 items-center justify-center\">\n <Pressable\n accessibilityRole=\"button\"\n accessibilityLabel={playing ? 'Pausar' : 'Reproduzir'}\n onPress={() => {\n playPause()\n show()\n }}\n className=\"size-14 items-center justify-center rounded-full bg-media-on-surface shadow-lg active:opacity-80\"\n >\n {playing ? (\n <PauseIcon filled size={24} color={accent} />\n ) : (\n <PlayIcon filled size={24} color={accent} />\n )}\n </Pressable>\n </View>\n <View pointerEvents=\"box-none\" className=\"absolute inset-x-0 bottom-0\">\n <View\n pointerEvents=\"box-none\"\n className=\"h-11 flex-row items-center justify-between pl-4 pr-1\"\n >\n <Text\n accessible={false}\n className=\"text-xs font-medium leading-4 text-media-on-surface\"\n style={{ fontVariant: ['tabular-nums'] }}\n >\n {formatTime(position)} / {formatTime(duration)}\n </Text>\n {onToggleFullscreen && (\n <Pressable\n accessibilityRole=\"button\"\n accessibilityLabel={fullscreen ? 'Sair da tela cheia' : 'Tela cheia'}\n onPress={() => (fullscreen ? onToggleFullscreen() : setEntering(true))}\n className={button}\n >\n {fullscreen ? (\n <MinimizeIcon color={onSurface} />\n ) : (\n <MaximizeIcon color={onSurface} />\n )}\n </Pressable>\n )}\n </View>\n {/* 32px de altura para o dedo acertar a barra de 4px; sobe 8px sobre a folga do botão acima. */}\n <View {...seek.props} className=\"-mt-2 mx-4 h-8 justify-center\">\n {/* Filhos ignoram toques para que `locationX` seja sempre relativo à barra. */}\n <View pointerEvents=\"none\" className=\"h-1 w-full rounded-full bg-media-on-surface/30\">\n <View\n className=\"h-full rounded-full bg-media-accent\"\n style={{ width: `${progress}%` }}\n />\n <View\n className=\"absolute -top-1 size-3 rounded-full bg-media-accent\"\n style={{ left: `${progress}%`, marginLeft: -6 }}\n />\n </View>\n </View>\n </View>\n </View>\n </View>\n )\n}\n"],"mappings":"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"}
|