fix: chatting UI 버그 수정

lem-onair · Jan 5, 2024 · 2204dea · 2204dea
1 parent fd7e5c4
commit 2204dea
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -1,33 +1,23 @@
 # Lemonair 🍋
 
----
-
 ```
 스트리머가 실시간으로 방송을 송출하면
 시청자들이 이를 시청하고 채팅과 후원으로 소통하는 서비스입니다.
 ```
 
 ## 소개 영상 (예정)
 
----
-
 ## | Service Architecture ⚙
 
----
-
 ![lemonair-architecture](https://github.com/lem-onair/lemonair-FE/assets/121735319/7d3d66d5-c6d6-4dc6-8906-2e92cd83212c)
 
 ## | Sequence Diagram 🔄
 
----
-
 | ![sequence-diagram-1](https://github.com/lem-onair/lemonair-FE/assets/121735319/af029026-d460-4cb6-b61f-fc4effbad9eb) | ![sequence-diagram-2](https://github.com/lem-onair/lemonair-FE/assets/121735319/8ae538e2-c75e-4277-8c13-1c72a34c35ec) |
 | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
 
 ## | 기술적 의사결정 🤔
 
----
-
 <details>
 <summary> WebMVC / WebFlux</summary>
 <div markdown="1">
@@ -191,23 +181,24 @@ MySQL이 동기 블로킹 방식으로 동작한다는 점은 치명적이었지
   <br />
 
 ## | 트러블슈팅 🤬
----
+
 ### 1. 브라우저 새로고침 시에 웹소켓 연결이 끊기는 문제
+
 ### 2. Thumbnail 무한 업로드 문제
+
 ### 3. CloudFront Cache 관련 문제
+
 <br />
 
-### 해결 과정이 궁금하시다면 ? 
+### 해결 과정이 궁금하시다면 ?
+
 ### [Lemonair 트러블슈팅 노션 페이지](https://arrow-troodon-1c3.notion.site/96b72f2f066947e69d65560f748a7848?pvs=4)
 
 <br />
 
-
 ## | 성능 개선 💪 (예정)
----
 
 ## | 멤버 👯‍♂️
----
 
 - 이상문 : https://github.com/alaneelee
 - 서병렬 : https://github.com/BYEONGRYEOL

diff --git a/src/components/HlsPlayer.js b/src/components/HlsPlayer.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from "react";
-import Hls from "hls.js";
+import React, { useEffect, useRef } from 'react';
+import Hls from 'hls.js';
 
 const HlsVideoPlayer = ({ videoUrl }) => {
   const videoRef = useRef(null);
@@ -8,29 +8,29 @@ const HlsVideoPlayer = ({ videoUrl }) => {
     const videoElement = videoRef.current;
     let hls;
 
-    console.log("useEffect실행");
+    console.log('useEffect실행');
     const initializeHls = (data) => {
       console.log(data);
-      console.log("initialize 실행");
+      console.log('initialize 실행');
       // 자동재생
-      console.log("play 실행 전");
+      console.log('play 실행 전');
       videoElement.play();
-      console.log("play 실행 후ㅡ");
+      console.log('play 실행 후ㅡ');
       // 마지막 청크의 재생시간으로 이동
-      console.log("hls", hls);
+      console.log('hls', hls);
       // console.log("hls.media.current.segments", hls.media.current.segments);
       console.log(data.lastSegment);
       console.log(hls.media.segments);
       const lastSegment = hls.media.segments[hls.media.segments.length - 1];
-      console.log("lastSegment", lastSegment);
+      console.log('lastSegment', lastSegment);
       if (lastSegment) {
         videoElement.currentTime = lastSegment.end;
       }
     };
 
     // Hls 지원 여부 확인
     if (Hls.isSupported()) {
-      console.log("hls를 지원한다.");
+      console.log('hls를 지원한다.');
       var config = {
         autoStartLoad: true,
         startPosition: -1,
@@ -68,16 +68,16 @@ const HlsVideoPlayer = ({ videoUrl }) => {
               maxNumRetry: 5,
               retryDelayMs: 3000,
               maxRetryDelayMs: 15000,
-              backoff: "linear",
+              backoff: 'linear',
             },
           },
         },
         startLevel: undefined,
         audioPreference: {
-          characteristics: "public.accessibility.describes-video",
+          characteristics: 'public.accessibility.describes-video',
         },
         subtitlePreference: {
-          lang: "en-US",
+          lang: 'en-US',
         },
         startFragPrefetch: false,
         testBandwidth: true,
@@ -137,36 +137,32 @@ const HlsVideoPlayer = ({ videoUrl }) => {
       // });
 
       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
-        console.log("video and hls.js are now bound together !");
+        console.log('video and hls.js are now bound together !');
       });
       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
         initializeHls(data);
       });
 
       hls.loadSource(videoUrl);
       hls.attachMedia(videoElement);
-    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
+    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
       // Hls 지원하지 않을 경우
       videoElement.src = videoUrl;
-      console.log("hls 지원하지 않는 경우");
+      console.log('hls 지원하지 않는 경우');
       // 자동재생
       videoElement.play();
     }
 
     // 컴포넌트가 언마운트될 때 해제
     return () => {
       if (Hls.isSupported()) {
-        console.log("컴포넌트 unmount시에 destroy");
+        console.log('컴포넌트 unmount시에 destroy');
         hls.destroy();
       }
     };
   }, [videoUrl]);
 
-  return (
-    <div>
-      <video ref={videoRef} controls width="100%" height="100%" />
-    </div>
-  );
+  return <video ref={videoRef} controls width='100%' height='100%' />;
 };
 
 export default HlsVideoPlayer;
diff --git a/src/pages/ChannelDetail.js b/src/pages/ChannelDetail.js
@@ -1,16 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import Header from "../components/header";
-import styled from "styled-components";
-import Chat from "../components/Chat";
-import HlsVideoPlayer from "../components/HlsPlayer";
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import Header from '../components/header';
+import styled from 'styled-components';
+import Chat from '../components/Chat';
+import HlsVideoPlayer from '../components/HlsPlayer';
 
 const StreamingContainer = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
 `;
 
+const VideoWrapper = styled.div`
+  width: 68%;
+  height: 68%;
+`;
+
 const StreamingChatContainer = styled.div`
   width: 100%;
   display: flex;
@@ -20,7 +25,7 @@ const StreamingTitle = styled.p`
   margin-top: 15px;
   margin-left: 15px;
   font-size: 1.5rem;
-  font-family: "Gamja Flower", sans-serif;
+  font-family: 'Gamja Flower', sans-serif;
 `;
 
 const ChatWrapper = styled.div`
@@ -39,15 +44,15 @@ const ChannelDetail = () => {
           `https://api.lemonair.me/api/channels/${id}`
         );
         if (!response.ok) {
-          throw new Error("Network response was not ok.");
+          throw new Error('Network response was not ok.');
         }
         const data = await response.json();
         setChannelData(data);
-        console.log("title:", data.title);
-        console.log("url:", data.hlsUrl);
-        console.log("roomid:", data.chattingRoomId);
+        console.log('title:', data.title);
+        console.log('url:', data.hlsUrl);
+        console.log('roomid:', data.chattingRoomId);
       } catch (error) {
-        console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
+        console.error('데이터를 불러오는 중 오류가 발생했습니다:', error);
       }
     };
 
@@ -59,7 +64,9 @@ const ChannelDetail = () => {
       <StreamingChatContainer>
         <StreamingContainer>
           {channelData ? (
-            <HlsVideoPlayer videoUrl={channelData.hlsUrl} />
+            <VideoWrapper>
+              <HlsVideoPlayer videoUrl={channelData.hlsUrl} />
+            </VideoWrapper>
           ) : null}
           {channelData ? (
             <ChatWrapper>