Tüm olaylar socket objesine taşındı

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 (
     <div className='playlist'>
       {
-        playlist.map((video) => <PlaylistItem key={video.id} {...video} {...props}/> ) 
+        playlist.map((video) => <PlaylistItem key={video.id} videoId={video.id} {...video} {...props}  id={id}/> ) 
       }
     </div>
   )

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 (
     <div className="playlist-item" id={id} >
       <div className="thumbnail">
@@ -19,9 +20,9 @@ function PlaylistItem({ id, username, link, moveUpVideo, moveDownVideo, removeVi
         <small className="added-by">{username}</small>
       </div>
       <div className="control-buttons">
-        <FontAwesomeIcon icon={faAngleUp} onClick={() => moveUpVideo(id)} />
-        <FontAwesomeIcon icon={faTrashCan} onClick={() => removeVideo(id)} />
-        <FontAwesomeIcon icon={faAngleDown} onClick={() => moveDownVideo(id)} />
+        <FontAwesomeIcon icon={faAngleUp} onClick={() => Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.MOVE_UP})} />
+        <FontAwesomeIcon icon={faTrashCan} onClick={() => Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.REMOVE})} />
+        <FontAwesomeIcon icon={faAngleDown} onClick={() => Socket.emit(SOCKET_EVENTS.UPDATE_PLAYLIST, {id, videoId, username, link, playlistStatus: PLAYLIST_STATUS.MOVE_DOWN})} />
       </div>
     </div>
   )

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,15 +21,15 @@ function SendMessageInput () {
     if(input?.current?.value.trim() ==='')
       return;
 
-    click(event);
+    Socket.emit(SOCKET_EVENTS.SEND_MESSAGE, { id: room.id, text, user });
     input.current.value = '';
   }
 
   const pressHandler = (event) =>{
     if(event.key === 'Enter'){
       return clickHandler(event);
     }
-    press(event);
+    Socket.emit(SOCKET_EVENTS.TYPING, { id: room.id, username: user.username });
   }
 
   return (

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='';
   };
 

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 (
     <div className='youtube-player ratio ratio-16x9'>
-      <YouTube videoId={id} opts={opts} onReady={onPlayerReady}  onStateChange={handleStateChange} className='ratio ratio-16x9' />
+      <YouTube videoId={id} opts={opts} onReady={onPlayerReady}  onStateChange={event => handleEvent(event.data)} className='ratio ratio-16x9' />
     </div>
   )
-});
+};
 
 export default YouTubePlayer;
 

src/Contexts/RoomContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const RoomContext = createContext();