Revert "Feat/release"

README.md

@@ -1,33 +1,33 @@
-# Ani-Relayer
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
 
-> **⚠️ This app is under heavy development.**
+## Getting Started
 
-<img width="1280" height="800" alt="hero" src="https://github.com/user-attachments/assets/f1b5de22-3036-4220-841a-a4512dcecc9b" />
+First, run the development server:
 
-## Getting Started
-[Download At Chrome Web Store](https://chromewebstore.google.com/detail/ghmmhbenboneanchpohomkbpiechghkn?utm_source=item-share-cb)
+```bash
+pnpm dev
+# or
+npm run dev
+```
 
-## Summary
-laftel에서 제공하고 있는 애니메이션들을, DRM 우회 없이 서로 같이 감상하기 위해 제작했습니다. \
-애니메이션 재생시간을 서버에서 관리하고 일괄적으로 propagate해서 같은 시간대에 같은 시점을 볼 수 있게 합니다.
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
 
-각 참여자들은 모두 laftel서비스에서 제공하는 계정이 존재해야 하며,
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
 
-**⚠️ laftel과는 관련이 없는 서드파티 프로그램입니다.**
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
 
-## Stack
+## Making production build
 
-- [Plasmo](https://www.plasmo.com/) for the Extension itself.
-- [SocketIO](https://socket.io/) for realtime BE communication.
-- [Nestjs](https://nestjs.com/) for Backend Server.
+Run the following:
 
-## Builds(for Beta-Testing)
 ```bash
-pnpm install
 pnpm build
+# or
+npm run build
 ```
-build 결과물로 나온 directory를 chrome extensions에 수동으로 추가합니다.
 
-## Sequence Diagram - MV3 flow
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
 
-<img width="862" height="1460" alt="Untitled" src="https://github.com/user-attachments/assets/c2357379-01b9-495b-9bae-18960f9ab804" />
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

src/background/index.ts

@@ -29,6 +29,7 @@ chrome.runtime.onInstalled.addListener(() => {
   storage.set("isCanary", false)
   storage.set("page", "main")
   storage.set("room", null)
-  storage.set("user", null)
+  storage.set("userId", null)
+  storage.set("userType", null)
   storage.set("username", null)
 })

src/background/service/socket-handler.ts

@@ -1,16 +1,18 @@
 import { roomModule } from "~background/service/room"
 import { updateVideo } from "~background/video"
-import type { RoomMetadata, VidData, Chat, UserInfo } from "~const"
+import type { Room, VidData, Chat } from "~const"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
 import { chatModule } from "./chat"
-import { userModule } from "~background/user"
+
+const storage = new Storage()
 
 export const connectHandler = async (id: string) => {
   logModule.devLog("connect")
+  await storage.set("userId", id)
 }
 
-export const roomUpdateHandler = async (body: RoomMetadata) => {
+export const roomUpdateHandler = async (body: Room) => {
   logModule.devLog("roomUpdateHandler")
   await roomModule.update(body)
 }
@@ -23,7 +25,7 @@ export const videoUpdateHandler = (data: VidData) => {
 
 export const disconnectHandler = async () => {
   logModule.devLog("disconnect")
-  await userModule.set(null)
+  await storage.set("userId", null)
   await roomModule.exit()
 }
 
@@ -35,9 +37,4 @@ export const chatUpdateHandler = async (data: Chat) => {
 export const connectErrorHandler = async () => {
   logModule.log("error", "서버 접속 실패, 개발자에게 문의해주세요")
   await roomModule.exit()
-}
-
-export const userHandler = async (data: UserInfo) => {
-  logModule.devLog("userHandler")
-  await userModule.set(data)
 }

src/background/service/socket.ts

@@ -5,8 +5,7 @@ import {
   roomUpdateHandler,
   videoUpdateHandler,
   chatUpdateHandler,
-  connectErrorHandler,
-  userHandler
+  connectErrorHandler
 } from "./socket-handler"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
@@ -38,6 +37,7 @@ export const socketModule = (() => {
         password
       }
     })
+    await storage.set("userType", "host")
     handler()
   }
 
@@ -62,6 +62,7 @@ export const socketModule = (() => {
         password
       }
     })
+    await storage.set("userType", "peer")
     handler()
   }
 
@@ -73,7 +74,6 @@ export const socketModule = (() => {
     instance.on("disconnect", disconnectHandler)
     instance.on("chat", chatUpdateHandler)
     instance.on("connect_error", connectErrorHandler)
-    instance.on("user", userHandler)
   }
 
   const disconnect = async () => {

src/background/user.ts

@@ -1,19 +1,12 @@
 import { Storage } from "@plasmohq/storage"
-import type { UserInfo } from "~const"
-
 const storage = new Storage()
 
 export const userModule = (() => {
   const get = async () => {
     return await storage.get("user")
   }
 
-  const set = async (data: UserInfo) => {
-    await storage.set("user", data)
-  }
-
   return {
-    get,
-    set
+    get
   }
 })()

src/background/video.ts

@@ -1,6 +1,5 @@
 import { socketModule } from "./service/socket"
 import { Storage } from "@plasmohq/storage"
-import type { UserInfo } from "~const"
 
 const storage = new Storage()
 
@@ -49,8 +48,8 @@ export const updateVideo = async (data: VideoData) => {
 }
 
 export const sendVideo = async (data: VideoData) => {
-  const user = await storage.get<UserInfo | null>("user")
-  if (user?.isHost) {
+  const userType = await storage.get("userType")
+  if (userType == "host") {
     socketModule.send("video", data)
   }
 }

src/const.ts

@@ -9,17 +9,17 @@ export const getUrl = async () => {
   return process.env.PLASMO_PUBLIC_BE_PUBLIC!
 }
 
-// export interface Room {
-//   id: number
-//   updatedAt: Date
-//   name: string
-//   password?: string
-//   vidTitle: string
-//   vidEpisode: string
-//   vidData: VidData
-//   host: User
-//   users: User[]
-// }
+export interface Room {
+  id: number
+  updatedAt: Date
+  name: string
+  password?: string
+  vidTitle: string
+  vidEpisode: string
+  vidData: VidData
+  host: User
+  users: User[]
+}
 
 export interface VidData {
   url: string
@@ -32,16 +32,8 @@ export interface User {
   id: number
   createdAt: Date
   name: string
-  room?: RoomMetadata
-  host?: RoomMetadata
-}
-
-export interface UserInfo {
-  id: string
-  createdAt: Date
-  name: string
-  roomId: number
-  isHost: boolean
+  room?: Room
+  host?: Room
 }
 
 export interface Log {

src/popup/layout/header.tsx

@@ -1,6 +1,7 @@
 import { useStorage } from "@plasmohq/storage/hook"
 
 const HeaderMap = {
+  login: "LaftelSync 로그인",
   main: "같이 시청하기",
   setting: "설정",
   chat: "채팅"

src/popup/page/Room.tsx

@@ -7,18 +7,17 @@ import { Btn } from "~popup/component/button"
 import { LuUser, LuCrown } from "react-icons/lu"
 import { Label } from "~popup/component/label"
 import { message } from "~popup/message"
-import type { RoomMetadata, UserInfo } from "~const"
+import type { RoomMetadata } from "~const"
 
 export default function RoomPopup(props) {
   const [room] = useStorage<RoomMetadata | null>("room")
-  const [user] = useStorage<UserInfo | null>("user")
+  const [userId] = useStorage<string | null>("userId")
 
   const exit = async () => {
     await message("room/exit")
   }
 
-  const userId = user?.id
-  const isHost = user?.isHost
+  const isHost = room?.host === userId
 
   return (
     <Full>
@@ -32,7 +31,7 @@ export default function RoomPopup(props) {
           <p className="font-bold text-gray-950 text-2xl mb-4">방 접속자</p>
           <div className="flex flex-col gap-2">
             {room?.user?.length == 0 && <p>방 접속자가 없습니다.</p>}
-            {room?.user && room.user.map((peer) => Peer(peer, user))}
+            {room?.user && room.user.map((user) => Peer(user, userId, isHost))}
           </div>
         </div>
         <div className="flex flex-col gap-2">
@@ -50,9 +49,12 @@ export default function RoomPopup(props) {
   )
 }
 
-function Peer(peer: RoomMetadata["user"][number], user: UserInfo | null) {
-  const isMe = peer.id === user?.id
-  const isHost = user?.isHost
+function Peer(
+  peer: RoomMetadata["user"][number],
+  userId: string,
+  isHost: boolean
+) {
+  const isMe = peer.id === userId
 
   const kickHandler = () => {
     message("room/kick", {

src/popup/page/Setting.tsx

@@ -14,14 +14,14 @@ export default function SettingPopup(props) {
   const handleInfoPage = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     message("page/newTab", {
-      url: "https://github.com/koderpark/ani-relayer"
+      url: "https://blog.koder.page/laftelsync"
     })
   }
 
   const handleReportPage = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     message("page/newTab", {
-      url: "https://github.com/koderpark/ani-relayer/issues"
+      url: "https://github.com/koderpark/laftelSyncExt/issues"
     })
   }