diff --git a/src/Components/ChatPlaylistContainer/Playlist/Playlist.jsx b/src/Components/ChatPlaylistContainer/Playlist/Playlist.jsx index 56979db..bd95a0f 100644 --- a/src/Components/ChatPlaylistContainer/Playlist/Playlist.jsx +++ b/src/Components/ChatPlaylistContainer/Playlist/Playlist.jsx @@ -2,11 +2,11 @@ import React from 'react' import PlaylistItem from './PlaylistItem/PlaylistItem'; import './Playlist.scss' -function Playlist({playlist, ...props}) { +function Playlist({playlist, id, ...props}) { return (
{ - playlist.map((video) => ) + playlist.map((video) => ) }
) diff --git a/src/Components/ChatPlaylistContainer/Playlist/PlaylistItem/PlaylistItem.jsx b/src/Components/ChatPlaylistContainer/Playlist/PlaylistItem/PlaylistItem.jsx index d1f6559..0c9fa0c 100644 --- a/src/Components/ChatPlaylistContainer/Playlist/PlaylistItem/PlaylistItem.jsx +++ b/src/Components/ChatPlaylistContainer/Playlist/PlaylistItem/PlaylistItem.jsx @@ -1,11 +1,12 @@ import React from 'react' +import Socket from '../../../../Socket'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleUp, faTrashCan, faAngleDown } from '@fortawesome/free-solid-svg-icons' - +import { PLAYLIST_STATUS, SOCKET_EVENTS } from "../../../../Constants"; import './PlaylistItem.scss'; -function PlaylistItem({ id, username, link, moveUpVideo, moveDownVideo, removeVideo}) { +function PlaylistItem({ id, username, link, videoId}) { return (
@@ -19,9 +20,9 @@ function PlaylistItem({ id, username, link, moveUpVideo, moveDownVideo, removeVi {username}
- moveUpVideo(id)} /> - removeVideo(id)} /> - moveDownVideo(id)} /> + Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.MOVE_UP})} /> + Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.REMOVE})} /> + Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.MOVE_DOWN})} />
) diff --git a/src/Components/SendMessageInput/SendMessageInput.jsx b/src/Components/SendMessageInput/SendMessageInput.jsx index b1e689f..3ec4b39 100644 --- a/src/Components/SendMessageInput/SendMessageInput.jsx +++ b/src/Components/SendMessageInput/SendMessageInput.jsx @@ -1,13 +1,16 @@ -import { React, useContext } from "react"; +import { useContext, useState } from "react"; +import Socket from "../../Socket"; import TextInput from "../TextInput/TextInput"; +import { SOCKET_EVENTS } from "../../Constants"; +import { RoomContext } from "../../Contexts/RoomContext"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPaperPlane } from '@fortawesome/free-solid-svg-icons' -import { Context } from "../../Contexts/SendMessageInputContext"; import './SendMessageInput.scss' function SendMessageInput () { - const { setText, click, press } = useContext(Context); + const { room, user } = useContext(RoomContext); + const [text, setText] = useState("") let input = null const refSetter = (ref) => { @@ -18,7 +21,7 @@ function SendMessageInput () { if(input?.current?.value.trim() ==='') return; - click(event); + Socket.emit(SOCKET_EVENTS.SEND_MESSAGE, { id: room.id, text, user }); input.current.value = ''; } @@ -26,7 +29,7 @@ function SendMessageInput () { if(event.key === 'Enter'){ return clickHandler(event); } - press(event); + Socket.emit(SOCKET_EVENTS.TYPING, { id: room.id, username: user.username }); } return ( diff --git a/src/Components/VideoAdder/VideoAdder.jsx b/src/Components/VideoAdder/VideoAdder.jsx index 8ce419d..178acb3 100644 --- a/src/Components/VideoAdder/VideoAdder.jsx +++ b/src/Components/VideoAdder/VideoAdder.jsx @@ -1,7 +1,11 @@ -import React, { useState } from 'react' +import React, { useContext, useState } from 'react' +import Socket from '../../Socket'; import TextInput from '../TextInput/TextInput'; +import { RoomContext } from "../../Contexts/RoomContext" +import { PLAYLIST_STATUS, SOCKET_EVENTS } from '../../Constants'; -function VideoAdder({ addVideoFunc }) { +function VideoAdder() { + const { room } = useContext(RoomContext); let inputRef = null; const setInputRef =(ref)=>{ inputRef = ref; @@ -12,8 +16,9 @@ function VideoAdder({ addVideoFunc }) { if(!link){ return; } - addVideoFunc({event, link}); + if(event.key === 'Enter') + Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id: room.id, link, playlistStatus: PLAYLIST_STATUS.ADD }); inputRef.current.value=''; }; diff --git a/src/Components/YouTubePlayer/YouTubePlayer.jsx b/src/Components/YouTubePlayer/YouTubePlayer.jsx index 4c0d601..4b8a52a 100644 --- a/src/Components/YouTubePlayer/YouTubePlayer.jsx +++ b/src/Components/YouTubePlayer/YouTubePlayer.jsx @@ -1,6 +1,8 @@ -import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle} from 'react' -import { VIDEO_STATUS } from '../../Constants'; +import React, { useState, useEffect, useContext } from 'react' import YouTube from 'react-youtube'; +import Socket from '../../Socket'; +import { RoomContext } from '../../Contexts/RoomContext'; +import { VIDEO_STATUS, SOCKET_EVENTS } from '../../Constants'; import './YouTubePlayer.scss'; @@ -9,9 +11,11 @@ const getIdFromUrl = ( url ) => { return new URLSearchParams(u.search).get('v'); } -const YouTubePlayer = forwardRef((props, ref) => { +const YouTubePlayer = (props) => { // https://github.com/tjallingt/react-youtube + const { room } = useContext(RoomContext); const [id, setId] = useState(getIdFromUrl(props.url)); + const [didIUpdated, setDidIUpdated] = useState(false); const [player, setPlayer] = useState({}); const [sequence, setSequence] = useState([]); const [timer, setTimer] = useState(null); @@ -33,23 +37,27 @@ const YouTubePlayer = forwardRef((props, ref) => { } const onPlayerReady = (event) => { + let p = event.target setPlayer(event.target); - } - - - useImperativeHandle(ref, () => ({ - playVideo: () => { - player.playVideo(); - }, - stopVideo: () => { - player.pauseVideo(); - }, - jumpInVideo: (duration) => { - player.seekTo(duration); - } - })); + Socket.on(SOCKET_EVENTS.VIDEO_STATUS_UPDATED, ({ video }) => { + switch(video.status) { + case VIDEO_STATUS.PLAYED: + p.playVideo(); + p.seekTo(video.duration); + break; + case VIDEO_STATUS.STOPPED: + p.pauseVideo(); + break; + default: + return; + } + }); -const handleStateChange = event => handleEvent(event.data); + Socket.on(SOCKET_EVENTS.VIDEO_DURATION_CHANGED, ({ video }) => { + p.seekTo(video.duration); + setDidIUpdated(true); + }); + } const isSubArrayEnd = (A, B) => { if (A.length < B.length) @@ -67,18 +75,22 @@ const handleEvent = type => { setSequence([...sequence, type]); setCurrentTime(player.getCurrentTime()); if (type === 1 && isSubArrayEnd(sequence, [3]) && !sequence.includes(-1)) { - props.setVideoDuration(currentTime); setSequence([]); + if(didIUpdated){ + setDidIUpdated(false); + return; + } + Socket.emit(SOCKET_EVENTS.CHANGE_VIDEO_DURATION, ({ id: room.id, duration: currentTime } )) return; } else { clearTimeout(timer); if (type !== 3) { let timeout = setTimeout(function () { if (type === 1) { - props.setVideoStatus(VIDEO_STATUS.PLAYED); + Socket.emit(SOCKET_EVENTS.UPDATE_VIDEO_STATUS, {id: room.id, videoStatus: VIDEO_STATUS.PLAYED}); } else if (type === 2) { - props.setVideoStatus(VIDEO_STATUS.STOPPED); + Socket.emit(SOCKET_EVENTS.UPDATE_VIDEO_STATUS, {id: room.id, videoStatus: VIDEO_STATUS.STOPPED}); } setSequence([]); }, 250); @@ -89,10 +101,10 @@ const handleEvent = type => { return (
- + handleEvent(event.data)} className='ratio ratio-16x9' />
) -}); +}; export default YouTubePlayer; diff --git a/src/Contexts/RoomContext.js b/src/Contexts/RoomContext.js new file mode 100644 index 0000000..47fe275 --- /dev/null +++ b/src/Contexts/RoomContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const RoomContext = createContext(); diff --git a/src/Contexts/SendMessageInputContext.js b/src/Contexts/SendMessageInputContext.js deleted file mode 100644 index 91e41fa..0000000 --- a/src/Contexts/SendMessageInputContext.js +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from "react"; - -export const Context = createContext(); diff --git a/src/Pages/WatchingRoom/WatchingRoom.jsx b/src/Pages/WatchingRoom/WatchingRoom.jsx index 25ec1c3..e7b95ce 100644 --- a/src/Pages/WatchingRoom/WatchingRoom.jsx +++ b/src/Pages/WatchingRoom/WatchingRoom.jsx @@ -1,19 +1,19 @@ -import io from "socket.io-client"; -import { useEffect, useState, useRef } from "react"; +import { useEffect, useState } from "react"; +import Socket from "../../Socket"; import { useLocation } from "react-router-dom"; import VideoAdder from '../../Components/VideoAdder/VideoAdder'; -import { Context } from '../../Contexts/SendMessageInputContext'; +import { RoomContext } from '../../Contexts/RoomContext'; import YouTubePlayer from "../../Components/YouTubePlayer/YouTubePlayer"; import ChatPlaylistContainer from '../../Components/ChatPlaylistContainer/ChatPlaylistContainer'; - -import { - SOCKET_EVENTS, - PLAYLIST_STATUS, - VIDEO_STATUS, -} from "../../Constants"; +import { SOCKET_EVENTS } from "../../Constants"; import './WatchingRoom.scss'; + +Socket.connect(process.env.REACT_APP_API_PATH, { + transports: ["websocket"], +}); + function WatchingRoomPage() { const { state } = useLocation(); (() => { @@ -24,34 +24,28 @@ function WatchingRoomPage() { })(); const [room, setRoom] = useState(state.room); const [user, setUser] = useState(state.user); - const [socket, setSocket] = useState(null); - const [text, setText] = useState(""); const [messages, setMessages] = useState([]); const [typingUser, setTypingUser] = useState(""); const [playlist, setPlaylist] = useState(state.room.playlist); - const [playlistStatus, setPlaylistStatus] = useState(""); - const [videoId, setPlVideoId] = useState(""); - const [link, setLink] = useState(''); - const [videoStatus, setVideoStatus] = useState(""); - const [duration, setVideoDuration] = useState(0); - const player = useRef(null); const id = room.id; const { id: userId, username, } = user; - const video = room.video; + let playlistProps = { + playlist, + id: room.id, + }, + chatProps = { + messages, + typingUser, + }; useEffect(() => { - const newSocket = io(process.env.REACT_APP_API_PATH, { - transports: ["websocket"], - }); - let initialRoomData = null; // kullanıcı odaya katilinca oda state'i atanmadan odaya katildi mesaji aldigi icin - setSocket(newSocket); - newSocket.emit(SOCKET_EVENTS.JOIN_ROOM, { id, userId, username }); - newSocket.on(SOCKET_EVENTS.JOINED, ({ room }) => { + + Socket.on(SOCKET_EVENTS.JOINED, ({ room }) => { let tempRoom = typeof room === 'string' ? JSON.parse(room) : room; initialRoomData = tempRoom; setRoom(tempRoom); @@ -59,38 +53,22 @@ function WatchingRoomPage() { setMessages(tempRoom.messages); }); - newSocket.on(SOCKET_EVENTS.RECEIVE_MESSAGE, ({ message }) => { + Socket.on(SOCKET_EVENTS.RECEIVE_MESSAGE, ({ message }) => { setTypingUser(""); let temp = initialRoomData.messages; temp.push(message); setMessages([...temp]); }); - newSocket.on(SOCKET_EVENTS.DISPLAY, ({ username }) => { + Socket.on(SOCKET_EVENTS.DISPLAY, ({ username }) => { setTypingUser(username); }); - - newSocket.on(SOCKET_EVENTS.PLAYLIST_UPDATED, ({ playlist, playlistStatus }) => { - setPlaylistStatus(""); + + Socket.on(SOCKET_EVENTS.PLAYLIST_UPDATED, ({ playlist, playlistStatus }) => { setPlaylist([...playlist]); }); - - newSocket.on(SOCKET_EVENTS.VIDEO_STATUS_UPDATED, ({ video }) => { - switch(video.status) { - case VIDEO_STATUS.PLAYED: - player.current.playVideo(); - player.current.jumpInVideo(video.duration); - break; - case VIDEO_STATUS.STOPPED: - player.current.stopVideo(); - break; - default: - return; - } - setVideoStatus(""); - }); - - newSocket.on(SOCKET_EVENTS.VIDEO_SKIPPED, ({ + + Socket.on(SOCKET_EVENTS.VIDEO_SKIPPED, ({ video: newVideo, playlist: newPlaylist, }) => { @@ -100,85 +78,28 @@ function WatchingRoomPage() { video: newVideo }); }); + + Socket.emit(SOCKET_EVENTS.JOIN_ROOM, { id, userId, username }); - newSocket.on(SOCKET_EVENTS.VIDEO_DURATION_CHANGED, ({ video } ) => { - player.current.jumpInVideo(video.duration); - }); - - return () => newSocket.close(); + return () => Socket.close(); }, []); - useEffect(() => { - socket && socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus}); - }, [playlistStatus]); - - useEffect(() => { - socket && socket.emit(SOCKET_EVENTS.UPDATE_VIDEO_STATUS, {id, video, videoStatus}); - }, [videoStatus]); - - useEffect(() => { - socket && socket.emit(SOCKET_EVENTS.CHANGE_VIDEO_DURATION, ({ id, duration } )); - }, [duration]); - - const press = () => { - socket.emit(SOCKET_EVENTS.TYPING, { id, username }); - }; - - const moveUpVideo = (videoId) => { - setPlVideoId(videoId); - setPlaylistStatus(PLAYLIST_STATUS.MOVE_UP); - }; - - const removeVideo = (videoId) => { - setPlVideoId(videoId); - setPlaylistStatus(PLAYLIST_STATUS.REMOVE); - }; - - const moveDownVideo = (videoId) => { - setPlVideoId(videoId); - setPlaylistStatus(PLAYLIST_STATUS.MOVE_DOWN); - }; - - - //mesajlasma socketi eklendiginde calistirilacak fonksiyon - const click = () => { - socket.emit(SOCKET_EVENTS.SEND_MESSAGE, { id, text, user }); - }; - - const requestAddVideoToPlaylist = ({link, event}) => { - if(event.key === 'Enter'){ - setLink(link); - setPlaylistStatus(PLAYLIST_STATUS.ADD) - } - }; - const skipVideo = () => { if(playlist.length === 0){ return; } - socket.emit(SOCKET_EVENTS.SKIP_VIDEO, { id }); + Socket.emit(SOCKET_EVENTS.SKIP_VIDEO, { id }); } - let playlistProps = { - playlist, - moveUpVideo, - removeVideo, - moveDownVideo, - }, - chatProps = { - messages, - typingUser, - }; - return ( - +

{room.name}

- +
ayarlar @@ -189,7 +110,7 @@ function WatchingRoomPage() {
{ - room?.video?.link ? () : (

video not found

) + room?.video?.link ? () : (

video not found

) }
@@ -210,7 +131,7 @@ function WatchingRoomPage() {
cameras
- + ); }