Initial commit: Web-SyncPlay moved into Streamer

.dockerignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/.next
+/build
+/.dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea
+.iml

.env

@@ -0,0 +1,11 @@
+# to see if your .env file is working correctly by running `docker-compose config`
+
+# the site name
+SITE_NAME="Web-SyncPlay"
+
+# your domain from which sessions are being served
+# remove trailing slash !!!
+PUBLIC_DOMAIN="https://web-syncplay.de"
+
+# modify if you pass your own running redis instance
+REDIS_URL="redis://localhost:6379"

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,7 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ""
+---

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,7 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[FEAT]"
+labels: enhancement
+assignees: ""
+---

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: "37 6 * * 4"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/docker-publish.yml

@@ -0,0 +1,57 @@
+name: Docker
+
+on: [push]
+
+jobs:
+  # Push image to GitHub Packages and docker hub.
+  # See also https://docs.docker.com/docker-hub/builds/
+  push:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Prepare
+        id: prep
+        run: |
+          DOCKER_IMAGE="websyncplay/websyncplay"
+          VERSION=edge
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/}
+          elif [[ $GITHUB_REF == refs/heads/* ]]; then
+            VERSION=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
+          elif [[ $GITHUB_REF == refs/pull/* ]]; then
+            VERSION=pr-${{ github.event.number }}
+          fi
+
+          # Use Docker `latest` tag convention
+          [ "$VERSION" == "main" ] && VERSION=latest
+
+          TAG="${DOCKER_IMAGE}:${VERSION}"
+          echo ::set-output name=version::${VERSION}
+          echo ::set-output name=tag::${TAG}
+          echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Build and push to docker hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.prep.outputs.tag }}
+          labels: |
+            org.opencontainers.image.source=${{ github.event.repository.html_url }}
+            org.opencontainers.image.created=${{ steps.prep.outputs.created }}
+            org.opencontainers.image.revision=${{ github.sha }}

.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/.next
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea
+.iml
+log.txt
+*.iml

.prettierignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.next
+
+# testing
+/db
+/coverage
+
+# production
+/build
+public/sw.js
+public/workbox-*.js
+public/fallback-*.js
+public/*.map
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+.vscode/
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+next-env.d.ts

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "jsxSingleQuote": true,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

Dockerfile

@@ -0,0 +1,61 @@
+# Install dependencies only when needed
+FROM node:21.0-alpine AS deps
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:21.0-alpine AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM node:21.0-alpine AS runner
+WORKDIR /app
+
+ENV SITE_NAME="Web-SyncPlay"
+ENV PUBLIC_DOMAIN="https://web-syncplay.de"
+ENV REDIS_URL="redis://redis:6379"
+
+EXPOSE 3000
+
+LABEL org.opencontainers.image.url="https://web-syncplay.de" \
+      org.opencontainers.image.description="Watch videos or play music in sync with your friends" \
+      org.opencontainers.image.title="Web-SyncPlay" \
+      maintainer="Yasamato <https://github.com/Yasamato>"
+
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nextjs -u 1001 && \
+    apk add --no-cache curl python3 py3-pip &&  \
+    curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /usr/local/bin/yt-dlp && \
+    chmod a+rx /usr/local/bin/yt-dlp
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 8081
+
+ENV PORT 8081
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["sh", "-c", "node server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Yasamato (Leo Jung)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,170 @@
----
-title: Streamer
-emoji: 📚
-colorFrom: red
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+[![Website](https://img.shields.io/website?down_color=red&down_message=offline&label=Website&up_color=green&up_message=online&url=https%3A%2F%2Fweb-syncplay.de)](https://demo.web-syncplay.de)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/35f7884623744a5c8ad64e184f6f5dcf)](https://www.codacy.com/gh/Web-SyncPlay/Web-SyncPlay/dashboard?utm_source=github.com&utm_medium=referral&utm_content=Web-SyncPlay/Web-SyncPlay&utm_campaign=Badge_Grade)
+[![CodeFactor](https://www.codefactor.io/repository/github/web-syncplay/web-syncplay/badge)](https://www.codefactor.io/repository/github/web-syncplay/web-syncplay)
+[![Docker Image Size (tag)](https://img.shields.io/docker/image-size/websyncplay/websyncplay/latest?logo=docker)](https://hub.docker.com/r/websyncplay/websyncplay)
+
+# Web-SyncPlay
+
+Watch videos, listen to music or tune in for a live stream and all that with your friends. Web-SyncPlay is a software
+that lets you synchronise your playback with all your friends with a clean modern Web-UI written
+in [React](https://reactjs.org/) for [Next.js](https://nextjs.org), designed
+using [Tailwind CSS](https://tailwindcss.com/) and build on top
+of [react-player](https://github.com/cookpete/react-player).
+
+## Supported formats
+
+- YouTube videos
+
+- Facebook videos
+
+- SoundCloud tracks
+
+- Streamable videos
+
+- Vimeo videos
+
+- Wistia videos
+
+- Twitch videos
+
+- DailyMotion videos
+
+- Vidyard videos
+
+- Kaltura videos
+
+- Files playable via `<video>` or `<audio>` element as well as:
+
+  - HLS streams
+  - DASH streams
+
+- Everything that is extractable via [yt-dlp](https://github.com/yt-dlp/yt-dlp) and allowed
+  via [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
+
+## Known limitations
+
+I would have loved to keep the original Player-UIs for ease of use, but they are usually being embedded as an iframe, as
+such the software would be limited to the included API of the vendors. This is sadly not an option if you want to make
+sure that everyone stays synchronised and there is no feedback loop of commands.
+
+## Getting started
+
+To run this software on your own hardware, you will need to have [Docker](https://www.docker.com/) or any other
+container engine installed.
+
+### docker-compose
+
+For ease of use there is an
+example [docker-compose.yml](https://github.com/Web-SyncPlay/Web-SyncPlay/docker-compose.yml) file provided, which you
+can copy and adjust to fit your deployment.
+
+Simply create a `.env` file in the same directory and run `docker-compose config` to see if the docker-compose file is
+correctly configured.
+
+### docker
+
+Otherwise, you could simply run the images separately via the `docker` command:
+
+To start the temporary in memory database [redis](https://redis.io):
+
+```bash
+docker run -d -p 6379:6379 redis
+```
+
+Now run the actual service via:
+
+```bash
+docker run -d -p 8081:8081 -e REDIS_URL=redis://your-ip:6379 websyncplay/websyncplay
+```
+
+### Manual setup
+
+To get started with running the project directly via node, clone the repository via:
+
+```bash
+git clone https://github.com/Web-SyncPlay/Web-SyncPlay
+```
+
+When you are trying to develop on the project simply run
+
+```bash
+yarn dev
+```
+
+You can now view the project under `http://localhost:3000` with hot reloads
+
+To run an optimized deployment you need to run the following two commands:
+
+```bash
+yarn build && yarn start
+```
+
+### Environment variables
+
+| Parameter       | Function                                       | Default                |
+| --------------- | ---------------------------------------------- | ---------------------- |
+| `SITE_NAME`     | The name of your site                          | `"The Anime Index"`    |
+| `PUBLIC_DOMAIN` | Your domain or IP, remove trailing slash       | `"https://piracy.moe"` |
+| `REDIS_URL`     | Connection string for the redis cache database | `"redis://redis:6379"` |
+
+After deployment open your browser and visit http://localhost:8081 or however you address the server. It is
+**_strongly_** recommended putting a reverse proxy using TLS/SSL in front of this service.
+
+## Adding synchronised playback to your website
+
+> **Warning**: currently not functional, if you want to keep using it use the v1.0 tag
+
+A necessary prerequisite is to make your video files available to this service as e.g. HLS/DASH streams or as a simple
+natively playable file via an endpoint publicly accessible via a URL. Make sure your CORS setting allow content to be
+fetched from this service.
+
+Having started the service on one of your servers you can then embed the included embed into your website. You don't
+have to manually update the iframe when playing a playlist, as this is already handled automatically.
+
+- `<YOUR_ENDPOINT>`: your endpoint from where this service will be accessible, e.g. `https://sync.example.com`
+
+- `<ROOM_ID>`: the room ID in which participants will be kept in sync. It is recommended to handle the generation of new
+  ID-string on your side, you don't have to do anything on the server side here, the room will be auto created.
+
+- `<YOUR_MEDIA_URL>`: publicly accessible media url, from which you serve your video/audio
+
+For playing only a single file the service can be embedded via
+
+```html
+<iframe
+  allow="fullscreen; autoplay; encrypted-media; picture-in-picture"
+  style="border:none;"
+  width="100%"
+  height="100%"
+  src="<YOUR_ENDPOINT>/embed/player/<ROOM_ID>?url=<YOUR_MEDIA_URL>"
+>
+</iframe>
+```
+
+If you want to sync playback across a playlist, you need to adjust the embed
+
+- `<START_INDEX>`: index of the `queue` array, indicates from which point playback should start
+
+- `<ITEM_1>`, `<ITEM_2>` ... `<ITEM_N>`: playlist item, the same as `<YOUR_MEDIA_URL>`, they need to be passed in the
+  order you want them to be ordered
+
+```html
+<iframe
+  allow="fullscreen; autoplay; encrypted-media; picture-in-picture"
+  style="border:none;"
+  width="100%"
+  height="100%"
+  src="<YOUR_ENDPOINT>/embed/player/<ROOM_ID>?queueIndex=<START_INDEX>&queue=<ITEM_1>&queue=<ITEM_2>...&queue=<ITEM_N>"
+>
+</iframe>
+```
+
+You can already disable the player UI by adding `&controlsHidden=true` to the src link of the embed.
+
+It is also possible to disable the syncing handler by adding `&showRootPlayer=true`. This is not recommended as this
+will break the sync-process of the playback.
+
+## Future developments
+
+It is planned to create an api to communicate with the player and be able to use your own custom player to control
+playback.

components/Embed.tsx

@@ -0,0 +1,71 @@
+"use client"
+import { FC, useEffect, useState } from "react"
+import Player from "./player/Player"
+import {
+  ClientToServerEvents,
+  createClientSocket,
+  ServerToClientEvents,
+} from "../lib/socket"
+import { Socket } from "socket.io-client"
+import ConnectingAlert from "./alert/ConnectingAlert"
+
+interface Props {
+  id: string
+}
+
+let connecting = false
+
+const Embed: FC<Props> = ({ id }) => {
+  const [connected, setConnected] = useState(false)
+  const [socket, setSocket] = useState<Socket<
+    ServerToClientEvents,
+    ClientToServerEvents
+  > | null>(null)
+
+  useEffect(() => {
+    fetch("/api/socketio").finally(() => {
+      if (socket !== null) {
+        setConnected(socket.connected)
+      } else {
+        const newSocket = createClientSocket(id)
+        newSocket.on("connect", () => {
+          setConnected(true)
+        })
+        setSocket(newSocket)
+      }
+    })
+
+    return () => {
+      if (socket !== null) {
+        socket.disconnect()
+      }
+    }
+  }, [id, socket])
+
+  const connectionCheck = () => {
+    if (socket !== null && socket.connected) {
+      connecting = false
+      setConnected(true)
+      return
+    }
+    setTimeout(connectionCheck, 100)
+  }
+
+  if (!connected || socket === null) {
+    if (!connecting) {
+      connecting = true
+      connectionCheck()
+    }
+    return (
+      <div className={"flex justify-center"}>
+        <ConnectingAlert />
+      </div>
+    )
+  }
+
+  return (
+      <Player roomId={id} socket={socket}  fullHeight={true}/>
+  )
+}
+
+export default Embed

components/Footer.tsx

@@ -0,0 +1,39 @@
+import { FC } from "react"
+import IconGithub from "./icon/IconGithub"
+import NewTabLink from "./action/NewTabLink"
+import IconCopyright from "./icon/IconCopyright"
+
+interface Props {
+  error?: number
+}
+
+const Footer: FC<Props> = ({ error }) => {
+  return (
+    <footer className={"flex flex-col bg-dark-900 py-1 px-4"}>
+      {error && <div>Error {error}</div>}
+      <div className={"text-sm flex flex-col gap-1 sm:flex-row sm:items-center"}>
+        <div className={"flex flex-row items-center"}>
+          <IconCopyright sizeClassName={"h-3 w-3"}/>
+          <NewTabLink href={"https://github.com/Yasamato"}>Yasamato</NewTabLink>
+          2022,
+        </div>
+
+        <div>
+          Icons by
+          <NewTabLink href={"https://heroicons.com"}>Heroicons</NewTabLink>
+          and
+          <NewTabLink href={"https://fontawesome.com"}>Font Awesome</NewTabLink>
+        </div>
+
+        <NewTabLink
+          className={"ml-auto flex items-center"}
+          href={"https://github.com/Web-SyncPlay/Web-SyncPlay"}
+        >
+          <IconGithub className={"mr-1"} /> Github
+        </NewTabLink>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

components/Head.tsx

@@ -0,0 +1,44 @@
+import NextHead from "next/head"
+import { getSiteDomain, getSiteName } from "../lib/env"
+import { useRouter } from "next/router"
+
+export interface MetaProps {
+  title?: string
+  description?: string
+  image?: string
+  type?: string
+  robots?: string
+}
+
+const Head = ({ customMeta }: { customMeta?: MetaProps }) => {
+  const router = useRouter()
+
+  const meta: MetaProps = {
+    title: getSiteName(),
+    description: "Watch videos or play music in sync with your friends",
+    type: "website",
+    robots: "noindex, noarchive, follow",
+    image: getSiteDomain() + "/apple-touch-icon.png",
+    ...customMeta,
+  }
+
+  return (
+    <NextHead>
+      <title>{meta.title}</title>
+      <meta property='og:url' content={`${getSiteDomain()}${router.asPath}`} />
+      <link rel='canonical' href={`${getSiteDomain()}${router.asPath}`} />
+      <meta property='og:type' content='website' />
+      <meta property='og:site_name' content={getSiteName()} />
+      <meta property='og:description' content={meta.description} />
+      <meta property='og:title' content={meta.title} />
+      {meta.image && <meta property='og:image' content={meta.image} />}
+      <meta name='twitter:card' content='summary' />
+      <meta name='twitter:title' content={meta.title} />
+      <meta name='twitter:description' content={meta.description} />
+      {meta.image && <meta name='twitter:image' content={meta.image} />}
+      <meta name={"robots"} content={meta.robots} />
+    </NextHead>
+  )
+}
+
+export default Head

components/Layout.tsx

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from "react"
+import Navbar from "./Navbar"
+import NoScriptAlert from "./alert/NoScriptAlert"
+import Footer from "./Footer"
+import Head, { MetaProps } from "./Head"
+
+interface Props {
+  meta: MetaProps
+  showNavbar?: boolean
+  error?: number
+  roomId?: string
+  children?: ReactNode
+}
+
+const Layout: FC<Props> = ({
+  meta,
+  showNavbar = true,
+  error,
+  roomId,
+  children,
+}) => {
+  return (
+    <div className={"flex flex-col min-h-screen"}>
+      <Head customMeta={meta} />
+      {showNavbar && (
+        <header>
+          <Navbar roomId={roomId} />
+        </header>
+      )}
+
+      <noscript>
+        <NoScriptAlert />
+      </noscript>
+
+      <main className={"relative flex flex-col grow p-2"}>{children}</main>
+
+      <Footer error={error} />
+    </div>
+  )
+}
+
+export default Layout

components/Navbar.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link"
+import Image from "next/image"
+import { getSiteDomain, getSiteName } from "../lib/env"
+import Button from "./action/Button"
+import IconShare from "./icon/IconShare"
+import React, { useState } from "react"
+import Modal from "./modal/Modal"
+import InputClipboardCopy from "./input/InputClipboardCopy"
+import { Tooltip } from "react-tooltip"
+
+const Navbar = ({ roomId }: { roomId?: string }) => {
+  const [showShare, setShowShare] = useState(false)
+
+  return (
+    <div className={"py-1 px-2 flex flex-row gap-1 items-stretch bg-dark-900"}>
+      <Link
+        href={"/"}
+        className={
+          "flex p-1 shrink-0 flex-row gap-1 items-center rounded action"
+        }
+      >
+        <Image
+          src={"/logo_white.png"}
+          alt={"Web-SyncPlay logo"}
+          width={36}
+          height={36}
+        />
+        <span className={"hide-below-sm"}>{getSiteName()}</span>
+      </Link>
+      {roomId && (
+        <>
+          <Modal
+            title={"Invite your friends"}
+            show={showShare}
+            close={() => setShowShare(false)}
+          >
+            <div>Share this link to let more people join in on the fun</div>
+            <InputClipboardCopy
+              className={"bg-dark-1000"}
+              value={getSiteDomain() + "/room/" + roomId}
+            />
+          </Modal>
+          <Button
+            tooltip={"Share the room link"}
+            id={"navbar"}
+            actionClasses={"hover:bg-primary-800 active:bg-primary-700"}
+            className={"ml-auto p-2 bg-primary-900"}
+            onClick={() => setShowShare(true)}
+          >
+            <div className={"flex items-center mx-1"}>
+              <IconShare className={"mr-1"} />
+              Share
+            </div>
+          </Button>
+        </>
+      )}
+
+      <Tooltip
+        anchorId={"navbar"}
+        place={"bottom"}
+        style={{
+          backgroundColor: "var(--dark-700)",
+        }}
+      />
+    </div>
+  )
+}
+
+export default Navbar

components/Room.tsx

@@ -0,0 +1,113 @@
+"use client"
+import { FC, useEffect, useState } from "react"
+import Player from "./player/Player"
+import {
+  ClientToServerEvents,
+  createClientSocket,
+  ServerToClientEvents,
+} from "../lib/socket"
+import Button from "./action/Button"
+import { Socket } from "socket.io-client"
+import ConnectingAlert from "./alert/ConnectingAlert"
+import PlaylistMenu from "./playlist/PlaylistMenu"
+import IconLoop from "./icon/IconLoop"
+import InputUrl from "./input/InputUrl"
+import UserList from "./user/UserList"
+
+interface Props {
+  id: string
+}
+
+let connecting = false
+
+const Room: FC<Props> = ({ id }) => {
+  const [connected, setConnected] = useState(false)
+  const [socket, setSocket] = useState<Socket<
+    ServerToClientEvents,
+    ClientToServerEvents
+  > | null>(null)
+  const [url, setUrl] = useState("")
+
+  useEffect(() => {
+    fetch("/api/socketio").finally(() => {
+      if (socket !== null) {
+        setConnected(socket.connected)
+      } else {
+        const newSocket = createClientSocket(id)
+        newSocket.on("connect", () => {
+          setConnected(true)
+        })
+        setSocket(newSocket)
+      }
+    })
+
+    return () => {
+      if (socket !== null) {
+        socket.disconnect()
+      }
+    }
+  }, [id, socket])
+
+  const connectionCheck = () => {
+    if (socket !== null && socket.connected) {
+      connecting = false
+      setConnected(true)
+      return
+    }
+    setTimeout(connectionCheck, 100)
+  }
+
+  if (!connected || socket === null) {
+    if (!connecting) {
+      connecting = true
+      connectionCheck()
+    }
+    return (
+      <div className={"flex justify-center"}>
+        <ConnectingAlert />
+      </div>
+    )
+  }
+
+  return (
+    <div className={"flex flex-col sm:flex-row gap-1"}>
+      <div className={"grow"}>
+        <Player roomId={id} socket={socket} />
+
+        <div className={"flex flex-row gap-1 p-1"}>
+          <Button
+            tooltip={"Do a forced manual sync"}
+            className={"p-2 flex flex-row gap-1 items-center"}
+            onClick={() => {
+              console.log("Fetching update", socket?.id)
+              socket?.emit("fetch")
+            }}
+          >
+            <IconLoop className={"hover:animate-spin"} />
+            <div className={"hidden-below-sm"}>Manual sync</div>
+          </Button>
+          <InputUrl
+            className={"grow"}
+            url={url}
+            placeholder={"Play url now"}
+            tooltip={"Play given url now"}
+            onChange={setUrl}
+            onSubmit={() => {
+              console.log("Requesting", url, "now")
+              socket?.emit("playUrl", url)
+              setUrl("")
+            }}
+          >
+            Play
+          </InputUrl>
+        </div>
+
+        <UserList socket={socket} />
+      </div>
+
+      <PlaylistMenu socket={socket} />
+    </div>
+  )
+}
+
+export default Room

components/action/Button.tsx

@@ -0,0 +1,40 @@
+import { FC, MouseEventHandler, ReactNode } from "react"
+import classNames from "classnames"
+
+interface Props {
+  id?: string
+  tooltip: string
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  className?: string
+  type?: "button" | "submit" | "reset"
+  actionClasses?: string
+  disabled?: boolean
+  children?: ReactNode
+}
+
+const Button: FC<Props> = ({
+  id,
+  tooltip,
+  onClick,
+  className = "",
+  type = "button",
+  actionClasses = "action",
+  disabled = false,
+  children,
+}) => {
+  return (
+    <button
+      id={id}
+      data-tooltip-content={tooltip}
+      data-tooltip-variant={"dark"}
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+      className={classNames("p-2 rounded", actionClasses, className)}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button

components/action/DeleteButton.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react"
+import ControlButton from "../input/ControlButton"
+import IconDelete from "../icon/IconDelete"
+
+interface Props {
+  tooltip: string
+  onClick: () => void
+  className?: string
+}
+
+const DeleteButton: FC<Props> = ({ tooltip, onClick }) => {
+  return (
+    <ControlButton
+      className={"transition-colors text-red-600 hover:text-red-500"}
+      onClick={onClick}
+      interaction={() => {}}
+      tooltip={tooltip}
+    >
+      <IconDelete />
+    </ControlButton>
+  )
+}
+
+export default DeleteButton

components/action/DropUp.tsx

@@ -0,0 +1,67 @@
+import React, { FC, ReactNode, useEffect, useState } from "react"
+import ControlButton from "../input/ControlButton"
+import classNames from "classnames"
+
+interface Props {
+  tooltip: string
+  open?: boolean
+  className?: string
+  menuChange?: (open: boolean) => void
+  interaction: (touch: boolean) => void
+  buttonContent: ReactNode
+  children?: ReactNode
+}
+
+const DropUp: FC<Props> = ({
+  tooltip,
+  open,
+  className,
+  menuChange,
+  interaction,
+  buttonContent,
+  children,
+}) => {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    if (typeof open !== "boolean") return
+
+    if (menuOpen !== open) {
+      setMenuOpen(open)
+      if (menuChange) {
+        menuChange(open)
+      }
+    }
+  }, [open, menuChange, menuOpen])
+
+  return (
+    <div className={"relative"}>
+      {menuOpen && (
+        <div
+          className={classNames(
+            "absolute bottom-[60px] rounded bg-dark-900",
+            "transition-height transition-width",
+            className
+          )}
+        >
+          {children}
+        </div>
+      )}
+      <ControlButton
+        tooltip={(menuOpen ? "Close " : "Open ") + tooltip}
+        className={menuOpen ? "bg-dark-800" : ""}
+        onClick={() => {
+          if (menuChange) {
+            menuChange(!menuOpen)
+          }
+          setMenuOpen(!menuOpen)
+        }}
+        interaction={interaction}
+      >
+        {buttonContent}
+      </ControlButton>
+    </div>
+  )
+}
+
+export default DropUp

components/action/InteractionHandler.tsx

@@ -0,0 +1,104 @@
+import React, { FC, ReactNode, useState } from "react"
+
+export const LEFT_MOUSE_CLICK = 0
+
+interface Props {
+  tooltip?: string
+  className?: string
+  prevent?: boolean
+  onClick?: (
+    e: React.TouchEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    touch: boolean
+  ) => void
+  onMove?: (
+    e: React.TouchEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    touch: boolean
+  ) => void
+  tabIndex?: number
+  onKey?: (key: string) => void
+  children?: ReactNode
+}
+
+const InteractionHandler: FC<Props> = ({
+  tooltip,
+  className,
+  prevent = true,
+  onClick,
+  onMove,
+  onKey,
+  tabIndex,
+  children,
+}) => {
+  const [touched, setTouched] = useState(false)
+  const [touchedTime, setTouchedTime] = useState(0)
+
+  const touch = () => {
+    setTouched(true)
+    setTouchedTime(new Date().getTime())
+
+    setTimeout(() => {
+      if (new Date().getTime() - touchedTime > 150) {
+        setTouched(false)
+      }
+    }, 200)
+  }
+
+  return (
+    <div
+      data-tooltip-content={tooltip}
+      className={className}
+      tabIndex={tabIndex}
+      onTouchStart={(e) => {
+        touch()
+        if (onClick) {
+          if (prevent) {
+            console.log("Prevent default touch start")
+            e.preventDefault()
+            e.stopPropagation()
+          }
+        }
+      }}
+      onTouchEnd={(e) => {
+        touch()
+        if (onClick) {
+          if (prevent) {
+            console.log("Prevent default touch end")
+            e.preventDefault()
+            e.stopPropagation()
+          }
+          onClick(e, true)
+        }
+      }}
+      onTouchMove={(e) => {
+        if (onMove) {
+          onMove(e, true)
+        }
+      }}
+      onMouseDown={(_) => {
+        // ignored
+      }}
+      onMouseUp={(e) => {
+        if (e.button !== LEFT_MOUSE_CLICK || touched) {
+          return
+        }
+        if (onClick) {
+          onClick(e, false)
+        }
+      }}
+      onMouseMove={(e) => {
+        if (onMove) {
+          onMove(e, false)
+        }
+      }}
+      onKeyDownCapture={(e) => {
+        if (onKey) {
+          onKey(e.key)
+        }
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default InteractionHandler

components/action/NewTabLink.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react"
+import classNames from "classnames"
+
+interface Props {
+  href: string
+  className?: string
+  children?: ReactNode
+}
+
+const NewTabLink: FC<Props> = ({ href, children, className }) => {
+  return (
+    <a
+      href={href}
+      className={classNames(
+        "mx-1 transition-colors hover:text-primary-900",
+        className
+      )}
+      target={"_blank"}
+      rel={"noreferrer"}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default NewTabLink

components/alert/Alert.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode, useState } from "react"
+import IconClose from "../icon/IconClose"
+import Button from "../action/Button"
+import classNames from "classnames"
+
+export interface AlertProps {
+  canClose?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+const Alert: FC<AlertProps> = ({
+  canClose = true,
+  className = "",
+  children,
+}) => {
+  const [closed, setClosed] = useState(false)
+  if (closed) {
+    return <></>
+  }
+
+  return (
+    <div
+      className={classNames(
+        "rounded bg-dark-800 p-2 flex gap-1 items-center flex-row justify-between",
+        className
+      )}
+    >
+      <div className={"flex flex-row gap-1 items-center"}>{children}</div>
+      {canClose && (
+        <Button tooltip={"Dismiss"} onClick={() => setClosed(true)}>
+          <IconClose />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default Alert

components/alert/AutoplayAlert.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from "react"
+import Alert from "./Alert"
+import Button from "../action/Button"
+import IconSoundMute from "../icon/IconSoundMute"
+
+interface Props {
+  onClick: () => void
+}
+
+const AutoplayAlert: FC<Props> = ({ onClick }) => {
+  return (
+    <Alert className={"rounded opacity-90"}>
+      Sound has been muted for autoplay
+      <Button className={"p-2 mr-4"} onClick={onClick} tooltip={"Unmute"}>
+        <IconSoundMute />
+      </Button>
+    </Alert>
+  )
+}
+
+export default AutoplayAlert

components/alert/BufferAlert.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react"
+import Alert, { AlertProps } from "./Alert"
+import styles from "./Loading.module.css"
+import classNames from "classnames"
+
+const BufferAlert: FC<AlertProps> = ({ className, canClose }) => {
+  return (
+    <Alert
+      className={classNames("cursor-progress", className)}
+      canClose={canClose}
+    >
+      <div className={styles.loading}>Buffering ...</div>
+    </Alert>
+  )
+}
+
+export default BufferAlert

components/alert/ConnectingAlert.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import IconLoading from "../icon/IconLoading"
+import Alert, { AlertProps } from "./Alert"
+import styles from "./Loading.module.css"
+import classNames from "classnames"
+
+const ConnectingAlert: FC<AlertProps> = ({
+  className = "",
+  canClose = false,
+}) => {
+  return (
+    <Alert canClose={canClose} className={classNames("cursor-wait", className)}>
+      <IconLoading className={"hide-below-sm animate-spin"} />
+      <div className={styles.loading}>Connecting ...</div>
+    </Alert>
+  )
+}
+
+export default ConnectingAlert

components/alert/Loading.module.css

@@ -0,0 +1,12 @@
+.loading {
+  font-family: monospace;
+  display: inline-block;
+  clip-path: inset(0 3ch 0 0);
+  animation: l 1s steps(4) infinite;
+}
+
+@keyframes l {
+  to {
+    clip-path: inset(0 -1ch 0 0);
+  }
+}

components/alert/NoScriptAlert.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from "react"
+import Alert, { AlertProps } from "./Alert"
+
+const NoScriptAlert: FC<AlertProps> = ({ className = "", canClose = true }) => {
+  return (
+    <Alert className={className} canClose={canClose}>
+      Well... it seems like you disabled javascript.
+    </Alert>
+  )
+}
+
+export default NoScriptAlert

components/icon/Icon.tsx

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react"
+import classNames from "classnames"
+
+export interface IconProps {
+  sizeClassName?: string
+  className?: string
+  viewBox?: string
+  children?: ReactNode
+}
+
+const Icon: FC<IconProps> = ({
+  sizeClassName = "h-5 w-5",
+  viewBox = "0 0 24 24",
+  className = "",
+  children,
+}) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      className={classNames(sizeClassName, className)}
+      fill='none'
+      viewBox={viewBox}
+      stroke='currentColor'
+    >
+      {children}
+    </svg>
+  )
+}
+
+export default Icon

components/icon/IconBackward.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconBackward: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z'
+      />
+    </Icon>
+  )
+}
+
+export default IconBackward

components/icon/IconBigPause.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconBigPause: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} sizeClassName={"h-10 w-10"}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z'
+      />
+    </Icon>
+  )
+}
+
+export default IconBigPause

components/icon/IconBigPlay.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconBigPlay: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} sizeClassName={"h-10 w-10"}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
+      />
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+      />
+    </Icon>
+  )
+}
+
+export default IconBigPlay

components/icon/IconCC.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconCC: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 512 512'>
+      <path
+        fill='currentColor'
+        d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 336H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6zm-211.1-85.7c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.8-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7l-17.5 30.5c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7zm190.4 0c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.9-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7L420 220.2c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7z'
+      />
+    </Icon>
+  )
+}
+
+export default IconCC

components/icon/IconChevron.tsx

@@ -0,0 +1,59 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+interface Props extends IconProps {
+  direction: "up" | "left" | "right" | "down"
+}
+
+const IconChevron: FC<Props> = ({ className = "", direction }) => {
+  if (direction === "up") {
+    return (
+      <Icon
+        sizeClassName={"h-6 w-6"}
+        className={className}
+        viewBox='0 0 448 512'
+      >
+        <path
+          fill='currentColor'
+          d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'
+        />
+      </Icon>
+    )
+  } else if (direction === "left") {
+    return (
+      <Icon
+        sizeClassName={"h-6 w-6"}
+        className={className}
+        viewBox='0 0 320 512'
+      >
+        <path
+          fill='currentColor'
+          d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'
+        />
+      </Icon>
+    )
+  } else if (direction === "right") {
+    return (
+      <Icon
+        sizeClassName={"h-6 w-6"}
+        className={className}
+        viewBox='0 0 320 512'
+      >
+        <path
+          fill='currentColor'
+          d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'
+        />
+      </Icon>
+    )
+  }
+  return (
+    <Icon sizeClassName={"h-6 w-6"} className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'
+      />
+    </Icon>
+  )
+}
+
+export default IconChevron

components/icon/IconClipboard.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconClipboard: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} sizeClassName={"h-6 w-6"}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3'
+      />
+    </Icon>
+  )
+}
+
+export default IconClipboard

components/icon/IconClose.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconClose: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} sizeClassName={"h-6 w-6"}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M6 18L18 6M6 6l12 12'
+      />
+    </Icon>
+  )
+}
+
+export default IconClose

components/icon/IconCog.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconCog: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 512 512'>
+      <path
+        fill='currentColor'
+        d='M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z'
+      />
+    </Icon>
+  )
+}
+
+export default IconCog

components/icon/IconCompress.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconCompress: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'
+      />
+    </Icon>
+  )
+}
+
+export default IconCompress

components/icon/IconCopyright.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconCopyright: FC<IconProps> = ({ className = "", sizeClassName= "h-4 w-4" }) => {
+  return (
+    <Icon
+      className={className}
+      sizeClassName={sizeClassName}
+      viewBox={"0 0 512 512"}
+    >
+      <path
+        fill='currentColor'
+        d='M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200 0-110.531 89.451-200 200-200 110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200zm107.351-101.064c-9.614 9.712-45.53 41.396-104.065 41.396-82.43 0-140.484-61.425-140.484-141.567 0-79.152 60.275-139.401 139.762-139.401 55.531 0 88.738 26.62 97.593 34.779a11.965 11.965 0 0 1 1.936 15.322l-18.155 28.113c-3.841 5.95-11.966 7.282-17.499 2.921-8.595-6.776-31.814-22.538-61.708-22.538-48.303 0-77.916 35.33-77.916 80.082 0 41.589 26.888 83.692 78.277 83.692 32.657 0 56.843-19.039 65.726-27.225 5.27-4.857 13.596-4.039 17.82 1.738l19.865 27.17a11.947 11.947 0 0 1-1.152 15.518z'
+      />
+    </Icon>
+  )
+}
+
+export default IconCopyright

components/icon/IconDelete.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconDelete: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'
+      />
+    </Icon>
+  )
+}
+
+export default IconDelete

components/icon/IconDisk.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconDisk: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon
+      className={className}
+      sizeClassName={"h-6 w-6"}
+      viewBox={"0 0 496 512"}
+    >
+      <path
+        fill='currentColor'
+        d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM88 256H56c0-105.9 86.1-192 192-192v32c-88.2 0-160 71.8-160 160zm160 96c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96zm0-128c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z'
+      />
+    </Icon>
+  )
+}
+
+export default IconDisk

components/icon/IconDrag.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconDrag: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon
+      className={className}
+      sizeClassName={"h-6 w-6"}
+      viewBox={"0 0 320 512"}
+    >
+      <path
+        fill='currentColor'
+        d='M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z'
+      />
+    </Icon>
+  )
+}
+
+export default IconDrag

components/icon/IconExpand.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconExpand: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z'
+      />
+    </Icon>
+  )
+}
+
+export default IconExpand

components/icon/IconForward.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconForward: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 448 512'>
+      <path
+        fill='currentColor'
+        d='M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z'
+      />
+    </Icon>
+  )
+}
+
+export default IconForward

components/icon/IconGithub.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconGithub: FC<IconProps> = ({ className = "", sizeClassName= "h-4 w-4" }) => {
+  return (
+    <Icon
+      className={className}
+      sizeClassName={sizeClassName}
+      viewBox='0 0 496 512'
+    >
+      <path
+        fill='currentColor'
+        d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'
+      />
+    </Icon>
+  )
+}
+
+export default IconGithub

components/icon/IconLoading.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconLoading: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className}>
+      <circle
+        className='opacity-25'
+        cx='12'
+        cy='12'
+        r='10'
+        stroke='currentColor'
+        strokeWidth='4'
+      />
+      <path
+        className='opacity-75'
+        fill='currentColor'
+        d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+      />
+    </Icon>
+  )
+}
+
+export default IconLoading

components/icon/IconLoop.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconLoop: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 512 512'>
+      <path
+        fill='currentColor'
+        d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z'
+      />
+    </Icon>
+  )
+}
+
+export default IconLoop

components/icon/IconMusic.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconMusic: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 512 512'>
+      <path
+        fill='currentColor'
+        d='M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z'
+      />
+    </Icon>
+  )
+}
+
+export default IconMusic