mirror of
https://github.com/zoriya/react-native-video.git
synced 2026-08-16 02:56:22 +00:00
chore: lint code
This commit is contained in:
+29
-22
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Dimensions, Platform, StyleSheet, View } from 'react-native';
|
||||
import { Button, Dimensions, StyleSheet, View } from 'react-native';
|
||||
import { VideoView, createSource, useVideoPlayer } from 'react-native-video';
|
||||
|
||||
export default function App() {
|
||||
@@ -10,32 +10,39 @@ export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.videoContainer}>
|
||||
{/* <VideoView player={player} style={styles.box} /> */}
|
||||
{/* Two VideoViews with same player are supported not supported on Android */}
|
||||
{show && (
|
||||
<VideoView player={player} style={styles.box} />
|
||||
)}
|
||||
{show && <VideoView player={player} style={styles.box} />}
|
||||
</View>
|
||||
<Button title="Play" onPress={() => player.play()} />
|
||||
<Button title="Pause" onPress={() => player.pause()} />
|
||||
<Button title="Seek to 3sec" onPress={() => player.currentTime = 3} />
|
||||
<Button title="Seek to 3sec" onPress={() => (player.currentTime = 3)} />
|
||||
<Button title="Toggle" onPress={() => setShow((prev) => !prev)} />
|
||||
<Button title="Preload player" onPress={() => {
|
||||
player.preload().then(() => {
|
||||
// setShow(true);
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}} />
|
||||
<Button title="Replace source" onPress={() => {
|
||||
const newSource = createSource("https://www.w3schools.com/html/mov_bbb.mp4")
|
||||
|
||||
newSource.getAssetInformationAsync().then((assetInfo) => {
|
||||
console.log(assetInfo);
|
||||
})
|
||||
<Button
|
||||
title="Preload player"
|
||||
onPress={() => {
|
||||
player
|
||||
.preload()
|
||||
.then(() => {
|
||||
// setShow(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
title="Replace source"
|
||||
onPress={() => {
|
||||
const newSource = createSource(
|
||||
'https://www.w3schools.com/html/mov_bbb.mp4'
|
||||
);
|
||||
|
||||
player.replaceSourceAsync(newSource);
|
||||
}} />
|
||||
newSource.getAssetInformationAsync().then((assetInfo) => {
|
||||
console.log(assetInfo);
|
||||
});
|
||||
|
||||
player.replaceSourceAsync(newSource);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
+1
-1
@@ -3,4 +3,4 @@ export { useVideoPlayer } from './utils/useVideoPlayer';
|
||||
export { createPlayer, createSource } from './utils/factory';
|
||||
|
||||
export type { VideoPlayer } from './spec/nitro/VideoPlayer.nitro';
|
||||
export type { VideoSource } from './types/VideoConfig';
|
||||
export type { VideoSource } from './types/VideoConfig';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export type VideoSource = number | string;
|
||||
|
||||
export type VideoConfig = {
|
||||
uri: VideoSource;
|
||||
}
|
||||
uri: VideoSource;
|
||||
};
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
export type VideoOrientation = "portrait" | "landscape" | "portrait-upside-down" | "landscape-left" | "landscape-right" | "unknown";
|
||||
export type VideoOrientation =
|
||||
| 'portrait'
|
||||
| 'landscape'
|
||||
| 'portrait-upside-down'
|
||||
| 'landscape-left'
|
||||
| 'landscape-right'
|
||||
| 'unknown';
|
||||
|
||||
export interface VideoInformation {
|
||||
/**
|
||||
@@ -41,4 +47,4 @@ export interface VideoInformation {
|
||||
* see {@link VideoOrientation}
|
||||
*/
|
||||
orientation: VideoOrientation;
|
||||
}
|
||||
}
|
||||
|
||||
+18
-9
@@ -1,8 +1,11 @@
|
||||
import { NitroModules } from "react-native-nitro-modules";
|
||||
import type { VideoPlayer, VideoPlayerFactory } from '../spec/nitro/VideoPlayer.nitro';
|
||||
import { NitroModules } from 'react-native-nitro-modules';
|
||||
import type {
|
||||
VideoPlayer,
|
||||
VideoPlayerFactory,
|
||||
} from '../spec/nitro/VideoPlayer.nitro';
|
||||
import type { VideoPlayerSourceFactory } from '../spec/nitro/VideoPlayerSource.nitro';
|
||||
import type { VideoConfig, VideoSource } from "../types/VideoConfig";
|
||||
import { Image } from "react-native";
|
||||
import type { VideoConfig, VideoSource } from '../types/VideoConfig';
|
||||
import { Image } from 'react-native';
|
||||
|
||||
// ----------- Factories -----------
|
||||
const VideoPlayerSourceFactory =
|
||||
@@ -14,20 +17,26 @@ const VideoPlayerFactory =
|
||||
NitroModules.createHybridObject<VideoPlayerFactory>('VideoPlayerFactory');
|
||||
|
||||
// ----------- Factories functions -----------
|
||||
export const createPlayer = (source: VideoSource | VideoConfig): VideoPlayer => {
|
||||
export const createPlayer = (
|
||||
source: VideoSource | VideoConfig
|
||||
): VideoPlayer => {
|
||||
// If source is a string, we can directly create the player
|
||||
if (typeof source === 'string') {
|
||||
return VideoPlayerFactory.createPlayer(VideoPlayerSourceFactory.fromUri(source));
|
||||
return VideoPlayerFactory.createPlayer(
|
||||
VideoPlayerSourceFactory.fromUri(source)
|
||||
);
|
||||
}
|
||||
|
||||
// If source is a number (asset), we need to resolve the asset source and create the player
|
||||
if (typeof source === 'number') {
|
||||
return VideoPlayerFactory.createPlayer(VideoPlayerSourceFactory.fromUri(Image.resolveAssetSource(source).uri));
|
||||
return VideoPlayerFactory.createPlayer(
|
||||
VideoPlayerSourceFactory.fromUri(Image.resolveAssetSource(source).uri)
|
||||
);
|
||||
}
|
||||
|
||||
// If source is an object (VideoConfig)
|
||||
if (typeof source === 'object' && 'uri' in source) {
|
||||
return createPlayer(source.uri)
|
||||
return createPlayer(source.uri);
|
||||
}
|
||||
|
||||
throw new Error('RNV: Invalid source type');
|
||||
@@ -35,4 +44,4 @@ export const createPlayer = (source: VideoSource | VideoConfig): VideoPlayer =>
|
||||
|
||||
export const createSource = (uri: string) => {
|
||||
return VideoPlayerSourceFactory.fromUri(uri);
|
||||
};
|
||||
};
|
||||
|
||||
+13
-16
@@ -1,25 +1,22 @@
|
||||
import type { VideoPlayer } from "../spec/nitro/VideoPlayer.nitro";
|
||||
import { useReleasingHybridObject } from "./useReleasingHybridObject";
|
||||
import { createPlayer } from "./factory";
|
||||
import type { VideoConfig, VideoSource } from "../types/VideoConfig";
|
||||
import type { VideoPlayer } from '../spec/nitro/VideoPlayer.nitro';
|
||||
import { useReleasingHybridObject } from './useReleasingHybridObject';
|
||||
import { createPlayer } from './factory';
|
||||
import type { VideoConfig, VideoSource } from '../types/VideoConfig';
|
||||
|
||||
/**
|
||||
* A hook that creates and manages a video player.
|
||||
*
|
||||
*
|
||||
* @param source - The source of the video.
|
||||
* @param setup - A function that allow to setup the video player after it is created.
|
||||
* @returns VideoPlayer (see {@link VideoPlayer})
|
||||
*/
|
||||
export const useVideoPlayer = (
|
||||
source: VideoConfig | VideoSource,
|
||||
setup?: (player: VideoPlayer) => void
|
||||
source: VideoConfig | VideoSource,
|
||||
setup?: (player: VideoPlayer) => void
|
||||
) => {
|
||||
return useReleasingHybridObject(
|
||||
() => {
|
||||
const videoPlayer = createPlayer(source);
|
||||
setup?.(videoPlayer);
|
||||
return videoPlayer;
|
||||
},
|
||||
[source]
|
||||
);
|
||||
}
|
||||
return useReleasingHybridObject(() => {
|
||||
const videoPlayer = createPlayer(source);
|
||||
setup?.(videoPlayer);
|
||||
return videoPlayer;
|
||||
}, [source]);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user