Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added 2x speed gesture on longpress right side of player and updated … #151

Merged
merged 3 commits into from
Nov 21, 2024
Merged

added 2x speed gesture on longpress right side of player and updated … #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c815804
added 2x speed gesture on longpress right side of player and updated …
KPateL-DW Nov 17, 2024
2e10053
added comment
KirtiPatel79 Nov 18, 2024
684f357
added view to enable/disable gesture
KirtiPatel79 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 47 additions & 23 deletions src/components/SeasonList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,29 +201,53 @@ const SeasonList = ({

return (
<View>
<Dropdown
selectedTextStyle={{color: primary, overflow: 'hidden', height: 22}}
labelField={'title'}
valueField={LinkList[0]?.episodesLink ? 'episodesLink' : 'directLinks'}
onChange={item => {
setActiveSeason(item);
MmmkvCache.setMap(`ActiveSeason${metaTitle + providerValue}`, item);
}}
value={ActiveSeason}
data={LinkList}
style={{overflow: 'hidden'}}
containerStyle={{borderColor: 'black'}}
renderItem={item => {
return (
<View
className={`p-2 bg-black text-white flex-row justify-start gap-2 items-center border border-b border-gray-500 text-center ${
ActiveSeason === item ? 'bg-quaternary' : ''
}`}>
<Text className=" text-white">{item.title}</Text>
</View>
);
}}
/>
{LinkList.length > 1 ? (
<Dropdown
selectedTextStyle={{
color: primary,
overflow: 'hidden',
height: 20,
fontWeight: 'bold',
}}
labelField={'title'}
valueField={LinkList[0]?.episodesLink ? 'episodesLink' : 'directLinks'}
onChange={item => {
setActiveSeason(item);
MmmkvCache.setMap(`ActiveSeason${metaTitle + providerValue}`, item);
}}
value={ActiveSeason}
data={LinkList}
style={{
overflow: 'hidden',
borderWidth: 1,
borderColor: 'gray',
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'black',
}}
containerStyle={{
overflow: 'hidden',
borderWidth: 1,
borderColor: 'gray',
borderRadius: 8,
backgroundColor: 'black',
}}
renderItem={item => {
return (
<View
className={`px-3 py-2 bg-black text-white flex-row justify-start items-center border-b border-gray-500 text-center ${
ActiveSeason === item ? 'bg-quaternary' : ''
}`}>
<Text className="text-white">{item.title}</Text>
</View>
);
}}
/>
) : (
<Text className="text-red-600 text-lg font-semibold px-2">
{LinkList[0]?.title}
</Text>
)}
<View className="flex-row flex-wrap justify-center gap-x-2 gap-y-2">
{/* episodesLinks */}
{episodeList.length > 0 && !episodeLoading && (
Expand Down
50 changes: 25 additions & 25 deletions src/screens/home/Info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,17 +287,17 @@ export default function Info({route, navigation}: Props): React.JSX.Element {
Cast
</Text>
<View className="flex-row gap-1 flex-wrap">
{meta?.cast?.slice(0, 3).map((actor: string) => (
{meta?.cast?.slice(0, 3).map((actor: string, index: number) => (
<Text
key={actor}
className="text-white text-xs bg-tertiary p-1 px-2 rounded-md">
className={`text-xs bg-tertiary p-1 px-2 rounded-md ${index % 3 === 0 ? 'text-red-500' : index % 3 === 1 ? 'text-blue-500' : 'text-green-500'}`}>
{actor}
</Text>
))}
{info?.cast?.slice(0, 3).map((actor: string) => (
{info?.cast?.slice(0, 3).map((actor: string, index: number) => (
<Text
key={actor}
className="text-white text-xs bg-tertiary p-1 px-2 rounded-md">
className={`text-xs bg-tertiary p-1 px-2 rounded-md ${index % 3 === 0 ? 'text-red-500' : index % 3 === 1 ? 'text-blue-500' : 'text-green-500'}`}>
{actor}
</Text>
))}
Expand All @@ -306,16 +306,16 @@ export default function Info({route, navigation}: Props): React.JSX.Element {
)}
{/* synopsis */}
<View className="mb-2 w-full flex-row items-center justify-between">
<Skeleton show={infoLoading} colorMode="dark" width={180}>
<View className="flex-row items-center gap-2">
<Text className="text-white text-xl font-semibold">
Synopsis
</Text>
<Text className="text-white text-xs bg-tertiary p-1 px-2 rounded-md">
{route.params.provider || provider.value}
</Text>
</View>
</Skeleton>
{/* <Skeleton show={infoLoading} colorMode="dark" width={180}> */}
<View className="flex-row items-center gap-2">
<Text className="text-white text-lg font-semibold">
Synopsis
</Text>
<Text className="text-white text-xs bg-tertiary p-1 px-2 rounded-md">
{route.params.provider || provider.value}
</Text>
</View>
{/* </Skeleton> */}
<View className="flex-row items-center gap-4 mb-1">
{meta?.trailers && meta?.trailers.length > 0 && (
<MaterialCommunityIcons
Expand Down Expand Up @@ -414,17 +414,17 @@ export default function Info({route, navigation}: Props): React.JSX.Element {
}
</View>
</View>
<Skeleton show={infoLoading} colorMode="dark" height={20}>
<Text className="text-white text-xs px-1">
{meta?.description
? meta?.description.length > 180
? meta?.description.slice(0, 180) + '...'
: meta?.description
: info?.synopsis?.length! > 180
? info?.synopsis.slice(0, 180) + '...'
: info?.synopsis || 'No synopsis available'}
</Text>
</Skeleton>
{/* <Skeleton show={infoLoading} colorMode="dark" height={20}> */}
<Text className="text-gray-200 text-sm px-2 py-1 bg-tertiary rounded-md">
{meta?.description
? meta?.description.length > 180
? meta?.description.slice(0, 180) + '...'
: meta?.description
: info?.synopsis?.length! > 180
? info?.synopsis.slice(0, 180) + '...'
: info?.synopsis || 'No synopsis available'}
</Text>
{/* </Skeleton> */}
{/* cast */}
</View>
<View className="p-4 bg-black">
Expand Down
75 changes: 74 additions & 1 deletion src/screens/home/Player.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
StatusBar,
Platform,
} from 'react-native';
import {Easing} from 'react-native-reanimated';
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {NativeStackScreenProps} from '@react-navigation/native-stack';
import {RootStackParamList} from '../../App';
Expand Down Expand Up @@ -94,6 +95,7 @@ const Player = ({route}: Props): React.JSX.Element => {
);

const [playbackRate, setPlaybackRate] = useState(1);
const [twoxgesture,setTwoxgesture]=useState(false);

// constants
const playbacks = [0.25, 0.5, 1, 1.25, 1.5, 1.75, 2];
Expand Down Expand Up @@ -290,6 +292,8 @@ const Player = ({route}: Props): React.JSX.Element => {
[activeEpisode.link],
);

const [isTextVisible, setIsTextVisible] = useState(false);

return (
<SafeAreaView
edges={{
Expand Down Expand Up @@ -401,17 +405,84 @@ const Player = ({route}: Props): React.JSX.Element => {
selectedVideoTrack={selectedVideoTrack}
style={{flex: 1, zIndex: 100}}
/>
{/*2x speed gesture*/}
{loading === false && !Platform.isTV && twoxgesture && (
<TouchableOpacity
onLongPress={() => {
setPlaybackRate(2);
setIsTextVisible(true);
}}
onPressOut={() => {
setPlaybackRate(1);
setIsTextVisible(false);
}}
style={{
position: 'absolute',
top: '20%',
bottom: 0,
right: 0,
width: '20%',
height: '60%', // Adjust as per your requirement
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
}}>
{isTextVisible && (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
paddingHorizontal: 5,
paddingVertical: 2,
borderRadius: 5,
}}>
<MotiView
animate={{opacity: [1, 0, 1]}}
transition={{
repeat: Infinity,
duration: 300,
loop: true,
easing: Easing.inOut(Easing.ease),
}}>
<MaterialIcons name="fast-forward" size={40} color="black" />
</MotiView>
<Text
style={{
color: 'black',
fontSize: 16,
fontWeight: 'bold',
}}>
2x
</Text>
</View>
)}
</TouchableOpacity>
)}
{/* // cast button */}
{loading === false && !Platform.isTV && (
<MotiView
from={{translateY: 0}}
animate={{translateY: showControls ? 0 : -300}}
//@ts-ignore
transition={{type: 'timing', duration: 190}}
className="absolute top-5 right-20">
className="absolute top-5 right-20 flex-row items-center">
<CastButton
style={{width: 40, height: 40, opacity: 0.7, tintColor: 'white'}}
/>
{/* Button to set playback rate to 2 */}
<TouchableOpacity
onPress={() => setTwoxgesture(!twoxgesture)}
className={`${
twoxgesture ? 'bg-white' : 'bg-black'
} ml-2 px-4 py-1 rounded`}>
<Text
className={`${
twoxgesture ? 'text-black' : 'text-white'
} font-semibold}`}>
{twoxgesture ? '2x-Disable' : '2x-Enable'}
</Text>
</TouchableOpacity>
</MotiView>
)}

Expand Down Expand Up @@ -817,3 +888,5 @@ const Player = ({route}: Props): React.JSX.Element => {
};

export default Player;

export default Player;