oops

.gitignore

@@ -0,0 +1,2 @@
+*/.env
+test

backend/cmd/watchtogether/main.go

@@ -0,0 +1,72 @@
+package main
+
+import (
+	"flag"
+	"fmt"
+	"github.com/peterbourgon/ff/v3"
+	"github.com/qpixel/watchtogether/internal/logger"
+	"github.com/qpixel/watchtogether/internal/server"
+	"github.com/ubergeek77/tinylog"
+	"os"
+	"runtime"
+)
+
+type flags struct {
+	loglvl int
+	port   int
+}
+
+func newFlags(args []string) (flgs flags, err error) {
+	fs := flag.NewFlagSet(args[0], flag.ContinueOnError)
+
+	var (
+		loglvl = fs.Int("loglvl", tinylog.TraceLevel, "sets the log level (also via LOG_LEVEL)")
+		port   = fs.Int("port", 4000, "sets the port to use (also via PORT)")
+	)
+	// Parse the command line flags from above
+	err = ff.Parse(fs, args[1:], ff.WithEnvVarNoPrefix())
+	if err != nil {
+		return flgs, err
+	}
+	return flags{
+		loglvl: *loglvl,
+		port:   *port,
+	}, nil
+}
+
+func main() {
+	if err := run(os.Args); err != nil {
+		tinylog.DefaultLogger().Errorf("error from main.run(): %s\n", err)
+		os.Exit(1)
+	}
+
+}
+
+func run(args []string) error {
+
+	flgs, err := newFlags(args)
+	if err != nil {
+		return err
+	}
+	// setup logger with defaults
+	lgr := logger.NewLogger(flgs.loglvl, "WatchTogether")
+
+	lgr.Infof("go runtime ver: %s", runtime.Version())
+	lgr.Infof("Logging level has been set to %d", lgr.LogLevel)
+
+	mr := server.NewMuxRouter()
+
+	serverDriver := server.NewDriver()
+
+	params := server.NewServerParams(lgr, serverDriver)
+
+	s, err := server.NewServer(mr, params)
+	if err != nil {
+		lgr.Errorf("err: %s", err)
+		lgr.Fatal("error in server.NewServer")
+	}
+
+	s.Addr = fmt.Sprintf(":%d", flgs.port)
+
+	return s.ListenAndServe()
+}

backend/go.mod

@@ -0,0 +1,17 @@
+module github.com/qpixel/watchtogether
+
+go 1.17
+
+replace (
+	github.com/qpixel/tloghttp => ../../tloghttp
+	github.com/qpixel/tlogbuilder => ../../tlogbuilder
+)
+
+require (
+	github.com/gorilla/mux v1.8.0
+	github.com/justinas/alice v1.2.0
+	github.com/peterbourgon/ff/v3 v3.1.2
+	github.com/qpixel/tloghttp v0.0.0-20211222065322-cd8d1a945a36
+	github.com/qpixel/tlogbuilder v0.0.0
+	github.com/ubergeek77/tinylog v1.0.0
+)

backend/go.sum

@@ -0,0 +1,13 @@
+github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
+github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
+github.com/justinas/alice v1.2.0 h1:+MHSA/vccVCF4Uq37S42jwlkvI2Xzl7zTPCN5BnZNVo=
+github.com/justinas/alice v1.2.0/go.mod h1:fN5HRH/reO/zrUflLfTN43t3vXvKzvZIENsNEe7i7qA=
+github.com/pelletier/go-toml v1.6.0/go.mod h1:5N711Q9dKgbdkxHL+MEfF31hpT7l0S0s/t2kKREewys=
+github.com/peterbourgon/ff/v3 v3.1.2 h1:0GNhbRhO9yHA4CC27ymskOsuRpmX0YQxwxM9UPiP6JM=
+github.com/peterbourgon/ff/v3 v3.1.2/go.mod h1:XNJLY8EIl6MjMVjBS4F0+G0LYoAqs0DTa4rmHHukKDE=
+github.com/ubergeek77/tinylog v1.0.0 h1:gsq98mbig3LDWhsizOe2tid12wHUz/mrkDlmgJ0MZG4=
+github.com/ubergeek77/tinylog v1.0.0/go.mod h1:NzUi4PkRG2hACL4cGgmW7db6EaKjAeqrqlVQnJdw78Q=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

backend/services/logger.go

@@ -0,0 +1,13 @@
+package services
+
+import "github.com/ubergeek77/tinylog"
+
+// LoggerService reads and updates the logger state
+type LoggerService struct {
+	Logger tinylog.Logger
+}
+
+// NewLoggerService creates a new instance of the logging service
+func NewLoggerService(logger tinylog.Logger) *LoggerService {
+	return &LoggerService{Logger: logger}
+}

frontend/.gitignore

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

frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

frontend/README.md

@@ -0,0 +1,39 @@
+# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript
+
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with TypeScript.
+
+Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.
+
+We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript&project-name=with-chakra-ui-typescript&repository-name=with-chakra-ui-typescript)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app
+# or
+yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).
+
+If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^1.0.5",
+    "@chakra-ui/react": "^1.4.2",
+    "@chakra-ui/theme-tools": "1.1.2",
+    "@emotion/react": "11.1.5",
+    "@emotion/styled": "11.1.5",
+    "framer-motion": "^4.0.3",
+    "next": "latest",
+    "next-auth": "^4.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-player": "^2.9.0",
+    "websocket": "^1.0.34"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.0",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/websocket": "^1.0.4",
+    "typescript": "4.3.2"
+  }
+}

frontend/src/components/Container.tsx

@@ -0,0 +1,19 @@
+import { Flex, useColorMode, FlexProps } from '@chakra-ui/react'
+
+export const Container = (props: FlexProps) => {
+  const { colorMode } = useColorMode()
+
+  const bgColor = { light: 'gray.50', dark: 'gray.900' }
+
+  const color = { light: 'black', dark: 'white' }
+  return (
+    <Flex
+      direction="column"
+      alignItems="center"
+      justifyContent="flex-start"
+      bg={bgColor[colorMode]}
+      color={color[colorMode]}
+      {...props}
+    />
+  )
+}

frontend/src/components/Footer.tsx

@@ -0,0 +1,5 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+
+export const Footer = (props: FlexProps) => (
+  <Flex as="footer" py="8rem" {...props} />
+)

frontend/src/components/Hero.tsx

@@ -0,0 +1,17 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+export const Hero = ({ title }: { title: string }) => (
+  <Flex
+    justifyContent="center"
+    alignItems="center"
+    height="100vh"
+    bgGradient="linear(to-l, #7928CA, #FF0080)"
+    bgClip="text"
+  >
+    <Heading fontSize="6vw">{title}</Heading>
+  </Flex>
+);
+
+Hero.defaultProps = {
+  title: "Watch Together",
+};

frontend/src/components/Main.tsx

@@ -0,0 +1,13 @@
+import { Stack, StackProps } from '@chakra-ui/react'
+
+export const Main = (props: StackProps) => (
+  <Stack
+    spacing="1.5rem"
+    width="100%"
+    maxWidth="48rem"
+    mt="-45vh"
+    pt="8rem"
+    px="1rem"
+    {...props}
+  />
+)

frontend/src/components/Player.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import ReactPlayer, { ReactPlayerProps } from "react-player";
+
+type PlayerProps = { id: string } & ReactPlayerProps;
+
+const Player: FC<PlayerProps> = ({ id, config }) => {
+  return <ReactPlayer url={id} config={config} />;
+};
+
+Player.defaultProps = {
+  id: "",
+  config: {
+    file: {
+      forceHLS: true,
+    },
+  },
+};
+
+export default Player;

frontend/src/pages/_app.tsx

@@ -0,0 +1,17 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { SessionProvider } from "next-auth/react";
+import theme from "../theme";
+import { AppProps } from "next/app";
+import React from "react";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <SessionProvider session={pageProps.session}>
+      <ChakraProvider resetCSS theme={theme}>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </SessionProvider>
+  );
+}
+
+export default MyApp;

frontend/src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          {/* Make Color mode to persists when you refresh the page. */}
+          <ColorModeScript />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

frontend/src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,15 @@
+import NextAuth from "next-auth";
+import DiscordProvider from "next-auth/providers/discord";
+
+export default NextAuth({
+  providers: [
+    DiscordProvider({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
+  ],
+  secret: process.env.SECRET,
+  jwt: {
+    secret: process.env.SECRET,
+  },
+});

frontend/src/pages/index.tsx

@@ -0,0 +1,45 @@
+import { Button, Text } from "@chakra-ui/react";
+import { GetServerSideProps, NextPage } from "next";
+import { getSession, signIn } from "next-auth/react";
+import React from "react";
+import { Container } from "../components/Container";
+import { Footer } from "../components/Footer";
+import { Hero } from "../components/Hero";
+import { Main } from "../components/Main";
+
+const Index: NextPage = () => {
+  return (
+    <Container height="100vh">
+      <Hero />
+      <Main>
+        <Button
+          maxWidth="200"
+          alignSelf="center"
+          onClick={() => signIn("discord")}
+        >
+          Login With Discord
+        </Button>
+      </Main>
+      <Footer>
+        <Text>&copy;2022 Velvox</Text>
+      </Footer>
+    </Container>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = getSession(context);
+  if (session) {
+    return {
+      redirect: {
+        destination: "/player",
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: {},
+  };
+};
+
+export default Index;

frontend/src/pages/player.tsx

@@ -0,0 +1,16 @@
+import { NextPage } from "next";
+import dynamic from "next/dynamic";
+import React from "react";
+import { Container } from "../components/Container";
+
+const Player = dynamic(() => import("../components/Player"));
+
+const PlayerPage: NextPage = () => {
+  return (
+    <Container height="100vh">
+      <Player />
+    </Container>
+  );
+};
+
+export default PlayerPage;

frontend/src/theme.tsx

@@ -0,0 +1,27 @@
+import { extendTheme, ThemeConfig } from "@chakra-ui/react";
+import { createBreakpoints } from "@chakra-ui/theme-tools";
+
+const fonts = { mono: `'Menlo', monospace` };
+
+const breakpoints = createBreakpoints({
+  sm: "40em",
+  md: "52em",
+  lg: "64em",
+  xl: "80em",
+});
+
+const config: ThemeConfig = {
+  initialColorMode: "dark",
+  useSystemColorMode: false,
+};
+
+const theme = extendTheme({
+  colors: {
+    black: "#16161D",
+  },
+  fonts,
+  breakpoints,
+  config,
+});
+
+export default theme;

frontend/src/util/api.tsx

@@ -0,0 +1,3 @@
+const useAPI = () => {};
+
+export default useAPI;

frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

frontend/types/environment.d.ts

@@ -0,0 +1,8 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    DISCORD_ID: string;
+    DISCORD_SECRET: string;
+    API_PORT: string;
+    SECRET: string;
+  }
+}