Add Shoko episodeID Copy Button / Trim Descriptions

src/components/Collection/CleanDescription.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import cx from 'classnames';
+import { trim } from 'lodash';
 
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 
@@ -69,7 +70,7 @@ const CleanDescription = React.memo(({ altText, className, text }: Props) => {
       lines.push(cleanedText.substring(prevPos));
     }
     LinkRegex.lastIndex = 0;
-    return lines.join('');
+    return trim(lines.join(''), '\n ');
   }, [text, filterDescription]);
 
   // Fallback to alt text if modified text is empty

src/components/Collection/Episode/EpisodeDetails.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mdiCalendarMonthOutline, mdiClockOutline, mdiOpenInNew, mdiStarHalfFull } from '@mdi/js';
+import { mdiCalendarMonthOutline, mdiClipboardOutline, mdiClockOutline, mdiOpenInNew, mdiStarHalfFull } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { toNumber } from 'lodash';
 
-import { convertTimeSpanToMs, dayjs } from '@/core/util';
+import { convertTimeSpanToMs, copyToClipboard, dayjs } from '@/core/util';
 
 import type { EpisodeType } from '@/core/types/api/episode';
 
@@ -13,6 +13,10 @@ const getDuration = (duration: string) => {
   return `${intMinutes} minutes`;
 };
 
+const handleCopyToClipboard = (id: string) => {
+  copyToClipboard(id, 'Shoko Episode ID').catch(console.error);
+};
+
 function EpisodeDetails({ episode }: { episode: EpisodeType }) {
   return (
     <div className="flex max-h-52 grow flex-col gap-y-4 overflow-hidden">
@@ -51,6 +55,17 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
           {episode.AniDB?.Rating.Votes}
           &nbsp;Votes)
         </div>
+        <div
+          className="flex cursor-pointer items-center gap-x-2"
+          onClick={() => handleCopyToClipboard(episode.IDs.ID.toString())}
+        >
+          <Icon
+            className="hidden text-panel-icon-action lg:inline"
+            path={mdiClipboardOutline}
+            size={1}
+          />
+          Copy ShokoID
+        </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">

src/components/Collection/Episode/EpisodeFiles.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
-  mdiContentCopy,
+  mdiClipboardOutline,
   mdiDatabaseSearchOutline,
   mdiFileDocumentMultipleOutline,
   mdiLoading,
@@ -82,7 +82,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
     });
 
   const handleCopyToClipboard = (id: string) => {
-    copyToClipboard(id, 'ShokoID').catch(console.error);
+    copyToClipboard(id, 'Shoko File ID').catch(console.error);
   };
 
   if (!episodeFiles.length || episodeFiles.length < 1) {
@@ -136,7 +136,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
                 >
                   <Icon
                     className="hidden text-panel-icon-action lg:inline"
-                    path={mdiContentCopy}
+                    path={mdiClipboardOutline}
                     size={1}
                   />
                   Copy ShokoID

src/core/util.ts

@@ -51,7 +51,7 @@ export const copyToClipboard = async (text: string, entityName?: string) => {
     } else {
       copy(text);
     }
-    if (entityName) toast.success(`${entityName} has been copied to clipboard!`);
+    if (entityName) toast.success(`${entityName} has been copied to the clipboard!`);
   } catch (error) {
     if (entityName) toast.error(`${entityName} copy failed!`);
     throw error;