Add AniDB Episode Link to Episode / ShokoID Copy Button to File Info (#…

…1005) - shortened some text to fit everything in the file info bar
ShokoAnime · Aug 22, 2024 · 7f57cdd · 7f57cdd
1 parent 5e07929
commit 7f57cdd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/components/Collection/Episode/EpisodeDetails.tsx b/src/components/Collection/Episode/EpisodeDetails.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mdiCalendarMonthOutline, mdiClockOutline, mdiStarHalfFull } from '@mdi/js';
+import { mdiCalendarMonthOutline, mdiClockOutline, mdiOpenInNew, mdiStarHalfFull } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { toNumber } from 'lodash';
 
@@ -36,21 +36,30 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
       </div>
 
       <div className="flex flex-wrap items-center gap-x-3 text-sm font-semibold">
-        <div className="flex flex-wrap gap-x-2">
+        <div className="flex items-center gap-x-2">
           <Icon className="text-panel-icon" path={mdiCalendarMonthOutline} size={1} />
           {dayjs(episode.AniDB?.AirDate).format('MMMM Do, YYYY')}
         </div>
-        <div className="flex flex-wrap gap-x-2">
+        <div className="flex items-center gap-x-2">
           <Icon className="text-panel-icon" path={mdiClockOutline} size={1} />
           {getDuration(episode.Duration)}
         </div>
-        <div className="flex flex-wrap gap-x-2">
+        <div className="flex items-center gap-x-2">
           <Icon className="text-panel-icon" path={mdiStarHalfFull} size={1} />
           {toNumber(episode.AniDB?.Rating.Value).toFixed(2)}
           &nbsp;(
           {episode.AniDB?.Rating.Votes}
           &nbsp;Votes)
         </div>
+        {episode.AniDB?.ID && (
+          <a href={`https://anidb.net/episode/${episode.AniDB?.ID}`} target="_blank" rel="noopener noreferrer">
+            <div className="flex items-center gap-x-2 text-panel-text-primary">
+              <div className="metadata-link-icon AniDB" />
+              AniDB
+              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+            </div>
+          </a>
+        )}
       </div>
 
       <div className="line-clamp-3">

diff --git a/src/components/Collection/Episode/EpisodeFiles.tsx b/src/components/Collection/Episode/EpisodeFiles.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
+  mdiContentCopy,
   mdiDatabaseSearchOutline,
   mdiFileDocumentMultipleOutline,
   mdiLoading,
@@ -9,6 +10,7 @@ import {
 } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { get, map } from 'lodash';
+import { useCopyToClipboard } from 'usehooks-ts';
 
 import DeleteFilesModal from '@/components/Dialogs/DeleteFilesModal';
 import FileInfo from '@/components/FileInfo';
@@ -36,6 +38,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId }: Props) => {
   const { mutate: deleteFile } = useDeleteFileMutation();
   const { mutate: markFileAsVariation } = useMarkVariationMutation();
   const { mutate: rescanFile } = useRescanFileMutation();
+  const [, copy] = useCopyToClipboard();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedFileToDelete, setSelectedFileToDelete] = useState<FileType | null>(null);
   const selectedFilesToDelete = useMemo(
@@ -78,6 +81,15 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId }: Props) => {
         toast.error(`${variation ? 'Marking' : 'Unmarking'} file as variation failed! ${error.message}`),
     });
 
+  const handleCopyToClipboard = (id: string) => () => {
+    copy(id).then((isCopied) => {
+      if (!isCopied) return;
+      toast.success('ShokoID has been copied to clipboard!');
+    }).catch((error) => {
+      toast.error(`Failed! ${error}`);
+    });
+  };
+
   if (!episodeFiles.length || episodeFiles.length < 1) {
     return <div className="flex grow items-center justify-center p-6 pt-4 font-semibold">No files found!</div>;
   }
@@ -97,7 +109,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId }: Props) => {
                   onClick={() => handleRescan(file.ID)}
                 >
                   <Icon className="hidden text-panel-icon-action lg:inline" path={mdiDatabaseSearchOutline} size={1} />
-                  Force Update File Info
+                  Force Update Info
                 </div>
                 <div
                   className="flex cursor-pointer items-center gap-x-2"
@@ -121,13 +133,24 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId }: Props) => {
                     size={1}
                   />
                   {file.IsVariation ? 'Unmark' : 'Mark'}
-                  &nbsp;File as Variation
+                  &nbsp;as Variation
+                </div>
+                <div
+                  className="flex cursor-pointer items-center gap-x-2"
+                  onClick={handleCopyToClipboard(file.ID.toString())}
+                >
+                  <Icon
+                    className="hidden text-panel-icon-action lg:inline"
+                    path={mdiContentCopy}
+                    size={1}
+                  />
+                  Copy ShokoID
                 </div>
                 {file.AniDB && (
                   <a href={`https://anidb.net/file/${file.AniDB.ID}`} target="_blank" rel="noopener noreferrer">
                     <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                       <div className="metadata-link-icon AniDB" />
-                      {`${file.AniDB.ID} (AniDB)`}
+                      AniDB
                       <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                     </div>
                   </a>