Skip to content

Commit 2c0ae6e

Browse files
071yoon071yoon
authored
Merge 8f1e985 into e1e0c80 
2 parents e1e0c80 + 8f1e985 commit 2c0ae6e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1466
-175
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"react-hot-toast": "^2.3.0",
2828
"react-items-carousel": "^2.8.0",
2929
"react-notion": "^0.10.0",
30+
"react-player": "^2.11.0",
3031
"react-query": "^3.39.1",
3132
"react-router-dom": "6",
3233
"react-scripts": "5.0.1",

‎public/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="ko">
33
<head>
44
<meta charset="UTF-8" />
5+
56
<!-- Global site tag (gtag.js) - Google Analytics -->
67
<script
78
async
@@ -2134,6 +2135,18 @@
21342135
/> -->
21352136

21362137
<title>modoco</title>
2138+
<meta property="og:title" content="modoco" />
2139+
<meta property="og:type" content="website" />
2140+
<meta
2141+
property="og:image"
2142+
content="https://user-images.githubusercontent.com/64428916/197377529-6b2aa0f2-4e62-4fe6-ad14-137304780733.png"
2143+
/>
2144+
<meta property="og:image:width" content="1200" />
2145+
<meta property="og:image:height" content="630" />
2146+
<meta property="og:url" content="https://modocode.com/" />
2147+
<meta property="og:description" content="모여서 도란도란 같이 코딩해요💻" />
2148+
<meta property="og:site_name" content="모도코" />
2149+
<meta property="og:locale" content="ko" />
21372150
</head>
21382151
<body>
21392152
<div id="root"></div>

‎src/adapters/receiveMessage.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ const onChatMessage = (roomId: string) => {
1414

1515
useEffect(() => {
1616
const receiveMessage = (receiveMsg) => {
17-
const isMe = receiveMsg.sender === uid;
17+
const isMe = receiveMsg.from === uid;
1818
const userInfo = isMe
1919
? {
20-
uid: receiveMsg.sender,
20+
uid: receiveMsg.from,
2121
nickname,
2222
avatar,
2323
}
24-
: connectedUsers.filter((user) => user.uid === receiveMsg.sender)[0];
24+
: connectedUsers.filter((user) => user.uid === receiveMsg.from)[0];
2525

2626
setMessages([
2727
...messages.map((m, index) => {
2828
if (
2929
index === messages.length - 1 &&
30-
m.uid === receiveMsg.sender &&
30+
m.uid === receiveMsg.from &&
3131
moment(m.createdAt).format('LT') ===
3232
moment(receiveMsg.createdAt).format('LT')
3333
) {
@@ -74,7 +74,7 @@ const onChatMessage = (roomId: string) => {
7474
moment(receiveMsg.createdAt).format('LT')
7575
) {
7676
isHideNicknameAndAvatar = false;
77-
} else if (msg[msg.length - 1].uid !== receiveMsg.sender) {
77+
} else if (msg[msg.length - 1].uid !== receiveMsg.from) {
7878
isHideNicknameAndAvatar = false;
7979
} else if (msg[msg.length - 1].type !== 'MESSAGE') {
8080
isHideNicknameAndAvatar = false;

‎src/adapters/roomConnection.ts

+4
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ export const roomConnection = (roomId: string) => {
5252

5353
joinSuccess();
5454

55+
newSocket?.on('exception', (event) => {
56+
console.log('except', event);
57+
});
58+
5559
newSocket?.on(SOCKET_EVENT.JOINED_ROOM, (room) => {
5660
console.log('[roomConnection] joinedRoom', room);
5761
emitAudioStateChange(roomId, userMic);

‎src/adapters/youtubeSocket.ts

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { io } from 'socket.io-client';
2+
import { API } from '../config';
3+
import youtubeSearch from '../interface/youtubeSearch.interface';
4+
5+
const youtubeSocket = {
6+
socket: io(`${API.YOUTUBE_PLAYLIST as string}`, {
7+
transports: ['websocket', 'polling'],
8+
query: { token: localStorage.getItem('access_token') },
9+
}),
10+
};
11+
12+
const generateYoutubeSocket = () => {
13+
youtubeSocket.socket = io(`${API.YOUTUBE_PLAYLIST as string}`, {
14+
transports: ['websocket', 'polling'],
15+
query: { token: localStorage.getItem('access_token') },
16+
});
17+
};
18+
19+
const initSocketConnection = () => {
20+
if (!youtubeSocket.socket) generateYoutubeSocket();
21+
youtubeSocket.socket?.connect();
22+
};
23+
24+
const checkSocket = () => {
25+
if (!youtubeSocket.socket || !youtubeSocket.socket.connected) {
26+
initSocketConnection();
27+
}
28+
};
29+
30+
const disconnectSocket = () => {
31+
youtubeSocket.socket?.off('connect');
32+
youtubeSocket.socket?.off('playlist:join');
33+
youtubeSocket.socket?.off('playlist:joined');
34+
youtubeSocket.socket?.off('playlist:sync');
35+
youtubeSocket.socket?.disconnect();
36+
};
37+
38+
const connectedYoutube = () => {
39+
youtubeSocket.socket?.on('connect', () => {
40+
console.log(`[youtube connect] connected! ${youtubeSocket.socket?.id}`);
41+
});
42+
};
43+
44+
const joinYoutube = (roomId: string) => {
45+
checkSocket();
46+
youtubeSocket.socket?.emit('playlist:join', {
47+
room: roomId,
48+
playlistName: 'playlistItem',
49+
});
50+
console.log(
51+
`[emit join] waiting for join ${roomId}! ${youtubeSocket.socket?.id}`,
52+
);
53+
};
54+
55+
// const joinedYoutube = () => {
56+
// youtubeSocket.socket?.on('playlist:joined', (roomId: string) => {
57+
// console.log(`[on join] joined ${roomId}! ${youtubeSocket.socket?.id}`);
58+
// });
59+
// };
60+
61+
const selectVideo = (roomId: string, video: youtubeSearch) => {
62+
checkSocket();
63+
youtubeSocket.socket?.emit('playlist:sync', {
64+
room: roomId,
65+
playlistName: 'playlistItem',
66+
type: 'sync',
67+
playlist: [{ video }],
68+
});
69+
console.log(
70+
`[emit select] select ${video.id.videoId}! ${youtubeSocket.socket?.id}`,
71+
);
72+
};
73+
74+
const addVideo = (addFunc) => {
75+
checkSocket();
76+
youtubeSocket.socket?.on('playlist:sync', (data) => addFunc(data));
77+
console.log(`[on add] add video! ${youtubeSocket.socket?.id}`);
78+
};
79+
80+
const leaveYoutube = (roomId: string) => {
81+
checkSocket();
82+
youtubeSocket.socket?.emit('playlist:leave', {
83+
room: roomId,
84+
playlistName: 'playlistItem',
85+
});
86+
console.log(`[emit leave] leave ${roomId}! ${youtubeSocket.socket?.id}`);
87+
};
88+
89+
export {
90+
youtubeSocket,
91+
initSocketConnection,
92+
// generateYoutubeSocket,
93+
disconnectSocket,
94+
connectedYoutube,
95+
joinYoutube,
96+
selectVideo,
97+
addVideo,
98+
leaveYoutube,
99+
};

‎src/api/core/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { awsRequest } from './awsLambdaAxios';
22
export { authorizationRequest, unAuthorizationRequest } from './backendAxios';
3+
export { youtubeAxios } from './youtubeAxios';

‎src/api/core/youtubeAxios.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import axios from 'axios';
2+
import { API } from '../../config';
3+
4+
const youtubeAxios = axios.create({
5+
baseURL: API.YOUTUBE,
6+
});
7+
8+
// add youtube key in params
9+
youtubeAxios.interceptors.request.use((config) => {
10+
return Object.assign(config, {
11+
params: {
12+
...config.params,
13+
key: process.env.REACT_APP_YOUTUBE_KEY,
14+
},
15+
});
16+
});
17+
18+
youtubeAxios.interceptors.response.use(
19+
(response) => {
20+
return response;
21+
},
22+
(error) => {
23+
console.warn('[Axios] ', error);
24+
return Promise.reject(error);
25+
},
26+
);
27+
28+
export { youtubeAxios };

‎src/api/main.ts

+26
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
authorizationRequest,
44
unAuthorizationRequest,
55
awsRequest,
6+
youtubeAxios,
67
} from './core/index';
78
import { API } from '../config';
89

@@ -139,6 +140,29 @@ const getRecords = () => {
139140
return authorizationRequest.get(API.RECORDS);
140141
};
141142

143+
/**
144+
* youtube
145+
*/
146+
147+
// search youtube video
148+
const searchYoutubeVideo = (keyword: string) => {
149+
return youtubeAxios.get(API.YOUTUBE_SEARCH, {
150+
params: {
151+
q: keyword,
152+
part: 'snippet',
153+
maxResults: 15,
154+
type: 'video',
155+
videoEmbeddable: true,
156+
videoCategoryId: 10,
157+
},
158+
});
159+
};
160+
161+
// delete room
162+
const deleteRoom = (roomId: number) => {
163+
return authorizationRequest.delete((API.ROOM as string) + roomId);
164+
};
165+
142166
export {
143167
getUser,
144168
getMe,
@@ -156,4 +180,6 @@ export {
156180
getFriend,
157181
getRecords,
158182
changeProfile,
183+
searchYoutubeVideo,
184+
deleteRoom,
159185
};

‎src/assets/svg/Check.svg

+2
Loading

‎src/assets/svg/GrayYoutube.svg

+5
Loading

‎src/assets/svg/MusicOff.svg

+2
Loading

‎src/assets/svg/MusicOn.svg

+2
Loading

‎src/assets/svg/RedYoutube.svg

+21
Loading

‎src/assets/svg/Search.svg

+2
Loading

‎src/assets/svg/WhiteYoutube.svg

+21
Loading

‎src/assets/svg/verticalMenu.svg

+24
Loading

‎src/components/atoms/chatting/SendChat.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default function SendChat({
3636
newSocket.emit('chatMessage', {
3737
room: roomId,
3838
type: 'MESSAGE',
39-
sender: uid,
39+
from: uid,
4040
message: newMessage,
4141
createdAt: new Date(),
4242
});
@@ -93,6 +93,8 @@ const Input = styled.textarea<{ roomId: string }>`
9393
color: rgba(255, 255, 255, 1);
9494
min-height: 2rem;
9595
max-height: 13rem;
96+
resize: none;
97+
9698
::-webkit-scrollbar {
9799
width: 0.3rem;
98100
}

0 commit comments

Comments
 (0)