diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 320af81dc..3c8b450f4 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -7,10 +7,10 @@ const useSelectableInputs = require('./useSelectableInputs'); const useItemOptions = require('./useItemOptions'); const styles = require('./styles'); -const Library = ({ urlParams }) => { - const library = useLibrary(urlParams); +const Library = ({ urlParams, queryParams }) => { + const library = useLibrary(urlParams, queryParams); const profile = useProfile(); - const [typeSelect, sortPropSelect] = useSelectableInputs(library); + const [typeSelect, sortSelect] = useSelectableInputs(library); const [options, optionOnSelect] = useItemOptions(); return ( @@ -19,7 +19,7 @@ const Library = ({ urlParams }) => { profile.auth !== null && library.type_names.length > 0 ?
- +
: null @@ -67,9 +67,9 @@ const Library = ({ urlParams }) => { Library.propTypes = { urlParams: PropTypes.exact({ - type: PropTypes.string, - sort: PropTypes.string - }) + type: PropTypes.string + }), + queryParams: PropTypes.instanceOf(URLSearchParams) }; module.exports = Library; diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js index b5549766f..a533914db 100644 --- a/src/routes/Library/useLibrary.js +++ b/src/routes/Library/useLibrary.js @@ -1,7 +1,8 @@ const React = require('react'); -const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); +const DEFAULT_SORT = 'lastwatched'; + const initLibraryState = () => ({ selected: null, type_names: [], @@ -28,62 +29,37 @@ const mapLibraryState = (library) => { }; const onNewLibraryState = (library) => { - if (library.selected === null && library.type_names.length > 0) { + if (library.selected === null) { return { action: 'Load', args: { model: 'LibraryWithFilters', args: { - type_name: library.type_names[0] + type_name: null, + sort: DEFAULT_SORT, + continue_watching: false } } }; + } else { + return null; } }; -const useLibrary = (urlParams) => { - const { core } = useServices(); +const useLibrary = (urlParams, queryParams) => { const loadLibraryAction = React.useMemo(() => { - if (typeof urlParams.type === 'string' && typeof urlParams.sort === 'string') { - return { - action: 'Load', + return { + action: 'Load', + args: { + model: 'LibraryWithFilters', args: { - model: 'LibraryWithFilters', - args: { - type_name: urlParams.type, - sort_prop: urlParams.sort - } + type_name: typeof urlParams.type === 'string' ? urlParams.type : null, + sort: queryParams.has('sort') ? queryParams.get('sort') : DEFAULT_SORT, + continue_watching: queryParams.get('cw') === '1' } - }; - } else if (typeof urlParams.type === 'string') { - return { - action: 'Load', - args: { - model: 'LibraryWithFilters', - args: { - type_name: urlParams.type - } - } - }; - } else { - const library = core.getState('library'); - if (library.type_names.length > 0) { - return { - action: 'Load', - args: { - model: 'LibraryWithFilters', - args: { - type_name: library.type_names[0] - } - } - }; - } else { - return { - action: 'Unload' - }; } - } - }, [urlParams]); + }; + }, [urlParams, queryParams]); return useModelState({ model: 'library', action: loadLibraryAction, diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index 9fcb33a3d..a328ed1ff 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -1,40 +1,53 @@ const React = require('react'); -const SORT_PROP_OPTIONS = [ - { label: 'Recent', value: 'ctime' }, +const SORT_OPTIONS = [ + { label: 'Recent', value: 'lastwatched' }, { label: 'A-Z', value: 'name' }, - { label: 'Year', value: 'year' }, + { label: 'Watched', value: 'timeswatched' }, ]; const mapSelectableInputs = (library) => { const typeSelect = { title: 'Select type', selected: library.selected !== null ? - [library.selected.type_name] + [JSON.stringify(library.selected.type_name)] : [], - options: library.type_names - .map((type) => ({ label: type, value: type })), + options: [{ label: 'All', value: JSON.stringify(null) }] + .concat(library.type_names.map((type) => ({ label: type, value: JSON.stringify(type) }))), onSelect: (event) => { - window.location.replace(`#/library/${encodeURIComponent(event.value)}`); + const type = JSON.parse(event.value); + const queryParams = new URLSearchParams( + library.selected !== null ? + [ + ['sort', library.selected.sort], + ['cw', library.selected.continue_watching ? '1' : '0'] + ] + : + [] + ); + window.location.replace(`#/library${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); } }; - const sortPropSelect = { + const sortSelect = { title: 'Select sort', selected: library.selected !== null ? - [library.selected.sort_prop] + [library.selected.sort] : [], - options: SORT_PROP_OPTIONS, + options: SORT_OPTIONS, onSelect: (event) => { - if (library.selected !== null) { - window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}/${encodeURIComponent(event.value)}`); - } else if (library.type_names.length > 0) { - window.location.replace(`#/library/${encodeURIComponent(library.type_names[0])}/${encodeURIComponent(event.value)}`); - } + const type = library.selected !== null ? library.selected.type_name : null; + const queryParams = new URLSearchParams( + [ + ['sort', event.value], + ['cw', library.selected !== null && library.selected.continue_watching ? '1' : '0'] + ] + ); + window.location.replace(`#/library${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); } }; - return [typeSelect, sortPropSelect]; + return [typeSelect, sortSelect]; }; const useSelectableInputs = (library) => {