DRAFT: Add Tubearchivist Frontend React dev docker setup (#768)

* Add development docker-compose file

* Add /new/ path in nginx conf

* Add frontend production setup

* Fix lint

* Refac move prod docker compose into non suffixed file

* Fix run.sh fileendings on windows

* Fix docker file naming consistancies

* Add frontend dev setup

* Add docker compose dev command

* Refac remove docker network

* Fix potential error causes

* Chore update react-router-dom

* Add redirect to login after logout

* Refac allow basic auth for session login in api

* Fix loginresponsetype optional property

* Refac move isAdmin check into page Base

* Refac use node lts for dev container

* Refac remove old setup in readme

* Refac move getisAdmin into loader and rename

* Refac remove manual csrf cookie handing from actions and loader

* Fix post requiring csrf header & cookie

* Fix remove empty files

* Refac revert dockerfile changes

* Refac revert gitatrributes changes

* Refac revert docker changes

* Refac revert nginx changes

* Refac revert docker change

* Refac move frontend into frontend folder

* Add production steps to dockerfile

* Refac implement endpoint renaming

* Refac remove frontend dockerfile

* Add credentials include for dev env

* Fix allow cors with credentials for dev environment

* Fix images in dev mode

* Add credentials for dev mode to all loader and actions, except signin

* Revert cors config

* Revert cors config

* Fix nginx not serving /youtube/

* Fix video url missing api

* Fix media url missing api

* Add application settings page

* Add continue vids

* Add csrf to delete requests

* Refac use api/video endpoint with filter to home, channel, playlist pages

* Add channel nav request

* Add channel playlists

* Fix filterbar for playlist in channel

* Add playlist_nav to video page

* Add downloads aggs

* Refac remove basic auth

* Fix credentials include in signin

* Refac user config to user me config

* Add ApiToken get

frontend/src/configuration/colours/components/Dark.tsx

@@ -0,0 +1,7 @@
+import './css/dark.css';
+
+const DarkStylesheet = () => {
+  return <></>;
+};
+
+export default DarkStylesheet;

frontend/src/configuration/colours/components/Light.tsx

@@ -0,0 +1,7 @@
+import './css/light.css';
+
+const LightStylesheet = () => {
+  return <></>;
+};
+
+export default LightStylesheet;

frontend/src/configuration/colours/components/Matrix.tsx

@@ -0,0 +1,7 @@
+import './css/matrix.css';
+
+const MatrixStylesheet = () => {
+  return <></>;
+};
+
+export default MatrixStylesheet;

frontend/src/configuration/colours/components/Midnight.tsx

@@ -0,0 +1,7 @@
+import './css/midnight.css';
+
+const MidnightStylesheet = () => {
+  return <></>;
+};
+
+export default MidnightStylesheet;

frontend/src/configuration/colours/components/css/dark.css

@@ -0,0 +1,16 @@
+:root {
+  --main-bg: #00202f;
+  --highlight-bg: #00293b;
+  --highlight-error: #990202;
+  --highlight-error-light: #c44343;
+  --highlight-bg-transparent: #00293baf;
+  --main-font: #eeeeee;
+  --accent-font-dark: #259485;
+  --accent-font-light: #97d4c8;
+  --img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
+    contrast(90%);
+  --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
+    contrast(120%);
+  --banner: url('/img/banner-tube-archivist-dark.png');
+  --logo: url('/img/logo-tube-archivist-dark.png');
+}

frontend/src/configuration/colours/components/css/light.css

@@ -0,0 +1,16 @@
+:root {
+  --main-bg: #eeeeee;
+  --highlight-bg: #d9e0d9;
+  --highlight-error: #990202;
+  --highlight-error-light: #c44343;
+  --highlight-bg-transparent: #00293baf;
+  --main-font: #00202f;
+  --accent-font-dark: #259485;
+  --accent-font-light: #35b399;
+  --img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
+    contrast(90%);
+  --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
+    contrast(120%);
+  --banner: url('/img/banner-tube-archivist-light.png');
+  --logo: url('/img/logo-tube-archivist-light.png');
+}

frontend/src/configuration/colours/components/css/matrix.css

@@ -0,0 +1,69 @@
+:root {
+  --main-bg: #000000;
+  --highlight-bg: #080808;
+  --highlight-error: #880000;
+  --highlight-error-light: #aa0000;
+  --highlight-bg-transparent: #0c0c0caf;
+  --main-font: #00aa00;
+  --accent-font-dark: #007700;
+  --accent-font-light: #00aa00;
+  --img-filter: brightness(0) saturate(100%) invert(45%) sepia(100%) saturate(3710%)
+    hue-rotate(96deg) brightness(100%) contrast(102%);
+  --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
+    contrast(120%);
+  --banner: url('/img/banner-tube-archivist-dark.png');
+  --logo: url('/img/logo-tube-archivist-dark.png');
+  --outline: 1px solid green;
+  --filter: hue-rotate(310deg);
+}
+
+.settings-group {
+  outline: var(--outline);
+}
+
+.info-box-item {
+  outline: var(--outline);
+}
+
+.footer {
+  outline: var(--outline);
+}
+
+.top-banner img {
+  filter: var(--filter);
+}
+
+.icon-text {
+  outline: var(--outline);
+}
+
+.video-item {
+  outline: var(--outline);
+}
+
+.channel-banner {
+  outline: var(--outline);
+}
+
+.description-box {
+  outline: var(--outline);
+}
+
+.video-player {
+  outline: var(--outline);
+}
+
+#notification {
+  outline: var(--outline);
+}
+
+textarea {
+  background-color: var(--highlight-bg);
+  outline: var(--outline);
+  color: var(--main-font);
+}
+
+input {
+  background-color: var(--highlight-bg);
+  color: var(--main-font);
+}

frontend/src/configuration/colours/components/css/midnight.css

@@ -0,0 +1,16 @@
+:root {
+  --main-bg: #000000;
+  --highlight-bg: #0c0c0c;
+  --highlight-error: #220000;
+  --highlight-error-light: #330000;
+  --highlight-bg-transparent: #0c0c0caf;
+  --main-font: #888888;
+  --accent-font-dark: #555555;
+  --accent-font-light: #999999;
+  --img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
+    contrast(90%);
+  --img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
+    contrast(120%);
+  --banner: url('/img/banner-tube-archivist-dark.png');
+  --logo: url('/img/logo-tube-archivist-dark.png');
+}

frontend/src/configuration/colours/getColours.ts

@@ -0,0 +1,29 @@
+export const ColourConstant = {
+  Dark: 'dark.css',
+  Light: 'light.css',
+  Matrix: 'matrix.css',
+  Midnight: 'midnight.css',
+};
+
+export type ColourVariants = 'dark.css' | 'light.css' | 'matrix.css' | 'midnight.css';
+
+const importColours = (stylesheet: ColourVariants | undefined) => {
+  switch (stylesheet) {
+    case ColourConstant.Dark:
+      return import('./components/Dark');
+
+    case ColourConstant.Matrix:
+      return import('./components/Matrix');
+
+    case ColourConstant.Midnight:
+      return import('./components/Midnight');
+
+    case ColourConstant.Light:
+      return import('./components/Light');
+
+    default:
+      return import('./components/Dark');
+  }
+};
+
+export default importColours;

frontend/src/configuration/constants/ViewStyle.ts

@@ -0,0 +1,11 @@
+export const ViewStyleNames = {
+  home: 'view_style_home',
+  channel: 'view_style_channel',
+  downloads: 'view_style_downloads',
+  playlist: 'view_style_playlist',
+};
+
+export const ViewStyles = {
+  grid: 'grid',
+  list: 'list',
+};

frontend/src/configuration/defaultHeaders.ts

@@ -0,0 +1 @@
+export default { 'Content-Type': 'application/json' };

frontend/src/configuration/getApiUrl.ts

@@ -0,0 +1,14 @@
+const DEV_API_URL = 'http://localhost:8000';
+const PROD_API_URL = window.location.origin;
+
+const getApiUrl = () => {
+  let url = PROD_API_URL;
+
+  if (import.meta.env.DEV) {
+    url = DEV_API_URL;
+  }
+
+  return url;
+};
+
+export default getApiUrl;

frontend/src/configuration/getFetchCredentials.ts

@@ -0,0 +1,9 @@
+import isDevEnvironment from '../functions/isDevEnvironment';
+
+const getFetchCredentials = () => {
+  const isDevEnv = isDevEnvironment();
+
+  return isDevEnv ? 'include' : 'same-origin';
+};
+
+export default getFetchCredentials;

frontend/src/configuration/routes/RouteList.ts

@@ -0,0 +1,27 @@
+const Routes = {
+  Home: '/',
+  Channels: '/channel/',
+  Channel: (id: string) => `/channel/${id}`,
+  ChannelVideo: (id: string) => `/channel/${id}`,
+  ChannelStream: (id: string) => `/channel/${id}/streams/`,
+  ChannelShorts: (id: string) => `/channel/${id}/shorts/`,
+  ChannelPlaylist: (id: string) => `/channel/${id}/playlist/`,
+  ChannelAbout: (id: string) => `/channel/${id}/about/`,
+  Playlists: '/playlist/',
+  Playlist: (id: string) => `/playlist/${id}`,
+  Downloads: '/downloads/',
+  DownloadsByChannelId: (channelId: string) => `/downloads/?channel=${channelId}`,
+  Search: '/search/',
+  SettingsDashboard: '/settings/',
+  SettingsUser: '/settings/user/',
+  SettingsApplication: '/settings/application/',
+  SettingsScheduling: '/settings/scheduling/',
+  SettingsActions: '/settings/actions/',
+  Login: '/Login/',
+  Logout: '/logout/',
+  Video: (id: string) => `/video/${id}`,
+  VideoAtTimestamp: (id: string, timestamp: string) => `/video/${id}/?t=${timestamp}`,
+  About: '/about/',
+};
+
+export default Routes;