Merge branch 'main' into SnorlaxH-patch-1

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Report a bug
+title: "[BUG]"
+labels: 버그
+assignees: ''
+
+---
+
+### **버그 내용**
+
+<!-- 발생한 버그를 자세히 설명해주세요. -->
+<!-- 특수한 조건이 있는 경우 이미지나 영상이 있다면 더욱 빨리 해결 될 수 있어요. -->
+
+### **환경**
+
+version: 
+os: 
+browser: 
+
+<!--사용 중인 환경을 작성해주세요. -->
+
+### **기타**
+
+<!--혹시 생각하신 해결 방법이나 대안책 같은게 있으시다면 공유해주세요. -->
+<!--참고에 큰 도움이 됩니다! -->
+<!--없으시다면 해당 항목은 삭제해주세요. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature]"
+labels: 아이디어
+assignees: ''
+
+---
+
+### **제안**
+
+<!-- 제안하실 내용을 자세히 설명해주세요. -->
+<!-- 만약 참고해볼만한 이미지나 영상 등이 있다면 이해하는데 더욱 쉬울 수 있어요. -->
+
+### **기타**
+
+<!--혹시 생각하신 구현방법 같은게 있으시다면 공유해주세요. -->
+<!--없으시다면 해당 항목은 삭제해주세요. -->
+<!--PR도 프로그램의 성장에 큰 도움이 됩니다. -->

README.md

@@ -9,41 +9,31 @@
 <p align="center">
     <img src="https://img.shields.io/github/package-json/v/kyechan99/chzzk-plus?style=for-the-badge"/>
     <img src="https://img.shields.io/github/license/kyechan99/chzzk-plus?style=for-the-badge"/>
-    <a href="https://github.com/kyechan99/chzzk-plus/releases">
+    <a href="https://chromewebstore.google.com/detail/chzzk-plus/miampiopgfpnimmggagljgbpmjmjdjia">
  	    <img src="https://img.shields.io/badge/DOWNLOAD-ME-%2320c997?style=for-the-badge"/>
     </a>
 </p>
 
-## Feature
-
-### 1. PIP 모드 버튼
-
-![PIP 모드 버튼](/README/feature_pip.png)
-
-### 2. 방송 미리보기
-
-![방송 미리보기](/README/preview.png)
-
-### 3. 방송화면 이벤트 방해 방지
+[크롬 확장프로그램 설치](https://chromewebstore.google.com/detail/chzzk-plus/miampiopgfpnimmggagljgbpmjmjdjia)
 
-![방송화면 이벤트 방해 방지](/README/barrigade.png)
-
-> 설정 창에서 활성화 가능합니다.
->
-> default 로 비활성화 되어있습니다.
-
-### 4. 채팅 색상
-
-![채팅 색상 조절](/README/font_color.png)
-
-> 트위치의 경우 채팅 색상 조절에 BM에 포함되어 있습니다.
->
-> 치지직 역시 추가 될 경우 기능이 삭제 혹은 변경 될 수 있습니다.
-
-## 고려중
+## Feature
 
-1. 팔로우 채널 우선순위 순위
-2. 품질 조절 기타 등등
+1.  PIP 모드 버튼
+2.  방송 미리보기
+3.  방송 화면 캡처저장
+4.  생방송 녹화
+5.  치즈 제거 모드
+6.  채팅 색상 모드
+7.  채팅 크기 조절
+8.  방송 단축키
+9.  즐겨찾기 (팔로우 채널 중 우선순위 올리기)
+10. 생방송 빨리감기
+11. 오디오 압축
+
+![0](/README/0.png)
+![1](/README/1.png)
+![2](/README/2.png)
+![3](/README/3.png)
 
 ## 알림사항
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Chzzk Plus",
   "description": "네이버 스트리밍 서비스 Chzzk Plus",
-  "version": "1.0",
+  "version": "1.0.9",
   "manifest_version": 3,
   "icons": {
     "16": "icon16.png",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chzzk-plus",
   "private": true,
-  "version": "0.0.4",
+  "version": "1.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/App.css

@@ -4,9 +4,10 @@ body {
 }
 #root {
   padding: 2rem;
-  min-width: 16rem;
+  min-width: 18rem;
 }
 hr {
+  opacity: 0.5;
   width: 100%;
 }
 .popup {
@@ -21,16 +22,41 @@ hr {
   display: flex;
   width: 100%;
   color: white;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 }
 
-.menu {
+.setting-group {
+  width: 100%;
+}
+.setting-label {
+  color: white;
+  width: 100%;
+  margin-top: 0px;
+  margin-bottom: 0.25rem;
+}
+.menus {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
+}
+.menus .menu {
+  display: flex;
+  flex-direction: column;
+}
+.menus .menu .menu-title {
+  font-size: 14px;
+  /* font-weight: bold; */
+  margin: 0px;
+}
+.menus .menu .menu-desc {
+  margin: 0px;
+  color: #afafaf;
 }
 .description {
   color: #6fec9f;
 }
+.version {
+  color: white;
+}

src/App.tsx

@@ -1,24 +1,127 @@
 import "./App.css";
 
 import Logo from "../public/icon128.png";
-import URLButton from "./components/button/URLButton/URLButton";
+import { Select } from "./components/input/Select/Select";
 import Checkbox from "./components/input/Checkbox/Checkbox";
+import URLButton from "./components/button/URLButton/URLButton";
 import ColorPicker from "./components/input/ColorPicker/ColorPicker";
-import { CHAT_NAME_COLOR, CHAT_TEXT_COLOR } from "./constants/data";
+
+import {
+  AUDIO_COMPRESSOR,
+  CHAT_COLOR_OPTIONS,
+  CHAT_COLOR_THEME,
+  CHAT_NAME_COLOR,
+  CHAT_SIZE,
+  CHAT_SIZE_OPTIONS,
+  CHAT_TEXT_COLOR,
+  CHEEZE_REMOVER,
+  FAST_BUTTON,
+  PLAYER_KEY_CONTROL,
+} from "./constants/storage";
 
 function App() {
   return (
     <div className="popup">
       <img src={Logo} alt="chzzk-plus" />
+
       <URLButton href="https://chzzk.naver.com/">Chzzk 이동하기</URLButton>
+      <URLButton href="https://github.com/kyechan99/chzzk-plus/issues">
+        버그 제보하기
+      </URLButton>
+
+      <hr />
+
+      <div className="setting-group">
+        <h2 className="setting-label">플레이어</h2>
+        <div className="menus">
+          {/* <Checkbox id={BARRICADE}>
+            <div className="menu">
+              <p className="menu-title">화면 클릭시 일시정지 방지 *</p>
+              <p className="menu-desc">새로고침 후 적용됩니다</p>
+            </div>
+          </Checkbox> */}
+
+          <Checkbox id={PLAYER_KEY_CONTROL}>
+            <div className="menu">
+              <p className="menu-title">키 이벤트 활성화 *</p>
+              <p className="menu-desc">T: 넓은 화면</p>
+              <p className="menu-desc">F: 전체 화면</p>
+              <p className="menu-desc">M: 음소거</p>
+            </div>
+          </Checkbox>
+
+          <Checkbox id={FAST_BUTTON}>
+            <div className="menu">
+              <p className="menu-title">빨리 감기 활성화 *</p>
+              <p className="menu-desc">새로고침 후 적용</p>
+            </div>
+          </Checkbox>
+
+          <Checkbox id={AUDIO_COMPRESSOR}>
+            <div className="menu">
+              <p className="menu-title">사운드 압축 *</p>
+              <p className="menu-desc">높고 낮은 음압 간의 차이를 줄임</p>
+              <p className="menu-desc">일정한 음량 수준을 유지</p>
+            </div>
+          </Checkbox>
+        </div>
+      </div>
+
       <hr />
-      <div className="menu">
-        <Checkbox id="barricade">화면 클릭시 일시정지 방지 *</Checkbox>
-        <ColorPicker id={CHAT_NAME_COLOR}>채팅 이름 색상</ColorPicker>
-        <ColorPicker id={CHAT_TEXT_COLOR}>채팅 내용 색상</ColorPicker>
+
+      <div className="setting-group">
+        <h2 className="setting-label">채팅</h2>
+        <div className="menus">
+          <Checkbox id={CHEEZE_REMOVER}>
+            <div className="menu">
+              <p className="menu-title">치즈 제거 *</p>
+              <p className="menu-desc">새로고침 후 적용</p>
+            </div>
+          </Checkbox>
+
+          <Select
+            id={CHAT_COLOR_THEME}
+            options={CHAT_COLOR_OPTIONS.map((op) => {
+              return { name: op, value: op };
+            })}
+          >
+            <div className="menu">
+              <p className="menu-title">채팅 이름에 색상넣기 *</p>
+              <p className="menu-desc">새로고침 후 적용</p>
+            </div>
+          </Select>
+
+          <ColorPicker id={CHAT_NAME_COLOR}>
+            <div className="menu">
+              <p className="menu-title">이름 색</p>
+              <p className="menu-desc">'커스텀' 모드에서 작동</p>
+            </div>
+          </ColorPicker>
+          <ColorPicker id={CHAT_TEXT_COLOR}>
+            <div className="menu">
+              <p className="menu-title">내용 색</p>
+              <p className="menu-desc">'커스텀' 모드에서 작동</p>
+            </div>
+          </ColorPicker>
+
+          <Select
+            id={CHAT_SIZE}
+            options={CHAT_SIZE_OPTIONS.map((op) => {
+              return { name: op, value: op };
+            })}
+          >
+            <div className="menu">
+              <p className="menu-title">채팅 크기 *</p>
+              <p className="menu-desc">새로고침 후 적용</p>
+            </div>
+          </Select>
+        </div>
       </div>
+
       <hr />
+
       <p className="description">* 표시된 설정은 새로고침 후 적용됩니다</p>
+      <p className="version">v1.0.9</p>
     </div>
   );
 }

src/components/Global.css

@@ -1,6 +1,6 @@
-.live_chatting_list_wrapper__a5XTV .name_text__yQG50 {
+/* .live_chatting_list_wrapper__a5XTV .name_text__yQG50 {
   color: var(--czp-chat-name) !important;
 }
 .live_chatting_list_wrapper__a5XTV .live_chatting_message_text__DyleH {
   color: var(--czp-chat-text) !important;
-}
+} */

src/components/Global.tsx

@@ -1,5 +1,50 @@
+import { useEffect } from "react";
 import "./Global.css";
+import {
+  INPUT_UI_LIST,
+  VIDEO_FULL_BTN,
+  VIDEO_VIEW_BTN,
+  VIDEO_VOLUME_BTN,
+} from "../constants/class";
+import { PLAYER_KEY_CONTROL } from "../constants/storage";
 
 export default function Global() {
+  useEffect(() => {
+    // Feat: 플레이커 키 단축키 활성화 =========================================================
+    chrome.storage.local.get(PLAYER_KEY_CONTROL, (res) => {
+      // 위에서 pip 버튼 추가 체크로 재생성 걱정은 안해도 괜찮다.
+      if (res[PLAYER_KEY_CONTROL]) {
+        document.addEventListener("keydown", (event) => {
+          const { target } = event;
+          if (target instanceof HTMLElement)
+            if (!INPUT_UI_LIST.includes(target.className) && !event.ctrlKey) {
+              // T : 넓은 화면
+              if (event.key === "t" || event.key === "T") {
+                const viewModeBtn = document.querySelector(
+                  VIDEO_VIEW_BTN
+                ) as HTMLElement;
+                if (viewModeBtn) viewModeBtn.click();
+              }
+
+              // F : 전체 화면
+              if (event.key === "f" || event.key === "F") {
+                const fullScreenBtn = document.querySelector(
+                  VIDEO_FULL_BTN
+                ) as HTMLElement;
+                if (fullScreenBtn) fullScreenBtn.click();
+              }
+              // M : 음소거
+              if (event.key === "m" || event.key === "M") {
+                const muteBtn = document.querySelector(
+                  VIDEO_VOLUME_BTN
+                ) as HTMLElement;
+                if (muteBtn) muteBtn.click();
+              }
+            }
+        });
+      }
+    });
+  }, []);
+
   return <></>;
 }