Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Library migrated to the new url format

Browse source
This commit is contained in:
nklhrstv 2020-03-27 17:08:07 +02:00
parent 19f4b8b9b4
commit 9c3abfe637
3 changed files with 54 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/Library/Library.js
View file

@ -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 (
<MainNavBars className={styles['library-container']} route={'library'}>
@ -19,7 +19,7 @@ const Library = ({ urlParams }) => {
profile.auth !== null && library.type_names.length > 0 ?
<div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortPropSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</div>
:
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;

60
src/routes/Library/useLibrary.js
View file

@ -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,

45
src/routes/Library/useSelectableInputs.js
View file

@ -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) => {