Feat: Added the extra filter option for Watched

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+    "workbench.colorCustomizations": {
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#ab307e",
+        "statusBar.background": "#832561",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#ab307e",
+        "statusBarItem.remoteBackground": "#832561",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#832561",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#83256199",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#832561"
+}

package.json

@@ -15,7 +15,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.46.3",
+        "@stremio/stremio-core-web": "file:../stremio-core-web",
         "@stremio/stremio-icons": "5.2.0",
         "@stremio/stremio-video": "0.0.33",
         "a-color-picker": "1.2.1",

src/routes/Library/Library.js

@@ -47,7 +47,7 @@ const Library = ({ model, urlParams, queryParams }) => {
     const profile = useProfile();
     const notifications = useNotifications();
     const library = useLibrary(model, urlParams, queryParams);
-    const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
+    const [typeSelect, sortSelect,stateSelect, paginationInput] = useSelectableInputs(library);
     const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     return (
         <MainNavBars className={styles['library-container']} route={model}>
@@ -57,6 +57,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                         <div className={styles['selectable-inputs-container']}>
                             <Multiselect {...typeSelect} className={styles['select-input-container']} />
                             <Multiselect {...sortSelect} className={styles['select-input-container']} />
+                            <Multiselect {...stateSelect} className={styles['select-input-container']} />
                             <div className={styles['spacing']} />
                             {
                                 paginationInput !== null ?
@@ -119,6 +120,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                     <ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
                         <Multiselect {...typeSelect} className={styles['select-input-container']} />
                         <Multiselect {...sortSelect} className={styles['select-input-container']} />
+                        <Multiselect {...stateSelect} className={styles['select-input-container']} />
                     </ModalDialog>
                     :
                     null

src/routes/Library/useLibrary.js

@@ -12,6 +12,7 @@ const useLibrary = (model, urlParams, queryParams) => {
                 request: {
                     type: typeof urlParams.type === 'string' ? urlParams.type : null,
                     sort: queryParams.has('sort') ? queryParams.get('sort') : undefined,
+                    filter: queryParams.has('filter') ? queryParams.get('filter') : undefined,
                     page: queryParams.has('page') ? parseInt(queryParams.get('page'), 10) : undefined
                 }
             }

src/routes/Library/useSelectableInputs.js

@@ -32,6 +32,21 @@ const mapSelectableInputs = (library, t) => {
             window.location = event.value;
         }
     };
+    const stateSelect = {
+        title: t.string('SELECT_FILTER'),
+        options: library.selectable.filters
+            .map(({ watched, deepLinks }) => ({
+                value: deepLinks.library,
+                label: t.stringWithPrefix(watched.toUpperCase(), 'FILTER_')
+            })),
+        selected: library.selectable.filters
+            .filter(({ selected }) => selected)
+            .map(({ deepLinks }) => deepLinks.library),
+        onSelect: (event) => {
+            window.location = event.value;
+        }
+    };
+
     const paginationInput = library.selectable.prevPage || library.selectable.nextPage ?
         {
             label: library.selected.request.page.toString(),
@@ -46,7 +61,7 @@ const mapSelectableInputs = (library, t) => {
         }
         :
         null;
-    return [typeSelect, sortSelect, paginationInput];
+    return [typeSelect, sortSelect,stateSelect, paginationInput];
 };
 
 const useSelectableInputs = (library) => {

src/types/Selectable.d.ts

@@ -10,6 +10,13 @@ type SelectableSort<T> = {
     deepLinks: T
 };
 
+type SelectableFilter<T> = {
+    filter: string,
+    selected: boolean,
+    deepLinks: T
+};
+
+
 type SelectableExtra<T> = {
     isRequired: boolean,
     name: string,

src/types/models/Library.d.ts

@@ -17,12 +17,14 @@ type Library = {
         nextPage: LibraryPage,
         prevPage: LibraryPage,
         sorts: SelectableSort<LibraryDeepLinks>[],
+        filters: SelectableFilter<LibraryDeepLinks>[],
         types: SelectableType<LibraryDeepLinks>[],
     },
     selected: {
         request: {
             page: number,
             sort: string,
+            filter: string,
             type: string | null,
         }
     } | null,