Feat/release

.github/workflows/version.yml

@@ -0,0 +1,49 @@
+name: Version Bump
+
+on:
+  pull_request:
+    branches: [main]
+    types: [opened]
+
+jobs:
+  version-bump:
+    if: startsWith(github.event.pull_request.title, 'v')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Extract version from PR title
+        id: extract-version
+        run: |
+          if [[ "${{ github.event.pull_request.title }}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            echo "version=${BASH_REMATCH[0]}" >> $GITHUB_OUTPUT
+          else
+            echo "❌ No valid version found in PR title"
+            exit 1
+          fi
+
+      - name: Bump version
+        run: |
+          VERSION=${{ steps.extract-version.outputs.version }}
+          npm version $VERSION --no-git-tag-version
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Commit & Push
+        run: |
+          VERSION=${{ steps.extract-version.outputs.version }}
+          git add package.json package-lock.json
+          git commit -m "chore: bump version to v$VERSION"
+          git push https://x-access-token:${{ secrets.GH_TOKEN }}@github.com/koderpark/ani-relayer.git main --follow-tags

README.md

@@ -1,33 +1,33 @@
-This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+# Ani-Relayer
 
-## Getting Started
+> **⚠️ This app is under heavy development.**
 
-First, run the development server:
+<img width="1280" height="800" alt="hero" src="https://github.com/user-attachments/assets/f1b5de22-3036-4220-841a-a4512dcecc9b" />
 
-```bash
-pnpm dev
-# or
-npm run dev
-```
+## Getting Started
+[Download At Chrome Web Store](https://chromewebstore.google.com/detail/ghmmhbenboneanchpohomkbpiechghkn?utm_source=item-share-cb)
 
-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`.
+## Summary
+laftel에서 제공하고 있는 애니메이션들을, DRM 우회 없이 서로 같이 감상하기 위해 제작했습니다. \
+애니메이션 재생시간을 서버에서 관리하고 일괄적으로 propagate해서 같은 시간대에 같은 시점을 볼 수 있게 합니다.
 
-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/)
+**⚠️ laftel과는 관련이 없는 서드파티 프로그램입니다.**
 
-## Making production build
+## Stack
 
-Run the following:
+- [Plasmo](https://www.plasmo.com/) for the Extension itself.
+- [SocketIO](https://socket.io/) for realtime BE communication.
+- [Nestjs](https://nestjs.com/) for Backend Server.
 
+## Builds(for Beta-Testing)
 ```bash
+pnpm install
 pnpm build
-# or
-npm run build
 ```
+build 결과물로 나온 directory를 chrome extensions에 수동으로 추가합니다.
 
-This should create a production bundle for your extension, ready to be zipped and published to the stores.
-
-## Submit to the webstores
+## Sequence Diagram - MV3 flow
 
-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!
+<img width="862" height="1460" alt="Untitled" src="https://github.com/user-attachments/assets/c2357379-01b9-495b-9bae-18960f9ab804" />

src/background/index.ts

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

src/background/service/socket-handler.ts

@@ -1,18 +1,16 @@
 import { roomModule } from "~background/service/room"
 import { updateVideo } from "~background/video"
-import type { Room, VidData, Chat } from "~const"
+import type { RoomMetadata, VidData, Chat, UserInfo } from "~const"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
 import { chatModule } from "./chat"
-
-const storage = new Storage()
+import { userModule } from "~background/user"
 
 export const connectHandler = async (id: string) => {
   logModule.devLog("connect")
-  await storage.set("userId", id)
 }
 
-export const roomUpdateHandler = async (body: Room) => {
+export const roomUpdateHandler = async (body: RoomMetadata) => {
   logModule.devLog("roomUpdateHandler")
   await roomModule.update(body)
 }
@@ -25,7 +23,7 @@ export const videoUpdateHandler = (data: VidData) => {
 
 export const disconnectHandler = async () => {
   logModule.devLog("disconnect")
-  await storage.set("userId", null)
+  await userModule.set(null)
   await roomModule.exit()
 }
 
@@ -37,4 +35,9 @@ 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,7 +5,8 @@ import {
   roomUpdateHandler,
   videoUpdateHandler,
   chatUpdateHandler,
-  connectErrorHandler
+  connectErrorHandler,
+  userHandler
 } from "./socket-handler"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
@@ -37,7 +38,6 @@ export const socketModule = (() => {
         password
       }
     })
-    await storage.set("userType", "host")
     handler()
   }
 
@@ -62,7 +62,6 @@ export const socketModule = (() => {
         password
       }
     })
-    await storage.set("userType", "peer")
     handler()
   }
 
@@ -74,6 +73,7 @@ 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,12 +1,19 @@
 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
+    get,
+    set
   }
 })()

src/background/video.ts

@@ -1,5 +1,6 @@
 import { socketModule } from "./service/socket"
 import { Storage } from "@plasmohq/storage"
+import type { UserInfo } from "~const"
 
 const storage = new Storage()
 
@@ -48,8 +49,8 @@ export const updateVideo = async (data: VideoData) => {
 }
 
 export const sendVideo = async (data: VideoData) => {
-  const userType = await storage.get("userType")
-  if (userType == "host") {
+  const user = await storage.get<UserInfo | null>("user")
+  if (user?.isHost) {
     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,8 +32,16 @@ export interface User {
   id: number
   createdAt: Date
   name: string
-  room?: Room
-  host?: Room
+  room?: RoomMetadata
+  host?: RoomMetadata
+}
+
+export interface UserInfo {
+  id: string
+  createdAt: Date
+  name: string
+  roomId: number
+  isHost: boolean
 }
 
 export interface Log {

src/popup/layout/header.tsx

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

src/popup/page/Room.tsx

@@ -7,17 +7,18 @@ 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 } from "~const"
+import type { RoomMetadata, UserInfo } from "~const"
 
 export default function RoomPopup(props) {
   const [room] = useStorage<RoomMetadata | null>("room")
-  const [userId] = useStorage<string | null>("userId")
+  const [user] = useStorage<UserInfo | null>("user")
 
   const exit = async () => {
     await message("room/exit")
   }
 
-  const isHost = room?.host === userId
+  const userId = user?.id
+  const isHost = user?.isHost
 
   return (
     <Full>
@@ -31,7 +32,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((user) => Peer(user, userId, isHost))}
+            {room?.user && room.user.map((peer) => Peer(peer, user))}
           </div>
         </div>
         <div className="flex flex-col gap-2">
@@ -49,12 +50,9 @@ export default function RoomPopup(props) {
   )
 }
 
-function Peer(
-  peer: RoomMetadata["user"][number],
-  userId: string,
-  isHost: boolean
-) {
-  const isMe = peer.id === userId
+function Peer(peer: RoomMetadata["user"][number], user: UserInfo | null) {
+  const isMe = peer.id === user?.id
+  const isHost = user?.isHost
 
   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://blog.koder.page/laftelsync"
+      url: "https://github.com/koderpark/ani-relayer"
     })
   }
 
   const handleReportPage = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     message("page/newTab", {
-      url: "https://github.com/koderpark/laftelSyncExt/issues"
+      url: "https://github.com/koderpark/ani-relayer/issues"
     })
   }