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

nativewind not working on video player

Browse Source
This commit is contained in:
Jorrin
2024-02-12 02:39:19 +01:00
parent 08463222e5
commit c5a5fd8eb6
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/expo/src/app/videoPlayer.tsx
View File

@@ -4,7 +4,7 @@ import type {
TextTracks, TextTracks,
} from "react-native-video"; } from "react-native-video";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { ActivityIndicator, Platform, View } from "react-native"; import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
import Video, { TextTracksType } from "react-native-video"; import Video, { TextTracksType } from "react-native-video";
import { useLocalSearchParams, useRouter } from "expo-router"; import { useLocalSearchParams, useRouter } from "expo-router";
import * as ScreenOrientation from "expo-screen-orientation"; import * as ScreenOrientation from "expo-screen-orientation";
@@ -153,7 +153,6 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
ref={setVideoRef} ref={setVideoRef}
source={videoSrc} source={videoSrc}
// textTracks={textTracks} // breaks playback on iOS, see pr body // textTracks={textTracks} // breaks playback on iOS, see pr body
className="absolute inset-0"
fullscreen fullscreen
fullscreenOrientation="landscape" fullscreenOrientation="landscape"
paused={false} paused={false}
@@ -161,6 +160,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
useSecureView useSecureView
onLoadStart={onVideoLoadStart} onLoadStart={onVideoLoadStart}
onReadyForDisplay={onReadyForDisplay} onReadyForDisplay={onReadyForDisplay}
style={styles.backgroundVideo}
/> />
{isLoading && <ActivityIndicator size="large" color="#0000ff" />} {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
{!isLoading && <Header title="S8 E11 Rocky 8" />} {!isLoading && <Header title="S8 E11 Rocky 8" />}
@@ -197,3 +197,13 @@ function convertCaptionsToTextTracks(captions: Caption[]): TextTracks {
}) })
.filter(Boolean) as TextTracks; .filter(Boolean) as TextTracks;
} }
const styles = StyleSheet.create({
backgroundVideo: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});

2
apps/expo/src/components/player/Header.tsx
View File

@@ -13,7 +13,7 @@ export const Header = ({ title }: HeaderProps) => {
<View className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6"> <View className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
<BackButton className="w-36" /> <BackButton className="w-36" />
<Text className="font-bold">{title}</Text> <Text className="font-bold">{title}</Text>
<View className="flex w-36 flex-row items-center justify-center gap-2 space-x-2 rounded-full bg-secondary-300 px-4 py-2 opacity-50"> <View className="flex w-36 flex-row items-center justify-center gap-2 space-x-2 rounded-full bg-secondary-300 px-4 py-2 opacity-80">
<Image source={Icon} className="h-6 w-6" /> <Image source={Icon} className="h-6 w-6" />
<Text className="font-bold">movie-web</Text> <Text className="font-bold">movie-web</Text>
</View> </View>