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/components/VideoListItem.tsx

@@ -0,0 +1,126 @@
+import { Link, useSearchParams } from 'react-router-dom';
+import Routes from '../configuration/routes/RouteList';
+import { VideoType, ViewLayoutType } from '../pages/Home';
+import iconPlay from '/img/icon-play.svg';
+import iconDotMenu from '/img/icon-dot-menu.svg';
+import defaultVideoThumb from '/img/default-video-thumb.jpg';
+import updateWatchedState from '../api/actions/updateWatchedState';
+import formatDate from '../functions/formatDates';
+import WatchedCheckBox from './WatchedCheckBox';
+import MoveVideoMenu from './MoveVideoMenu';
+import { useState } from 'react';
+import getApiUrl from '../configuration/getApiUrl';
+
+type VideoListItemProps = {
+  video: VideoType;
+  viewLayout: ViewLayoutType;
+  playlistId?: string;
+  showReorderButton?: boolean;
+  refreshVideoList: (refresh: boolean) => void;
+};
+
+const VideoListItem = ({
+  video,
+  viewLayout,
+  playlistId,
+  showReorderButton = false,
+  refreshVideoList,
+}: VideoListItemProps) => {
+  const [, setSearchParams] = useSearchParams();
+
+  const [showReorderMenu, setShowReorderMenu] = useState(false);
+
+  if (!video) {
+    return <p>No video found.</p>;
+  }
+
+  return (
+    <div className={`video-item ${viewLayout}`}>
+      <a
+        onClick={() => {
+          setSearchParams({ videoId: video.youtube_id });
+        }}
+      >
+        <div className={`video-thumb-wrap ${viewLayout}`}>
+          <div className="video-thumb">
+            <picture>
+              <img src={`${getApiUrl()}${video.vid_thumb_url}`} alt="video-thumb" />
+              <source srcSet={defaultVideoThumb} />
+            </picture>
+
+            {video.player.progress && (
+              <div
+                className="video-progress-bar"
+                id={`progress-${video.youtube_id}`}
+                style={{
+                  width: `${video.player.progress}%`,
+                }}
+              ></div>
+            )}
+            {!video.player.progress && (
+              <div
+                className="video-progress-bar"
+                id={`progress-${video.youtube_id}`}
+                style={{ width: '0%' }}
+              ></div>
+            )}
+          </div>
+          <div className="video-play">
+            <img src={iconPlay} alt="play-icon" />
+          </div>
+        </div>
+      </a>
+      <div className={`video-desc ${viewLayout}`}>
+        <div className="video-desc-player" id={`video-info-${video.youtube_id}`}>
+          <WatchedCheckBox
+            watched={video.player.watched}
+            onClick={async status => {
+              await updateWatchedState({
+                id: video.youtube_id,
+                is_watched: status,
+              });
+
+              refreshVideoList(true);
+            }}
+          />
+          <span>
+            {formatDate(video.published)} | {video.player.duration_str}
+          </span>
+        </div>
+        <div className="video-desc-details">
+          <div>
+            <Link to={Routes.Channel(video.channel.channel_id)}>
+              <h3>{video.channel.channel_name}</h3>
+            </Link>
+            <Link className="video-more" to={Routes.Video(video.youtube_id)}>
+              <h2>{video.title}</h2>
+            </Link>
+          </div>
+
+          {showReorderButton && !showReorderMenu && (
+            <img
+              src={iconDotMenu}
+              alt="dot-menu-icon"
+              className="dot-button"
+              title="More actions"
+              onClick={() => {
+                setShowReorderMenu(true);
+              }}
+            />
+          )}
+        </div>
+
+        {showReorderButton && showReorderMenu && (
+          <MoveVideoMenu
+            playlistId={playlistId}
+            videoId={video.youtube_id}
+            setCloseMenu={status => setShowReorderMenu(!status)}
+            setRefresh={refreshVideoList}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VideoListItem;