tubearchivist-frontend/app/routes/download.tsx

import { useState } from "react";
import { CustomHead } from "~/components/CustomHead";
import { Layout } from "~/components/Layout";
import AddIcon from "~/images/icon-add.svg";
import DownloadIcon from "~/images/icon-download.svg";
import GridViewIcon from "~/images/icon-gridview.svg";
import ListViewIcon from "~/images/icon-listview.svg";
import RescanIcon from "~/images/icon-rescan.svg";
import {
  sendDeleteAllQueuedIgnored,
  sendDeleteVideoQueuedIgnored,
  sendDownloads,
  sendMoveVideoQueuedIgnored,
  sendTasks,
} from "../lib/getDownloads";
import type { Tasks } from "~/types/download";

type ViewStyle = "grid" | "list";
type IgnoredStatus = boolean;
type FormHidden = boolean;
type ErrorMessage = string;
type PageNumber = number;

const Download = () => {
  const [ignoredStatus, setIgnoredStatus] = useState<IgnoredStatus>(false);
  const [pageNumber, setPageNumber] = useState<PageNumber>(1);
  const [formHidden, setFormHidden] = useState<FormHidden>(true);
  const [viewStyle, setViewStyle] = useState<ViewStyle>(
    downloads?.config?.default_view?.downloads
  );
  const [errorMessage, setErrorMessage] = useState<ErrorMessage>(null);

  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
    setViewStyle(selectedViewStyle);
  };

  const handleSetIgnoredStatus = (selectedIgnoredStatus: IgnoredStatus) => {
    setIgnoredStatus(selectedIgnoredStatus);
    refetch();
    handleSetPageNumber(1);
  };

  const handleSetFormHidden = (selectedFormHidden: FormHidden) => {
    setFormHidden(selectedFormHidden);
  };

  const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => {
    setErrorMessage(selectedErrorMessage);
  };

  const handleSetPageNumber = (selectedPageNumber: PageNumber) => {
    setPageNumber(selectedPageNumber);
  };

  const addToDownloadQueue = (event) => {
    event.preventDefault();
    sendDownloads(session.ta_token.token, event.target.vid_url.value)
      .then(() => {
        handleSetErrorMessage(null);
        handleSetFormHidden(true);
      })
      .catch((error) => handleSetErrorMessage(error.message));
  };
  const handleMoveVideoQueuedIgnored = (
    session: string,
    youtube_id: string,
    status: string
  ) => {
    sendMoveVideoQueuedIgnored(session, youtube_id, status)
      .then(() => {
        handleSetErrorMessage(null);
      })
      .catch((error) => handleSetErrorMessage(error.message));
  };
  const handleDeleteVideoQueuedIgnored = (
    session: string,
    youtube_id: string
  ) => {
    sendDeleteVideoQueuedIgnored(session, youtube_id)
      .then(() => {
        handleSetErrorMessage(null);
      })
      .catch((error) => handleSetErrorMessage(error.message));
  };

  const handleDeleteAllQueuedIgnored = (session: string, filter: string) => {
    sendDeleteAllQueuedIgnored(session, filter)
      .then(() => {
        handleSetErrorMessage(null);
      })
      .catch((error) => handleSetErrorMessage(error.message));
  };

  const handleSendTask = (session: string, task: Tasks) => {
    sendTasks(session, task)
      .then((response) => {
        if (response.success) {
          handleSetErrorMessage(null);
        } else {
          handleSetErrorMessage(`Error running task: ${response.task}.`);
        }
      })
      .catch((error) => handleSetErrorMessage(error.message));
  };

  return (
    <>
      <CustomHead title="Downloads" />

      <Layout>
        <div className="boxed-content">
          <div className="title-bar">
            <h1>Downloads</h1>
          </div>
          <div id="notifications">
            {(error || !downloads?.data) && !isLoading && (
              <div className="error notification">
                <h3>API Connection Error</h3>
                <p></p>
              </div>
            )}
            {errorMessage && (
              <div className="error notification">
                <h3>Failed to add downloads to the queue.</h3>
                <p>{errorMessage}</p>
              </div>
            )}
            {
              // <div className="info notification">
              //     <h3>Adding new videos to download queue.</h3>
              //     <p>Extracting lists</p>
              //     <p>Progress: 0/0</p>
              // </div>
            }
            {
              // <div className="info notification">
              //     <h3>Rescanning channels and playlists.</h3>
              //     <p>Looking for new videos.</p>
              // </div>
            }
            {
              // <div className="info notification">
              //     <h3>Downloading: `VIDEO_TITLE`</h3>
              //     <p>processing</p>
              //     <p>`DOWNLOADED_PERCENTAGE`% of `VIDEO_SIVE``VIDEO_SIZE_UNIT` at `DOWNLOAD_SPEED``DOWNLOAD_SPEED_UNIT` - time left: `DOWNLOAD_TIME_LEFT`</p>
              //     <p>processing</p>
              //     <p>Moving</p>
              //     <p>Completed</p>
              // </div>
            }
          </div>
          <div id="downloadControl">
            {/* Appears when video is downloading */}
            {/* <div className="dl-control-icons"> 
                            <NextImage
                                width={30}
                                height={30}
                                src={StopIcon}
                                alt="stop icon"
                                title="Stop Download Queue"
                                id="stop-icon"
                                onClick={() => console.log("stopQueue()")}
                            />
                            <NextImage
                                width={30}
                                height={30}
                                src={CloseIcon}
                                alt="kill icon"
                                title="Kill Download Queue"
                                id="kill-icon"
                                onClick={() => console.log("killQueue()")}
                            />
                        </div> */}
          </div>
          <div className="info-box info-box-3">
            <div className="icon-text">
              <NextImage
                width={80}
                height={80}
                src={RescanIcon}
                alt="rescan-icon"
                title="Rescan subscriptions"
                // className="rotate-img" // Set when rescanning
                onClick={() =>
                  handleSendTask(session.ta_token.token, "rescan_pending")
                }
              />
              {/* <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon"></img> */}
              <p>Rescan subscriptions</p>
            </div>
            <div className="icon-text">
              <NextImage
                width={80}
                height={80}
                src={DownloadIcon}
                alt="download-icon"
                title="Start download"
                // className="bounce-img" // Set when video is downloading
                onClick={() =>
                  handleSendTask(session.ta_token.token, "download_pending")
                }
              />
              {/* <img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon"></img> */}
              <p>Start download</p>
            </div>
            <div className="icon-text">
              <NextImage
                width={80}
                height={80}
                src={AddIcon}
                alt="add-icon"
                title="Add to download queue"
                onClick={() =>
                  formHidden
                    ? handleSetFormHidden(false)
                    : handleSetFormHidden(true)
                }
              />
              <p>Add to download queue</p>
              {!formHidden && (
                <div className="show-form">
                  <form id="hidden-form" onSubmit={addToDownloadQueue}>
                    <textarea
                      name="vid_url"
                      cols={40}
                      rows={4}
                      placeholder="Enter Video Urls or IDs here..."
                      required
                      id="id_vid_url"
                      spellCheck="false"
                    />
                    <button type="submit">Add to download queue</button>
                  </form>
                </div>
              )}
            </div>
          </div>
          <div className="view-controls">
            <div className="toggle">
              <span>Show only ignored videos:</span>
              <div className="toggleBox">
                <input
                  id="show_ignored_only"
                  onChange={() => handleSetIgnoredStatus(!ignoredStatus)}
                  type="checkbox"
                  checked={ignoredStatus}
                />
                <label htmlFor="" className={ignoredStatus ? "onbtn" : "ofbtn"}>
                  {ignoredStatus ? "On" : "Off"}
                </label>
              </div>
            </div>
            <div className="view-icons">
              <div className="view-icons-margin">
                <NextImage
                  width={30}
                  height={34}
                  src={GridViewIcon}
                  alt="grid view"
                  title="Switch to grid view"
                  onClick={() => handleSetViewstyle("grid")}
                />
              </div>
              {/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */}
              <div className="view-icons-margin">
                <NextImage
                  width={30}
                  height={34}
                  src={ListViewIcon}
                  alt="list view"
                  title="Switch to list view"
                  onClick={() => handleSetViewstyle("list")}
                />
              </div>
              {/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */}
            </div>
          </div>
          {ignoredStatus && (
            <div className="title-split">
              <h2>Ignored from download</h2>
              <button
                onClick={() =>
                  handleDeleteAllQueuedIgnored(session.ta_token.token, "ignore")
                }
                title="Remove all ignored videos."
              >
                Remove all ignored
              </button>
            </div>
          )}
          {!ignoredStatus && (
            <div className="title-split">
              <h2>Download queue</h2>
              <button
                onClick={() =>
                  handleDeleteAllQueuedIgnored(
                    session.ta_token.token,
                    "pending"
                  )
                }
                title="Remove all videos from the queue."
              >
                Remove all queued
              </button>
            </div>
          )}
          <h3>
            Total videos: {downloads?.paginate?.total_hits}{" "}
            {!downloads && !downloads?.message && !ignoredStatus && (
              <p>
                No videos queued for download. Press rescan subscriptions to
                check if there are any new videos.
              </p>
            )}
          </h3>
          <div className={`dl-list ${viewStyle}`}>
            {!isLoading &&
              !error &&
              !downloads?.message &&
              downloads?.data?.map((video) => {
                return (
                  <div
                    key={video?.youtube_id}
                    className={`dl-item ${viewStyle}`}
                  >
                    <div className={`dl-thumb ${viewStyle}`}>
                      <img
                        src={`${TA_BASE_URL.server}${video?.vid_thumb_url}`}
                        alt="video_thumb"
                      ></img>
                      {ignoredStatus && <span>ignored</span>}
                      {/* {% if show_ignored_only %} */}
                      {/* <span>ignored</span> */}
                      {!ignoredStatus && <span>queued</span>}
                      {/* {% else %} */}
                      {/* <span>queued</span> */}
                      {/* {% endif %} */}
                    </div>
                    <div className={`dl-desc ${viewStyle}`}>
                      <h3>{video?.title}</h3>
                      {video?.channel_indexed && (
                        <a href={`/channel/${video?.channel_id}`}>
                          {video?.channel_name}
                        </a>
                      )}
                      {/* {% if video.source.channel_indexed %} */}
                      {/* <a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a> */}
                      {!video?.channel_indexed && (
                        <span>{video?.channel_name}</span>
                      )}
                      {/* {% else %} */}
                      {/* <span>{{ video.source.channel_name }}</span> */}
                      {/* {% endif %} */}
                      <p>
                        Published: {video?.published} | Duration:{" "}
                        {video?.duration} | {video?.youtube_id}
                      </p>
                      {/* <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p> */}
                      {ignoredStatus && (
                        <div>
                          <button
                            className="button-padding"
                            title="Move this video to the download queue."
                            onClick={() =>
                              handleMoveVideoQueuedIgnored(
                                session.ta_token.token,
                                video?.youtube_id,
                                "pending"
                              )
                            }
                          >
                            Add to queue
                          </button>
                          <button
                            className="button-padding"
                            title="Remove this video from the ignored list."
                            onClick={() =>
                              handleDeleteVideoQueuedIgnored(
                                session.ta_token.token,
                                video?.youtube_id
                              )
                            }
                          >
                            Remove
                          </button>
                        </div>
                      )}
                      {/* {% if show_ignored_only %} */}
                      {/* <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button> */}
                      {/* <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button> */}
                      {!ignoredStatus && (
                        <div>
                          <button
                            className="button-padding"
                            title="Ignore this video."
                            onClick={() =>
                              handleMoveVideoQueuedIgnored(
                                session.ta_token.token,
                                video?.youtube_id,
                                "ignore"
                              )
                            }
                          >
                            Ignore
                          </button>
                          <button
                            className="button-padding"
                            title="Download this video now."
                            onClick={() => console.log("downloadNow(this)")}
                          >
                            Download now
                          </button>
                          <button
                            className="button-padding"
                            title="Remove this video from the queue."
                            onClick={() =>
                              handleDeleteVideoQueuedIgnored(
                                session.ta_token.token,
                                video?.youtube_id
                              )
                            }
                          >
                            Remove
                          </button>
                        </div>
                      )}
                      {/* {% else %} */}
                      {/* <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button> */}
                      {/* <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button> */}
                      {/* {% endif %} */}
                    </div>
                  </div>
                );
              })}
            {/* {% if results %} */}
            {/* {% for video in results %} */}
            {/* <div className="dl-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}"> */}
            {/* <div className="dl-thumb {{ view_style }}"> */}
            {/* <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video_thumb"> */}
            {/* {% if show_ignored_only %} */}
            {/* <span>ignored</span> */}
            {/* {% else %} */}
            {/* <span>queued</span> */}
            {/* {% endif %} */}
            {/* </div> */}
            {/* <div className="dl-desc {{ view_style }}"> */}
            {/* <h3>{{ video.source.title }}</h3> */}
            {/* {% if video.source.channel_indexed %} */}
            {/* <a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a> */}
            {/* {% else %} */}
            {/* <span>{{ video.source.channel_name }}</span> */}
            {/* {% endif %} */}
            {/* <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p> */}
            {/* {% if show_ignored_only %} */}
            {/* <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button> */}
            {/* <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button> */}
            {/* {% else %} */}
            {/* <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button> */}
            {/* <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button> */}
            {/* {% endif %} */}
            {/* </div> */}
            {/* </div> */}
            {/* {% endfor %} */}
            {/* {% endif %} */}
          </div>
        </div>
        <div className="boxed-content">
          <div className="pagination">
            {pageNumber != 1 ? (
              <a
                className="pagination-item"
                onClick={() => handleSetPageNumber(1)}
              >
                First
              </a>
            ) : (
              ``
            )}
            {downloads?.paginate?.prev_pages &&
              downloads?.paginate?.prev_pages?.map((page) => {
                return (
                  <a
                    key={`${page}`}
                    className="pagination-item"
                    onClick={() => handleSetPageNumber(page)}
                  >
                    {page}
                  </a>
                );
              })}
            {pageNumber != 1 && <span> &lt; </span>}
            <span> Page {pageNumber}</span>
            {downloads?.paginate?.last_page && <span> &gt; </span>}
            {downloads?.paginate?.next_pages &&
              downloads?.paginate?.next_pages?.map((page) => {
                return (
                  <a
                    key={`${page}`}
                    className="pagination-item"
                    onClick={() => handleSetPageNumber(page)}
                  >
                    {page}
                  </a>
                );
              })}
            {downloads?.paginate?.last_page && (
              <a
                className="pagination-item"
                onClick={() =>
                  handleSetPageNumber(downloads?.paginate?.last_page)
                }
              >
                {" "}
                Last ({downloads?.paginate?.last_page}){" "}
              </a>
            )}
          </div>
        </div>
        {/* <script type="text/javascript" src="{% static 'progress.js' %}"></script> */}
      </Layout>
    </>
  );
};

export default Download;