secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Displaying added_from inline, fetching title from state

Browse Source
This commit is contained in:
James Barnsley
2021-09-05 21:12:32 +12:00
parent 2929797e6e
commit adb6042b84
4 changed files with 116 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/js/components/AddedFrom.js Normal file
View File

@ -0,0 +1,90 @@
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import URILink from './URILink';
import { I18n, i18n } from '../locale';
import {
getFromUri,
titleCase,
uriType,
} from '../util/helpers';
import {
makeItemSelector,
makeLoadingSelector,
} from '../util/selectors';
import { loadUri } from '../services/core/actions';
export default ({
by,
uri,
className = '',
inline,
}) => {
if (!uri) return null;
const dispatch = useDispatch();
const from = useSelector(makeItemSelector(uri));
const loading = useSelector(makeLoadingSelector([`(.*)${uri}(.*)`]));
useEffect(() => {
if (uri && !from && !loading) {
dispatch(loadUri(uri));
}
}, []);
const type = from?.type || uriType(uri);
let link = null;
switch (type) {
case 'discover':
link = (
<URILink type="recommendations" uri={getFromUri('seeds', uri)}>
<I18n path="discover.title" />
</URILink>
);
break;
case 'browse':
link = (
<URILink type={from?.type} uri={uri}>
<I18n path="library.browse.title" />
</URILink>
);
break;
case 'search':
link = (
<URILink type={from?.type} uri={uri}>
<I18n path="search.title" />
</URILink>
);
break;
case 'radio':
link = <I18n path="modal.edit_radio.title" />;
break;
case 'queue-history':
link = <I18n path="queue_history.title" />;
break;
default:
link = <URILink type={type} uri={uri}>{from?.name || titleCase(type)}</URILink>;
}
if (inline) {
return (
<div className={className}>
{i18n('specs.added_from')}
{link}
</div>
);
}
return (
<div className={`${className} tooltip`}>
{link}
<span className="tooltip__content">
{i18n('specs.added_from_by', { by, name: type })}
</span>
</div>
);
};

58
src/js/components/ContextMenu.js
View File

@ -34,6 +34,7 @@ import {
makeProvidersSelector,
makeLibrarySelector,
} from '../util/selectors';
import AddedFrom from './AddedFrom';
const processKeys = [
'MOPIDY_GET_LIBRARY_PLAYLISTS',
@ -696,49 +697,20 @@ class ContextMenu extends React.Component {
if (context.items_count === 1 && context.name === 'queue-track' && context.item !== undefined) {
if (queue_metadata[`tlid_${context.item.tlid}`] !== undefined) {
const metadata = queue_metadata[`tlid_${context.item.tlid}`];
if (metadata.added_from && metadata.added_by) {
const type = (metadata.added_from ? uriType(metadata.added_from) : null);
switch (type) {
case 'discover':
var link = (
<URILink type="recommendations" uri={getFromUri('seeds', metadata.added_from)}>
<I18n path="discover.title" transform="lower" />
</URILink>
);
break;
case 'browse':
var link = (
<URILink type="browse" uri={metadata.added_from.replace('iris:browse:', '')}>
<I18n path="library.browse.title" transform="lower" />
</URILink>
);
break;
case 'search':
var link = (
<URILink type="search" uri={metadata.added_from.replace('iris:', '')}>
<I18n path="search.title" transform="lower" />
</URILink>
);
break;
default:
var link = <URILink type={type} uri={metadata.added_from}>{type}</URILink>;
}
return (
<div className="context-menu__title">
<div className="context-menu__title__text">
{`${metadata.added_by} added from `}
{link}
</div>
</div>
);
}
const {
added_from,
added_by,
} = queue_metadata[`tlid_${context.item.tlid}`] || {};
return (
<div className="context-menu__title">
<AddedFrom
uri={added_from}
by={added_by}
className="context-menu__title__text"
inline
/>
</div>
);
}
}

77
src/js/components/Track.js
View File

@ -5,13 +5,9 @@ import { Dater, dater } from './Dater';
import URILink from './URILink';
import ContextMenuTrigger from './ContextMenuTrigger';
import ErrorBoundary from './ErrorBoundary';
import {
getFromUri,
titleCase,
isTouchDevice,
uriType,
} from '../util/helpers';
import { isTouchDevice } from '../util/helpers';
import { I18n, i18n } from '../locale';
import AddedFrom from './AddedFrom';
const MiddleColumn = ({
track_context,
@ -36,71 +32,16 @@ const MiddleColumn = ({
);
break;
}
case 'queue': {
if (added_from) {
const type = (added_from ? uriType(added_from) : null);
let link = null;
switch (type) {
case 'discover':
link = (
<URILink type="recommendations" uri={getFromUri('seeds', added_from)}>
<I18n path="discover.title" />
</URILink>
);
break;
case 'browse':
link = (
<URILink type={type} uri={added_from}>
<I18n path="library.browse.title" />
</URILink>
);
break;
case 'search':
link = (
<URILink type={type} uri={added_from}>
<I18n path="search.title" />
</URILink>
);
break;
case 'radio':
link = <I18n path="modal.edit_radio.title" />;
break;
case 'queue-history':
link = <I18n path="queue_history.title" />;
break;
default:
link = <URILink type={type} uri={added_from}>{titleCase(type)}</URILink>;
}
content = (
<div className="list__item__column__item list__item__column__item--added">
<span className="from">
{link}
</span>
{added_by && (
<span className="by by--with-spacing">
{`${added_by}`}
</span>
)}
</div>
);
} else if (added_by) {
content = (
<div className="list__item__column__item list__item__column__item--added">
<span className="by">{added_by}</span>
</div>
);
}
content = (
<AddedFrom
uri={added_from}
by={added_by}
className="list__item__column__item list__item__column__item--added"
/>
);
break;
}
default:
return null;
}

3
src/js/locale/en.yaml
View File

@ -117,7 +117,8 @@ specs:
playlists: '%{count} playlists'
plays: '%{count} plays'
popularity: '%{percent}% popularity'
added: 'Added '
added_from: 'Added from '
added_from_by: 'Added from %{name} by %{by}'
added_ago: 'Added %{time} ago'
edited: 'Edited '
edited_ago: 'Edited %{time} ago'