Skip to content

Commit

Permalink
chore: implementing go api support
Browse files Browse the repository at this point in the history
  • Loading branch information
Alissonsz committed Dec 6, 2023
1 parent 06c13a0 commit 18f596f
Show file tree
Hide file tree
Showing 12 changed files with 1,393 additions and 2,113 deletions.
19 changes: 10 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,29 @@
"test": "yarn jest"
},
"dependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.23.3",
"@reduxjs/toolkit": "^1.7.1",
"axios": "^0.24.0",
"axios": "^1.6.2",
"babel-plugin-inline-react-svg": "^2.0.1",
"bulma": "^0.9.4",
"bulma-slider": "^2.0.4",
"bulma-tooltip": "^3.0.2",
"classnames": "^2.3.1",
"next": "^12.0.7",
"node-sass": "^4.14.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"next": "^14.0.3",
"node-sass": "^9.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.3.1",
"react-player": "^2.9.0",
"react-player": "^2.13.0",
"react-redux": "^7.2.6",
"react-sortablejs": "^6.1.0",
"sass": "^1.69.5",
"screenfull": "^6.0.0",
"socket.io-client": "^4.4.0",
"socket.io-client": "^4.7.2",
"sortablejs": "^1.14.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.16.5",
"@next/eslint-plugin-next": "^11.1.0",
"@testing-library/dom": "^8.11.1",
"@testing-library/jest-dom": "^5.16.1",
Expand All @@ -40,7 +42,6 @@
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"babel-jest": "^27.4.4",
"bulma": "^0.9.1",
"eslint": "^8.4.1",
"eslint-config-next": "^12.0.7",
"eslint-config-prettier": "^8.3.0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/VideoPlayer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const VideoPlayer = () => {
height={'100%'}
volume={volume}
playing={isPlaying}
progressInterval={100}
progressInterval={1000}
controls={false}
onEnded={() => (playlist.length > 0 ? playNext() : togglePlaying())}
onProgress={(state) => {
Expand Down
4 changes: 1 addition & 3 deletions src/components/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ export default function Layout({
return (
<>
<Head>
<title>
{siteTitle} {home ? 'Homepage' : ''}
</title>
<title>{`${siteTitle} ${home ? 'Homepage' : ''}`}</title>
<meta name="viewport" content="width=device-width" />
</Head>
<header>
Expand Down
18 changes: 11 additions & 7 deletions src/contexts/roomContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import socket, {
sendReorderPlaylist,
sendVideoAddedToPlaylist,
sendVideoChange,
} from '../services/ws';
} from '../services/customWs';

import { v4 as uuidv4 } from 'uuid';

Expand Down Expand Up @@ -97,6 +97,10 @@ const RoomProvider = ({ children }) => {
};

useEffect(() => {
console.log('socket', socket);
if (!socket) return;
console.log('setting up listeners');

socket.on('connect', () => {
console.log('connected');
});
Expand All @@ -106,24 +110,24 @@ const RoomProvider = ({ children }) => {
dispatch(RoomActions.addMessage(data));
});

socket.on('videoChanged', (data: string) => {
socket.on('videoChanged', (data: { videoUrl: string }) => {
console.log('video changed', data);
dispatch(RoomActions.setVideoUrl(data));
dispatch(RoomActions.setVideoUrl(data.videoUrl));
});

socket.on('addedToPlaylist', (data: IPlaylistItem) => {
dispatch(RoomActions.addToPlaylist(data));
});

socket.on('playlistUpdated', (data: IPlaylistItem[]) => {
dispatch(RoomActions.setPlaylist(data));
});
// socket.on('playlistUpdated', (data: IPlaylistItem[]) => {
// dispatch(RoomActions.setPlaylist(data));
// });

socket.on('playNext', (data: IPlaylistItem) => {
dispatch(RoomActions.setVideoUrl(data.url));
dispatch(RoomActions.removeFromPlaylist());
});
}, []);
}, [dispatch]);

return (
<RoomContext.Provider
Expand Down
8 changes: 4 additions & 4 deletions src/contexts/videoContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import socket, {
sendPlayingProgress,
sendVideoPlayingChange,
sendVideoSeek,
} from '../services/ws';
} from '../services/customWs';
import { useRoom } from './roomContext';

interface IVideoContext {
Expand Down Expand Up @@ -56,9 +56,9 @@ const VideoProvider = ({ children }) => {
setIsPlaying(data.playing);
});

socket.on('videoSeeked', (seekTo) => {
console.log('videoSeeked', seekTo);
setLastSeek(seekTo);
socket.on('videoSeeked', (data: { seekTo: number }) => {
console.log('videoSeeked', data);
setLastSeek(data.seekTo);
});
}, []);

Expand Down
7 changes: 5 additions & 2 deletions src/pages/mainPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,14 @@ const Index = () => {
api
.post('/room', {
name: roomName,
videoUrl: roomVideo,
video_url: roomVideo,
})
.then((data) => {
console.log('created');
Router.push(`/room/${data.data.room.id}`);
Router.push(`/room/${data.data.id}`);
})
.catch((err) => {
console.log(err);
})
.finally(() => setLoading(false));
};
Expand Down
14 changes: 11 additions & 3 deletions src/pages/room/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const Room = (roomInfos: IRoom) => {
const [modalActive, setModalActive] = useState(true);

useEffect(() => {
//if (window.WebSocket) initWebSocket();

// ROOM INITIAL STATE
setRoomId(roomInfos.id);
setRoomVideoUrl(roomInfos.videoUrl);
Expand Down Expand Up @@ -109,11 +111,17 @@ export const getServerSideProps: GetServerSideProps = async (context) => {

try {
const response = await api.get(`/room/${id}`);
const room = response.data.room;
console.log(room);
const room = response.data;

return {
props: {
...room,
id: room.id,
name: room.name,
videoUrl: room.video_url,
messages: room.messages || [],
progress: room.progress,
playing: room.playing,
playlist: room.playlist_items || [],
},
};
} catch {
Expand Down
10 changes: 8 additions & 2 deletions src/services/api.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import axios from 'axios';

const SERVER_URL =
process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080';
const url =
process.env.NODE_ENV === 'production'
? 'https://jun2-ish.fun'
: 'http://localhost:8080';
const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || url;

const api = axios.create({
baseURL: SERVER_URL,
headers: {
'Access-Control-Allow-Origin': '*',
},
});

export default api;
99 changes: 99 additions & 0 deletions src/services/customWs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { useEffect, useState } from 'react';
import { IChatMessage, IPlaylistItem } from '../stores/roomSlice';

const url =
process.env.NODE_ENV === 'production'
? 'wss://jun2-ish.fun/ws'
: 'ws://localhost:8080/ws';

const socket = {
conn: new WebSocket(url),
emit: (type: string, data: any) => {
if (socket.conn.readyState !== WebSocket.OPEN) return;

socket.conn.send(JSON.stringify({ type, data }));
},
on: (type: string, callback: (data: any) => void) => {
socket.conn.addEventListener('message', (event) => {
const { type: eventType, data } = JSON.parse(event.data);
console.log({ type, data });

if (type === eventType) {
callback(data);
}
});
},
};

socket.conn.onopen = () => {
console.log('connected!');
};

socket.conn.onmessage = (message) => {
console.log(message);
};

socket.conn.onerror = (error) => {
console.log(error);
};

export const sendNewMessage = (roomId: string, message: IChatMessage) => {
socket.emit('newMessage', message);
};

export const sendEntryRoom = (roomId: string, nickname: string) => {
const payload = {
roomId,
nickname,
};

socket.emit('joinRoom', payload);
};

export const sendVideoChange = (roomId: string, videoUrl: string) => {
const payload = {
roomId,
videoUrl,
};

socket.emit('changeVideo', payload);
};

export const sendVideoPlayingChange = (
roomId: string,
progress: number,
playing: boolean
) => {
const payload = { progress, playing };

socket.emit('videoPlayingChanged', payload);
};

export const sendVideoSeek = (roomId: string, seekTo: number) => {
const payload = { roomId, seekTo };
socket.emit('videoSeeked', payload);
};

export const sendPlayingProgress = (roomId: string, progress) => {
const payload = { roomId, progress };
socket.emit('playingProgress', payload);
};

export const sendVideoAddedToPlaylist = (
roomId: string,
video: IPlaylistItem
) => {
const payload = { ...video };
socket.emit('addVideoToPlaylist', payload);
};

export const sendReorderPlaylist = (roomId: string, list: IPlaylistItem[]) => {
const payload = { roomId, list };
socket.emit('updatePlaylist', payload);
};

export const sendPlayNext = (roomId: string) => {
socket.emit('playNext', { roomId });
};

export default socket;
6 changes: 5 additions & 1 deletion src/services/ws.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { IChatMessage, IPlaylistItem } from '../stores/roomSlice';
const SERVER_URL =
process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080';

const socket = io(SERVER_URL);
const socket = io(SERVER_URL, {
path: '/ws',
transports: ['websocket'],
protocols: ['websocket'],
});

export const sendNewMessage = (roomId: string, message: IChatMessage) => {
const payload = {
Expand Down
10 changes: 4 additions & 6 deletions src/styles/global.sass
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
@charset "utf-8";

// Set your brand colors
@import "base.scss";
@import "base.scss"

// Import only what you need from Bulma
@import "~bulma/bulma";
@import "~bulma-slider";
@import "~bulma-tooltip";
@import "~bulma/bulma"
@import "~bulma-slider"
@import "~bulma-tooltip"
// @import "../node_modules/bulma/bulma.sass"
Loading

1 comment on commit 18f596f

@vercel
Copy link

@vercel vercel bot commented on 18f596f Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

jun2-ish – ./

jun2-ish-git-adapting-goapi-alissonsz.vercel.app
jun2-ish-alissonsz.vercel.app
jun2-ish.vercel.app

Please sign in to comment.