movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 17:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: load video from providers

Browse Source
This commit is contained in:
Adrian Castro
2024-02-05 12:27:46 +01:00
parent 8976b939b6
commit 552b9b52bc
10 changed files with 244 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/expo/app.config.ts
View File

@@ -19,7 +19,7 @@ const defineConfig = (): ExpoConfig => ({
ios: {
bundleIdentifier: "dev.movieweb.app",
supportsTablet: true,
requireFullScreen: true,
requireFullScreen: true,
},
android: {
package: "dev.movieweb.app",
@@ -41,13 +41,15 @@ const defineConfig = (): ExpoConfig => ({
tsconfigPaths: true,
typedRoutes: true,
},
plugins: ["expo-router", [
"expo-screen-orientation",
{
initialOrientation: "DEFAULT"
}
]
],
plugins: [
"expo-router",
[
"expo-screen-orientation",
{
initialOrientation: "DEFAULT",
},
],
],
});
export default defineConfig;

3
apps/expo/index.js
View File

@@ -1 +1,2 @@
import "expo-router/entry";
import "expo-router/entry";
import "@react-native-anywhere/polyfill-base64";

3
apps/expo/package.json
View File

@@ -19,7 +19,10 @@
},
"dependencies": {
"@expo/metro-config": "^0.17.3",
"@movie-web/provider-utils": "*",
"@movie-web/tmdb": "*",
"@react-native-anywhere/polyfill-base64": "0.0.1-alpha.0",
"@react-navigation/native": "^6.1.9",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"expo": "~50.0.5",

92
apps/expo/src/app/components/item/item.tsx
View File

@@ -1,5 +1,12 @@
import { Image, TouchableOpacity, View } from "react-native";
import { useRouter } from "expo-router";
import { Image, View, TouchableOpacity } from "react-native";
import * as ScreenOrientation from "expo-screen-orientation";
import {
getVideoUrl,
transformSearchResultToScrapeMedia,
} from "@movie-web/provider-utils";
import { fetchMediaDetails } from "@movie-web/tmdb";
import { Text } from "~/components/ui/Text";
@@ -13,38 +20,67 @@ export interface ItemData {
export default function Item({ data }: { data: ItemData }) {
const router = useRouter();
const { title, type, year, posterUrl } = data;
const { id, title, type, year, posterUrl } = data;
const handlePress = () => {
router.push('/video-player');
// router.push({
// pathname: '/video-player',
// params: { videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4' }
// });
const handlePress = async () => {
router.push("/video-player");
const media = await fetchMediaDetails(id, type);
if (!media) return;
const { result } = media;
let season: number | undefined;
let episode: number | undefined;
if (type === "tv") {
// season = <chosen by user> ?? undefined;
// episode = <chosen by user> ?? undefined;
}
const scrapeMedia = transformSearchResultToScrapeMedia(
type,
result,
season,
episode,
);
const videoUrl = await getVideoUrl(scrapeMedia);
if (!videoUrl) {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
return router.push("/(tabs)");
}
console.log(videoUrl);
router.push({
pathname: "/video-player",
params: { videoUrl },
});
};
return (
<TouchableOpacity onPress={handlePress} style={{ width: '100%' }}>
<TouchableOpacity onPress={handlePress} style={{ width: "100%" }}>
{
<View className="w-full">
<View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
<Image
source={{
uri: posterUrl,
}}
className="h-full w-full"
/>
</View>
<Text className="font-bold">{title}</Text>
<View className="flex-row items-center gap-3">
<Text className="text-xs text-gray-600">
{type === "tv" ? "Show" : "Movie"}
</Text>
<View className="h-1 w-1 rounded-3xl bg-gray-600" />
<Text className="text-sm text-gray-600">{year}</Text>
</View>
</View>
}
<View className="w-full">
<View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
<Image
source={{
uri: posterUrl,
}}
className="h-full w-full"
/>
</View>
<Text className="font-bold">{title}</Text>
<View className="flex-row items-center gap-3">
<Text className="text-xs text-gray-600">
{type === "tv" ? "Show" : "Movie"}
</Text>
<View className="h-1 w-1 rounded-3xl bg-gray-600" />
<Text className="text-sm text-gray-600">{year}</Text>
</View>
</View>
}
</TouchableOpacity>
);
}

92
apps/expo/src/app/video-player.tsx
View File

@@ -1,10 +1,10 @@
import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { VideoRef } from 'react-native-video';
import Video from 'react-native-video';
import * as ScreenOrientation from 'expo-screen-orientation';
import type { VideoRef } from "react-native-video";
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Video from "react-native-video";
import { useLocalSearchParams } from "expo-router";
import * as ScreenOrientation from "expo-screen-orientation";
interface VideoPlayerState {
videoUrl: string;
@@ -14,53 +14,57 @@ interface VideoPlayerState {
}
interface VideoPlayerProps {
videoUrl: string;
videoUrl: string;
}
export default function VideoPlayerWrapper() {
const params = useLocalSearchParams();
const videoUrl = typeof params.videoUrl === 'string' ? params.videoUrl : '';
return <VideoPlayer videoUrl={videoUrl} />;
}
const params = useLocalSearchParams();
const videoUrl = typeof params.videoUrl === "string" ? params.videoUrl : "";
return <VideoPlayer videoUrl={videoUrl} />;
}
class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
private videoPlayer: React.RefObject<VideoRef>;
class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
private videoPlayer: React.RefObject<VideoRef>;
constructor(props: VideoPlayerProps) {
constructor(props: VideoPlayerProps) {
super(props);
this.state = {
videoUrl: props.videoUrl || '',
videoUrl: props.videoUrl || "",
fullscreen: true,
isLoading: true,
paused: false
paused: false,
};
this.videoPlayer = React.createRef();
}
componentDidMount() {
const lockOrientation = async () => {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
};
const { videoUrl } = this.props;
this.setState({ videoUrl }, () => {
if (this.videoPlayer.current) {
this.videoPlayer.current.presentFullscreenPlayer();
void lockOrientation();
}
});
const lockOrientation = async () => {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE,
);
};
const { videoUrl } = this.props;
this.setState({ videoUrl }, () => {
if (this.videoPlayer.current) {
this.videoPlayer.current.presentFullscreenPlayer();
void lockOrientation();
}
});
}
componentWillUnmount() {
const unlockOrientation = async () => {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
}
const unlockOrientation = async () => {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP,
);
};
if (this.videoPlayer.current) {
this.videoPlayer.current.dismissFullscreenPlayer();
}
void unlockOrientation();
if (this.videoPlayer.current) {
this.videoPlayer.current.dismissFullscreenPlayer();
}
void unlockOrientation();
}
onVideoLoadStart = () => {
@@ -71,9 +75,9 @@ export default function VideoPlayerWrapper() {
this.setState({ isLoading: false });
};
// onVideoError = () => { // probably useful later
// console.log("Video playback error");
// };
// onVideoError = () => { // probably useful later
// console.log("Video playback error");
// };
render() {
return (
@@ -84,7 +88,7 @@ export default function VideoPlayerWrapper() {
style={styles.fullScreen}
fullscreen={this.state.fullscreen}
paused={this.state.paused}
controls={true}
controls={true}
onLoadStart={this.onVideoLoadStart}
onReadyForDisplay={this.onReadyForDisplay}
// onError={this.onVideoError}
@@ -98,18 +102,18 @@ export default function VideoPlayerWrapper() {
}
const styles = StyleSheet.create({
// taken from example, probably needs to be nativewind stuff instead
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
fullScreen: {
position: 'absolute',
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});