Skip to content

Commit

Permalink
refactor(frontend): continued to change the active room page front
Browse files Browse the repository at this point in the history
  • Loading branch information
TheRealSharKzy committed Apr 9, 2024
1 parent ce16f26 commit e00d2a6
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 68 deletions.
54 changes: 30 additions & 24 deletions expo/components/ActiveRoomView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link, router } from "expo-router";
import DoorOpen from "phosphor-react-native/src/icons/DoorOpen";
import Gear from "phosphor-react-native/src/icons/Gear";
import Plus from "phosphor-react-native/src/icons/Plus";
import Share from "phosphor-react-native/src/icons/Share";
import { useEffect, useState } from "react";
import {
ActivityIndicator,
Expand Down Expand Up @@ -143,8 +144,8 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
const networkStatus = useNetworkStatus();

return (
<ScrollView
contentContainerStyle={{
<View
style={{
paddingVertical: 32,
paddingHorizontal: 12,
minHeight: "100%",
Expand All @@ -171,21 +172,30 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
)}
{room && liveRoom && socket && socket.connected && (
<>
<View style={headerStyles.headerContainer}>
<H1>"{room.name}"</H1>
{isHost ? (
<Link href={`/rooms/${room.id}/settings`}>
<Gear size={32} color="black" />
</Link>
) : (
<Pressable onPress={showDialog} style={headerStyles.settingsIcon}>
<DoorOpen size={28} color="black" />
</Pressable>
)}
<View style={headerStyles.buttonContainer}>
<Button block href={`/rooms/${room.id}/invite`}>
Inviter des amis
</Button>
<ScrollView contentContainerStyle={headerStyles.headerContainer}>
<View
style={[
{ flexDirection: "row", justifyContent: "space-between" },
]}
>
<H1>{room.name}</H1>
<View style={{ flexDirection: "row" }}>
<Link href={`/rooms/${room.id}/invite`}>
<Share size={32} color="black" />
</Link>
{isHost ? (
<Link href={`/rooms/${room.id}/settings`}>
<Gear size={32} color="black" />
</Link>
) : (
<Pressable
onPress={showDialog}
style={headerStyles.settingsIcon}
>
<DoorOpen size={28} color="black" />
</Pressable>
)}
</View>
</View>
<RoomPlayer socket={socket} room={room} />
<Text style={styles.title}>
Expand Down Expand Up @@ -216,12 +226,7 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
)}
/>
)}
</View>
<View style={headerStyles.buttonContainer}>
<Button block href={`/rooms/${room.id}/invite`}>
Inviter des amis
</Button>
</View>
</ScrollView>

<Button
icon={<Plus />}
Expand All @@ -232,7 +237,7 @@ const ActiveRoomView: React.FC<ActiveRoomViewProps> = ({ room }) => {
</Button>
</>
)}
</ScrollView>
</View>
);
};

Expand Down Expand Up @@ -306,6 +311,7 @@ const styles = StyleSheet.create({
fontStyle: "normal",
fontWeight: "700",
letterSpacing: 0.48,
marginTop: 32,
},
list: {
marginVertical: 12,
Expand Down
67 changes: 64 additions & 3 deletions expo/components/player/Player.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ import Button from "../Button";

type PlayerProps = {
state: PlayingJSONTrack | null;
isHost: boolean;
children?: React.ReactNode;
};

const blurhash =
"|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[";

const Player: React.FC<PlayerProps> = ({ state, children }) => {
const Player: React.FC<PlayerProps> = ({ state, isHost, children }) => {
const [voteSkipActualTrack, setVoteSkipActualTrack] =
useState<boolean>(false);
const socket = useWebSocket();
Expand All @@ -37,6 +38,12 @@ const Player: React.FC<PlayerProps> = ({ state, children }) => {
}
};

const formatDuration = (durationMs: number) => {
const minutes = Math.floor(durationMs / 60000);
const seconds = Math.floor((durationMs % 60000) / 1000);
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};

return (
<View style={styles.container}>
{state && (
Expand All @@ -47,7 +54,7 @@ const Player: React.FC<PlayerProps> = ({ state, children }) => {
alt={state.title}
style={styles.image}
/>
<View style={{ gap: 16 }}>
<View style={styles.trackInfo}>
<View>
<Text style={styles.title}>{state.title}</Text>
<View>
Expand All @@ -61,9 +68,38 @@ const Player: React.FC<PlayerProps> = ({ state, children }) => {
prependIcon={<ThumbsDown />}
size="small"
type={voteSkipActualTrack ? "filled" : "outline"}
style={{ gap: 8 }}
>
Voter pour passer
</Button>
{isHost && (
<View style={{ gap: 2 }}>
<View
style={[
{ flexDirection: "row", justifyContent: "space-between" },
]}
>
<Text style={styles.progressBarText}>
{formatDuration(state.currentTime)}
</Text>
<Text style={styles.progressBarText}>
{formatDuration(state.duration)}
</Text>
</View>
<View style={styles.progressContainer}>
<View style={styles.progressBar}>
<View
style={[
styles.progress,
{
width: `${(state.currentTime / state.duration) * 100}%`,
},
]}
/>
</View>
</View>
</View>
)}
</View>
</>
)}
Expand All @@ -75,7 +111,7 @@ const Player: React.FC<PlayerProps> = ({ state, children }) => {
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
alignItems: "flex-start",
gap: 10,
maxWidth: 500,
},
Expand All @@ -92,6 +128,31 @@ const styles = StyleSheet.create({
color: "#C3C3C3",
fontFamily: "Outfit-Medium",
},
trackInfo: {
gap: 16,
},
progress: {
height: "100%",
backgroundColor: "#000000",
borderRadius: 9999,
transition: "all 1s linear",
},
progressContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
width: 234,
},
progressBar: {
flex: 1,
height: 7,
backgroundColor: "#D1D5DB",
borderRadius: 9999,
},
progressBarText: {
fontFamily: "Outfit-Medium",
fontSize: 15,
},
});

export default Player;
32 changes: 8 additions & 24 deletions expo/components/player/PlayerControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Play from "phosphor-react-native/src/icons/Play";
import SkipBack from "phosphor-react-native/src/icons/SkipBack";
import SkipForward from "phosphor-react-native/src/icons/SkipForward";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

import { PlayerRemote } from "../../lib/audioRemote";
import Button from "../Button";
Expand Down Expand Up @@ -68,12 +68,6 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ state, remote }) => {
};

if (!state) return <></>;

function skipTo90() {
if (!state) return;
remote.seekTo(0.9 * state.duration);
}

return (
<View>
<View style={styles.progressContainer}>
Expand All @@ -91,14 +85,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ state, remote }) => {
<Text>{formatDuration(state.duration)}</Text>
</View>
<View style={styles.controls}>
<Button
onPress={handlePreviousTrack}
type="outline"
icon={<SkipBack weight="fill" />}
loading={loading.previous}
>
Previous
</Button>
<TouchableOpacity onPress={handlePreviousTrack}>
<SkipBack weight="fill" size={42} />
</TouchableOpacity>
<Button
onPress={handlePlayPause}
icon={state.isPlaying ? <Pause /> : <Play weight="fill" />}
Expand All @@ -107,14 +96,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ state, remote }) => {
>
{state.isPlaying ? "Pause" : "Play"}
</Button>
<Button
onPress={handleNextTrack}
type="outline"
icon={<SkipForward weight="fill" />}
loading={loading.next}
>
Next
</Button>
<TouchableOpacity onPress={handleNextTrack}>
<SkipForward weight="fill" size={42} />
</TouchableOpacity>
</View>
</View>
);
Expand All @@ -134,7 +118,7 @@ const styles = StyleSheet.create({
},
progressBar: {
flex: 1,
height: 4,
height: 7,
backgroundColor: "#D1D5DB",
borderRadius: 9999,
},
Expand Down
17 changes: 0 additions & 17 deletions expo/components/player/RoomPlayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import Player from "./Player";
import PlayerControls from "./PlayerControls";
import buildAudioRemote, { PlayerRemote } from "../../lib/audioRemote";
import { ActiveRoom } from "../../lib/useRoom";
import Button from "../Button";
import Warning from "../Warning";

type RoomPlayerProps = {
Expand Down Expand Up @@ -44,18 +43,6 @@ const RoomPlayer: React.FC<RoomPlayerProps> = ({ room, socket }) => {
});
}, [socket]);

const playCoolSong = async () => {
if (!remote) return;

if (room.streaming_services?.service_name === "Spotify") {
await remote.playTrack("spotify:track:6afdNrotJ1PCt9DoFiHpLj");
} else if (room.streaming_services?.service_name === "SoundCloud") {
await remote.playTrack(
"https://soundcloud.com/martingarrix/martin-garrix-lloyiso-real-love"
);
}
};

return (
<>
{error && <Warning label={error} variant="error" />}
Expand All @@ -73,10 +60,6 @@ const RoomPlayer: React.FC<RoomPlayerProps> = ({ room, socket }) => {
</View>
)}
</View>

<Button type="outline" onPress={playCoolSong}>
play Martin Garrix & Lloyiso - Real Love
</Button>
</>
);
};
Expand Down

0 comments on commit e00d2a6

Please sign in to comment.