client: add "Sequential" context menu item

client/src/javascript/actions/TorrentActions.ts

@@ -13,6 +13,7 @@ import type {
   MoveTorrentsOptions,
   SetTorrentContentsPropertiesOptions,
   SetTorrentsPriorityOptions,
+  SetTorrentsSequentialOptions,
   SetTorrentsTrackersOptions,
   StartTorrentsOptions,
   StopTorrentsOptions,
@@ -206,6 +207,19 @@ const TorrentActions = {
         },
       ),
 
+  setSequential: (options: SetTorrentsSequentialOptions) =>
+    axios
+      .patch(`${baseURI}api/torrents/sequential`, options)
+      .then((json) => json.data)
+      .then(
+        () => {
+          // do nothing.
+        },
+        () => {
+          // do nothing.
+        },
+      ),
+
   setFilePriority: (hash: TorrentProperties['hash'], options: SetTorrentContentsPropertiesOptions) =>
     axios
       .patch(`${baseURI}api/torrents/${hash}/contents`, options)

client/src/javascript/components/torrent-list/TorrentListContextMenu.tsx

@@ -1,7 +1,9 @@
-import {createRef, MutableRefObject} from 'react';
+import {createRef, FC, MutableRefObject} from 'react';
+import {observer} from 'mobx-react';
 
 import type {TorrentProperties} from '@shared/types/Torrent';
 
+import Checkmark from '../../ui/icons/Checkmark';
 import ConfigStore from '../../stores/ConfigStore';
 import PriorityMeter from '../general/PriorityMeter';
 import TorrentActions from '../../actions/TorrentActions';
@@ -11,6 +13,27 @@ import UIActions from '../../actions/UIActions';
 
 import type {ContextMenuItem} from '../../stores/UIStore';
 
+// TODO: need to create a generic component if there are more menu items like this.
+const InlineSequentialCheckbox: FC = observer(() => {
+  const {selectedTorrents} = TorrentStore;
+
+  return (
+    <label className="toggle-input checkbox" style={{display: 'inline'}}>
+      <div className="toggle-input__indicator">
+        <div
+          className="toggle-input__indicator__icon"
+          style={{
+            opacity: TorrentStore.torrents[selectedTorrents[selectedTorrents.length - 1]].isSequential
+              ? '1'
+              : undefined,
+          }}>
+          <Checkmark />
+        </div>
+      </div>
+    </label>
+  );
+});
+
 const handleTorrentDownload = (hash: TorrentProperties['hash']): void => {
   const {baseURI} = ConfigStore;
   const link = document.createElement('a');
@@ -126,6 +149,20 @@ const getContextMenuItems = (torrent: TorrentProperties): Array<ContextMenuItem>
         UIActions.displayModal({id: 'generate-magnet'});
       },
     },
+    {
+      type: 'action',
+      action: 'setSequential',
+      label: TorrentContextMenuActions.setSequential.id,
+      clickHandler: () => {
+        const {selectedTorrents} = TorrentStore;
+        TorrentActions.setSequential({
+          hashes: selectedTorrents,
+          isSequential: !TorrentStore.torrents[selectedTorrents[selectedTorrents.length - 1]].isSequential,
+        });
+      },
+      dismissMenu: false,
+      labelAction: () => <InlineSequentialCheckbox />,
+    },
     {
       type: 'action',
       action: 'setPriority',

client/src/javascript/components/torrent-list/TorrentListRow.tsx

@@ -41,7 +41,7 @@ const displayContextMenu = (hash: string, event: MouseEvent | TouchEvent) => {
         return true;
       }
 
-      return !torrentContextMenuActions.some((action) => action.id === item.action && action.visible === false);
+      return torrentContextMenuActions.some((action) => action.id === item.action && action.visible === true);
     }),
   });
 };

client/src/javascript/constants/TorrentContextMenuActions.ts

@@ -29,6 +29,9 @@ const TorrentContextMenuActions = {
   generateMagnet: {
     id: 'torrents.list.context.generate.magnet',
   },
+  setSequential: {
+    id: 'torrents.list.context.sequential',
+  },
   setPriority: {
     id: 'torrents.list.context.priority',
   },

client/src/javascript/i18n/strings.compiled.json

@@ -2239,6 +2239,12 @@
       "value": "Remove"
     }
   ],
+  "torrents.list.context.sequential": [
+    {
+      "type": 0,
+      "value": "Sequential"
+    }
+  ],
   "torrents.list.context.set.tags": [
     {
       "type": 0,

client/src/javascript/i18n/strings.json

@@ -318,6 +318,7 @@
   "torrents.list.context.download": "Download",
   "torrents.list.context.priority": "Priority",
   "torrents.list.context.remove": "Remove",
+  "torrents.list.context.sequential": "Sequential",
   "torrents.list.context.set.tags": "Set Tags",
   "torrents.list.context.set.trackers": "Set Trackers",
   "torrents.list.context.start": "Start",

shared/constants/defaultFloodSettings.ts

@@ -59,6 +59,7 @@ const defaultFloodSettings: Readonly<FloodSettings> = {
     {id: 'torrentDetails', visible: true},
     {id: 'torrentDownload', visible: true},
     {id: 'generateMagnet', visible: false},
+    {id: 'setSequential', visible: false},
     {id: 'setPriority', visible: false},
   ],
   torrentListViewSize: 'condensed',