mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-01-20 07:12:58 -05:00
initial implementation
This commit is contained in:
Yiannis
File diff suppressed because it is too large
Load Diff
@@ -3,257 +3,278 @@ import { SiteContext } from '../../utils/contexts/';
|
||||
import { useUser, usePopup } from '../../utils/hooks/';
|
||||
import { PageStore, MediaPageStore } from '../../utils/stores/';
|
||||
import { PageActions, MediaPageActions } from '../../utils/actions/';
|
||||
import { formatInnerLink, publishedOnDate } from '../../utils/helpers/';
|
||||
import { formatInnerLink, inEmbeddedApp, publishedOnDate } from '../../utils/helpers/';
|
||||
import { PopupMain } from '../_shared/';
|
||||
import CommentsList from '../comments/Comments';
|
||||
import { replaceString } from '../../utils/helpers/';
|
||||
import { translateString } from '../../utils/helpers/';
|
||||
|
||||
function metafield(arr) {
|
||||
let i;
|
||||
let sep;
|
||||
let ret = [];
|
||||
let i;
|
||||
let sep;
|
||||
let ret = [];
|
||||
|
||||
if (arr && arr.length) {
|
||||
i = 0;
|
||||
sep = 1 < arr.length ? ', ' : '';
|
||||
while (i < arr.length) {
|
||||
ret[i] = (
|
||||
<div key={i}>
|
||||
<a href={arr[i].url} title={arr[i].title}>
|
||||
{arr[i].title}
|
||||
</a>
|
||||
{i < arr.length - 1 ? sep : ''}
|
||||
</div>
|
||||
);
|
||||
i += 1;
|
||||
if (arr && arr.length) {
|
||||
i = 0;
|
||||
sep = 1 < arr.length ? ', ' : '';
|
||||
while (i < arr.length) {
|
||||
ret[i] = (
|
||||
<div key={i}>
|
||||
<a href={arr[i].url} title={arr[i].title}>
|
||||
{arr[i].title}
|
||||
</a>
|
||||
{i < arr.length - 1 ? sep : ''}
|
||||
</div>
|
||||
);
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function MediaAuthorBanner(props) {
|
||||
return (
|
||||
<div className="media-author-banner">
|
||||
<div>
|
||||
<a className="author-banner-thumb" href={props.link || null} title={props.name}>
|
||||
<span style={{ backgroundImage: 'url(' + props.thumb + ')' }}>
|
||||
<img src={props.thumb} loading="lazy" alt={props.name} title={props.name} />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<a href={props.link} className="author-banner-name" title={props.name}>
|
||||
<span>{props.name}</span>
|
||||
</a>
|
||||
</span>
|
||||
{PageStore.get('config-media-item').displayPublishDate && props.published ? (
|
||||
<span className="author-banner-date">
|
||||
{translateString('Published on')} {replaceString(publishedOnDate(new Date(props.published)))}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="media-author-banner">
|
||||
<div>
|
||||
<a className="author-banner-thumb" href={props.link || null} title={props.name}>
|
||||
<span style={{ backgroundImage: 'url(' + props.thumb + ')' }}>
|
||||
<img src={props.thumb} loading="lazy" alt={props.name} title={props.name} />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<a href={props.link} className="author-banner-name" title={props.name}>
|
||||
<span>{props.name}</span>
|
||||
</a>
|
||||
</span>
|
||||
{PageStore.get('config-media-item').displayPublishDate && props.published ? (
|
||||
<span className="author-banner-date">
|
||||
{translateString('Published on')} {replaceString(publishedOnDate(new Date(props.published)))}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaMetaField(props) {
|
||||
return (
|
||||
<div className={props.id.trim() ? 'media-content-' + props.id.trim() : null}>
|
||||
<div className="media-content-field">
|
||||
<div className="media-content-field-label">
|
||||
<h4>{props.title}</h4>
|
||||
return (
|
||||
<div className={props.id.trim() ? 'media-content-' + props.id.trim() : null}>
|
||||
<div className="media-content-field">
|
||||
<div className="media-content-field-label">
|
||||
<h4>{props.title}</h4>
|
||||
</div>
|
||||
<div className="media-content-field-content">{props.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="media-content-field-content">{props.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
function EditMediaButton(props) {
|
||||
let link = props.link;
|
||||
let link = props.link;
|
||||
|
||||
if (window.MediaCMS.site.devEnv) {
|
||||
link = '/edit-media.html';
|
||||
}
|
||||
if (window.MediaCMS.site.devEnv) {
|
||||
link = '/edit-media.html';
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media-icon">
|
||||
<i className="material-icons">edit</i>
|
||||
</a>
|
||||
);
|
||||
return (
|
||||
<a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media-icon">
|
||||
<i className="material-icons">edit</i>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ViewerInfoContent(props) {
|
||||
const { userCan } = useUser();
|
||||
const { userCan } = useUser();
|
||||
|
||||
const description = props.description.trim();
|
||||
const tagsContent =
|
||||
!PageStore.get('config-enabled').taxonomies.tags || PageStore.get('config-enabled').taxonomies.tags.enabled
|
||||
? metafield(MediaPageStore.get('media-tags'))
|
||||
: [];
|
||||
const categoriesContent = PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? []
|
||||
: !PageStore.get('config-enabled').taxonomies.categories ||
|
||||
PageStore.get('config-enabled').taxonomies.categories.enabled
|
||||
? metafield(MediaPageStore.get('media-categories'))
|
||||
: [];
|
||||
const description = props.description.trim();
|
||||
const tagsContent =
|
||||
!PageStore.get('config-enabled').taxonomies.tags || PageStore.get('config-enabled').taxonomies.tags.enabled
|
||||
? metafield(MediaPageStore.get('media-tags'))
|
||||
: [];
|
||||
const categoriesContent = PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? []
|
||||
: !PageStore.get('config-enabled').taxonomies.categories ||
|
||||
PageStore.get('config-enabled').taxonomies.categories.enabled
|
||||
? metafield(MediaPageStore.get('media-categories'))
|
||||
: [];
|
||||
|
||||
let summary = MediaPageStore.get('media-summary');
|
||||
let summary = MediaPageStore.get('media-summary');
|
||||
|
||||
summary = summary ? summary.trim() : '';
|
||||
summary = summary ? summary.trim() : '';
|
||||
|
||||
const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
|
||||
const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
|
||||
|
||||
const [hasSummary, setHasSummary] = useState('' !== summary);
|
||||
const [isContentVisible, setIsContentVisible] = useState('' == summary);
|
||||
const [hasSummary, setHasSummary] = useState('' !== summary);
|
||||
const [isContentVisible, setIsContentVisible] = useState('' == summary);
|
||||
|
||||
function proceedMediaRemoval() {
|
||||
MediaPageActions.removeMedia();
|
||||
popupContentRef.current.toggle();
|
||||
}
|
||||
|
||||
function cancelMediaRemoval() {
|
||||
popupContentRef.current.toggle();
|
||||
}
|
||||
|
||||
function onMediaDelete(mediaId) {
|
||||
// FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
|
||||
setTimeout(function () {
|
||||
PageActions.addNotification('Media removed. Redirecting...', 'mediaDelete');
|
||||
setTimeout(function () {
|
||||
window.location.href =
|
||||
SiteContext._currentValue.url + '/' + MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
|
||||
}, 2000);
|
||||
}, 100);
|
||||
|
||||
if (void 0 !== mediaId) {
|
||||
console.info("Removed media '" + mediaId + '"');
|
||||
}
|
||||
}
|
||||
|
||||
function onMediaDeleteFail(mediaId) {
|
||||
// FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
|
||||
setTimeout(function () {
|
||||
PageActions.addNotification('Media removal failed', 'mediaDeleteFail');
|
||||
}, 100);
|
||||
|
||||
if (void 0 !== mediaId) {
|
||||
console.info('Media "' + mediaId + '"' + ' removal failed');
|
||||
}
|
||||
}
|
||||
|
||||
function onClickLoadMore() {
|
||||
setIsContentVisible(!isContentVisible);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
MediaPageStore.on('media_delete', onMediaDelete);
|
||||
MediaPageStore.on('media_delete_fail', onMediaDeleteFail);
|
||||
return () => {
|
||||
MediaPageStore.removeListener('media_delete', onMediaDelete);
|
||||
MediaPageStore.removeListener('media_delete_fail', onMediaDeleteFail);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const authorLink = formatInnerLink(props.author.url, SiteContext._currentValue.url);
|
||||
const authorThumb = formatInnerLink(props.author.thumb, SiteContext._currentValue.url);
|
||||
|
||||
function setTimestampAnchors(text) {
|
||||
function wrapTimestampWithAnchor(match, string) {
|
||||
let split = match.split(':'),
|
||||
s = 0,
|
||||
m = 1;
|
||||
|
||||
while (split.length > 0) {
|
||||
s += m * parseInt(split.pop(), 10);
|
||||
m *= 60;
|
||||
}
|
||||
|
||||
const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
|
||||
return wrapped;
|
||||
function proceedMediaRemoval() {
|
||||
MediaPageActions.removeMedia();
|
||||
popupContentRef.current.toggle();
|
||||
}
|
||||
|
||||
const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
|
||||
return text.replace(timeRegex, wrapTimestampWithAnchor);
|
||||
}
|
||||
function cancelMediaRemoval() {
|
||||
popupContentRef.current.toggle();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="media-info-content">
|
||||
{void 0 === PageStore.get('config-media-item').displayAuthor ||
|
||||
null === PageStore.get('config-media-item').displayAuthor ||
|
||||
!!PageStore.get('config-media-item').displayAuthor ? (
|
||||
<MediaAuthorBanner link={authorLink} thumb={authorThumb} name={props.author.name} published={props.published} />
|
||||
) : null}
|
||||
function onMediaDelete(mediaId) {
|
||||
// FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
|
||||
setTimeout(function () {
|
||||
PageActions.addNotification('Media removed. Redirecting...', 'mediaDelete');
|
||||
setTimeout(function () {
|
||||
window.location.href =
|
||||
SiteContext._currentValue.url +
|
||||
'/' +
|
||||
MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
|
||||
}, 2000);
|
||||
}, 100);
|
||||
|
||||
<div className="media-content-banner">
|
||||
<div className="media-content-banner-inner">
|
||||
{hasSummary ? <div className="media-content-summary">{summary}</div> : null}
|
||||
{(!hasSummary || isContentVisible) && description ? (
|
||||
<div
|
||||
className="media-content-description"
|
||||
dangerouslySetInnerHTML={{ __html: setTimestampAnchors(description) }}
|
||||
></div>
|
||||
) : null}
|
||||
{hasSummary ? (
|
||||
<button className="load-more" onClick={onClickLoadMore}>
|
||||
{isContentVisible ? 'SHOW LESS' : 'SHOW MORE'}
|
||||
</button>
|
||||
) : null}
|
||||
{tagsContent.length ? (
|
||||
<MediaMetaField
|
||||
value={tagsContent}
|
||||
title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')}
|
||||
id="tags"
|
||||
/>
|
||||
) : null}
|
||||
{categoriesContent.length ? (
|
||||
<MediaMetaField
|
||||
value={categoriesContent}
|
||||
title={1 < categoriesContent.length ? translateString('Categories') : translateString('Category')}
|
||||
id="categories"
|
||||
/>
|
||||
) : null}
|
||||
if (void 0 !== mediaId) {
|
||||
console.info("Removed media '" + mediaId + '"');
|
||||
}
|
||||
}
|
||||
|
||||
{userCan.editMedia ? (
|
||||
<div className="media-author-actions">
|
||||
{userCan.editMedia ? <EditMediaButton link={MediaPageStore.get('media-data').edit_url} /> : null}
|
||||
function onMediaDeleteFail(mediaId) {
|
||||
// FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
|
||||
setTimeout(function () {
|
||||
PageActions.addNotification('Media removal failed', 'mediaDeleteFail');
|
||||
}, 100);
|
||||
|
||||
{userCan.deleteMedia ? (
|
||||
<PopupTrigger contentRef={popupContentRef}>
|
||||
<button className="remove-media-icon" title={translateString('Delete media')}>
|
||||
<i className="material-icons">delete</i>
|
||||
</button>
|
||||
</PopupTrigger>
|
||||
) : null}
|
||||
if (void 0 !== mediaId) {
|
||||
console.info('Media "' + mediaId + '"' + ' removal failed');
|
||||
}
|
||||
}
|
||||
|
||||
{userCan.deleteMedia ? (
|
||||
<PopupContent contentRef={popupContentRef}>
|
||||
<PopupMain>
|
||||
<div className="popup-message">
|
||||
<span className="popup-message-title">Media removal</span>
|
||||
<span className="popup-message-main">You're willing to remove media permanently?</span>
|
||||
</div>
|
||||
<hr />
|
||||
<span className="popup-message-bottom">
|
||||
<button className="button-link cancel-comment-removal" onClick={cancelMediaRemoval}>
|
||||
CANCEL
|
||||
</button>
|
||||
<button className="button-link proceed-comment-removal" onClick={proceedMediaRemoval}>
|
||||
PROCEED
|
||||
</button>
|
||||
</span>
|
||||
</PopupMain>
|
||||
</PopupContent>
|
||||
) : null}
|
||||
function onClickLoadMore() {
|
||||
setIsContentVisible(!isContentVisible);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
MediaPageStore.on('media_delete', onMediaDelete);
|
||||
MediaPageStore.on('media_delete_fail', onMediaDeleteFail);
|
||||
return () => {
|
||||
MediaPageStore.removeListener('media_delete', onMediaDelete);
|
||||
MediaPageStore.removeListener('media_delete_fail', onMediaDeleteFail);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const authorLink = formatInnerLink(props.author.url, SiteContext._currentValue.url);
|
||||
const authorThumb = formatInnerLink(props.author.thumb, SiteContext._currentValue.url);
|
||||
|
||||
function setTimestampAnchors(text) {
|
||||
function wrapTimestampWithAnchor(match, string) {
|
||||
let split = match.split(':'),
|
||||
s = 0,
|
||||
m = 1;
|
||||
|
||||
while (split.length > 0) {
|
||||
s += m * parseInt(split.pop(), 10);
|
||||
m *= 60;
|
||||
}
|
||||
|
||||
const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
|
||||
return wrapped;
|
||||
}
|
||||
|
||||
const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
|
||||
return text.replace(timeRegex, wrapTimestampWithAnchor);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="media-info-content">
|
||||
{void 0 === PageStore.get('config-media-item').displayAuthor ||
|
||||
null === PageStore.get('config-media-item').displayAuthor ||
|
||||
!!PageStore.get('config-media-item').displayAuthor ? (
|
||||
<MediaAuthorBanner
|
||||
link={authorLink}
|
||||
thumb={authorThumb}
|
||||
name={props.author.name}
|
||||
published={props.published}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="media-content-banner">
|
||||
<div className="media-content-banner-inner">
|
||||
{hasSummary ? <div className="media-content-summary">{summary}</div> : null}
|
||||
{(!hasSummary || isContentVisible) && description ? (
|
||||
<div
|
||||
className="media-content-description"
|
||||
dangerouslySetInnerHTML={{ __html: setTimestampAnchors(description) }}
|
||||
></div>
|
||||
) : null}
|
||||
{hasSummary ? (
|
||||
<button className="load-more" onClick={onClickLoadMore}>
|
||||
{isContentVisible ? 'SHOW LESS' : 'SHOW MORE'}
|
||||
</button>
|
||||
) : null}
|
||||
{tagsContent.length ? (
|
||||
<MediaMetaField
|
||||
value={tagsContent}
|
||||
title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')}
|
||||
id="tags"
|
||||
/>
|
||||
) : null}
|
||||
{categoriesContent.length ? (
|
||||
<MediaMetaField
|
||||
value={categoriesContent}
|
||||
title={
|
||||
1 < categoriesContent.length
|
||||
? translateString('Categories')
|
||||
: translateString('Category')
|
||||
}
|
||||
id="categories"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{userCan.editMedia ? (
|
||||
<div className="media-author-actions">
|
||||
{userCan.editMedia ? (
|
||||
<EditMediaButton link={MediaPageStore.get('media-data').edit_url} />
|
||||
) : null}
|
||||
|
||||
{userCan.deleteMedia ? (
|
||||
<PopupTrigger contentRef={popupContentRef}>
|
||||
<button className="remove-media-icon" title={translateString('Delete media')}>
|
||||
<i className="material-icons">delete</i>
|
||||
</button>
|
||||
</PopupTrigger>
|
||||
) : null}
|
||||
|
||||
{userCan.deleteMedia ? (
|
||||
<PopupContent contentRef={popupContentRef}>
|
||||
<PopupMain>
|
||||
<div className="popup-message">
|
||||
<span className="popup-message-title">Media removal</span>
|
||||
<span className="popup-message-main">
|
||||
You're willing to remove media permanently?
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<span className="popup-message-bottom">
|
||||
<button
|
||||
className="button-link cancel-comment-removal"
|
||||
onClick={cancelMediaRemoval}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
className="button-link proceed-comment-removal"
|
||||
onClick={proceedMediaRemoval}
|
||||
>
|
||||
PROCEED
|
||||
</button>
|
||||
</span>
|
||||
</PopupMain>
|
||||
</PopupContent>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommentsList />
|
||||
</div>
|
||||
);
|
||||
{!inEmbeddedApp() && <CommentsList />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,33 @@
|
||||
.page-main-wrap {
|
||||
padding-top: var(--header-height);
|
||||
will-change: padding-left;
|
||||
padding-top: var(--header-height);
|
||||
will-change: padding-left;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.visible-sidebar & {
|
||||
padding-left: var(--sidebar-width);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-sidebar #page-media & {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.visible-sidebar & {
|
||||
padding-left: var(--sidebar-width);
|
||||
opacity: 1;
|
||||
#page-media {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visible-sidebar #page-media & {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.visible-sidebar & {
|
||||
#page-media {
|
||||
padding-left: 0;
|
||||
body.sliding-sidebar & {
|
||||
transition-property: padding-left;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
body.sliding-sidebar & {
|
||||
transition-property: padding-left;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.embedded-app & {
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#page-profile-media,
|
||||
@@ -30,20 +35,20 @@
|
||||
#page-profile-about,
|
||||
#page-liked.profile-page-liked,
|
||||
#page-history.profile-page-history {
|
||||
.page-main {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
}
|
||||
.page-main {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
}
|
||||
}
|
||||
|
||||
.page-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-main-inner {
|
||||
display: block;
|
||||
margin: 1em 1em 0 1em;
|
||||
display: block;
|
||||
margin: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
#page-profile-media,
|
||||
@@ -51,7 +56,7 @@
|
||||
#page-profile-about,
|
||||
#page-liked.profile-page-liked,
|
||||
#page-history.profile-page-history {
|
||||
.page-main-wrap {
|
||||
background-color: var(--body-bg-color);
|
||||
}
|
||||
.page-main-wrap {
|
||||
background-color: var(--body-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,7 @@ import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFi
|
||||
import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
|
||||
import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
|
||||
import { BulkActionsModals } from '../components/BulkActionsModals';
|
||||
import { translateString } from '../utils/helpers';
|
||||
import { inEmbeddedApp, translateString } from '../utils/helpers';
|
||||
import { withBulkActions } from '../utils/hoc/withBulkActions';
|
||||
|
||||
import { Page } from './_Page';
|
||||
@@ -19,400 +19,443 @@ import { Page } from './_Page';
|
||||
import '../components/profile-page/ProfilePage.scss';
|
||||
|
||||
function EmptySharedByMe(props) {
|
||||
return (
|
||||
<LinksConsumer>
|
||||
{(links) => (
|
||||
<div className="empty-media empty-channel-media">
|
||||
<div className="welcome-title">No shared media</div>
|
||||
<div className="start-uploading">
|
||||
Media that you have shared with others will show up here.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LinksConsumer>
|
||||
);
|
||||
return (
|
||||
<LinksConsumer>
|
||||
{(links) => (
|
||||
<div className="empty-media empty-channel-media">
|
||||
<div className="welcome-title">No shared media</div>
|
||||
<div className="start-uploading">Media that you have shared with others will show up here.</div>
|
||||
</div>
|
||||
)}
|
||||
</LinksConsumer>
|
||||
);
|
||||
}
|
||||
|
||||
class ProfileSharedByMePage extends Page {
|
||||
constructor(props, pageSlug) {
|
||||
super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me');
|
||||
constructor(props, pageSlug) {
|
||||
super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me');
|
||||
|
||||
this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me';
|
||||
this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me';
|
||||
|
||||
this.state = {
|
||||
channelMediaCount: -1,
|
||||
author: ProfilePageStore.get('author-data'),
|
||||
uploadsPreviewItemsCount: 0,
|
||||
title: this.props.title,
|
||||
query: ProfilePageStore.get('author-query'),
|
||||
requestUrl: null,
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
filterArgs: '',
|
||||
availableTags: [],
|
||||
selectedTag: 'all',
|
||||
selectedSort: 'date_added_desc',
|
||||
};
|
||||
this.state = {
|
||||
channelMediaCount: -1,
|
||||
author: ProfilePageStore.get('author-data'),
|
||||
uploadsPreviewItemsCount: 0,
|
||||
title: this.props.title,
|
||||
query: ProfilePageStore.get('author-query'),
|
||||
requestUrl: null,
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
filterArgs: '',
|
||||
availableTags: [],
|
||||
selectedTag: 'all',
|
||||
selectedSort: 'date_added_desc',
|
||||
};
|
||||
|
||||
this.authorDataLoad = this.authorDataLoad.bind(this);
|
||||
this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
|
||||
this.getCountFunc = this.getCountFunc.bind(this);
|
||||
this.changeRequestQuery = this.changeRequestQuery.bind(this);
|
||||
this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
|
||||
this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
|
||||
this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
|
||||
this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
|
||||
this.onTagSelect = this.onTagSelect.bind(this);
|
||||
this.onSortSelect = this.onSortSelect.bind(this);
|
||||
this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
|
||||
this.authorDataLoad = this.authorDataLoad.bind(this);
|
||||
this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
|
||||
this.getCountFunc = this.getCountFunc.bind(this);
|
||||
this.changeRequestQuery = this.changeRequestQuery.bind(this);
|
||||
this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
|
||||
this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
|
||||
this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
|
||||
this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
|
||||
this.onTagSelect = this.onTagSelect.bind(this);
|
||||
this.onSortSelect = this.onSortSelect.bind(this);
|
||||
this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
|
||||
|
||||
ProfilePageStore.on('load-author-data', this.authorDataLoad);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
ProfilePageActions.load_author_data();
|
||||
}
|
||||
|
||||
authorDataLoad() {
|
||||
const author = ProfilePageStore.get('author-data');
|
||||
|
||||
let requestUrl = this.state.requestUrl;
|
||||
|
||||
if (author) {
|
||||
if (this.state.query) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me' + this.state.filterArgs;
|
||||
}
|
||||
ProfilePageStore.on('load-author-data', this.authorDataLoad);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
author: author,
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
ProfilePageActions.load_author_data();
|
||||
}
|
||||
|
||||
onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
|
||||
this.setState({
|
||||
uploadsPreviewItemsCount: totalAuthorPreviewItems,
|
||||
});
|
||||
}
|
||||
authorDataLoad() {
|
||||
const author = ProfilePageStore.get('author-data');
|
||||
|
||||
getCountFunc(count) {
|
||||
this.setState(
|
||||
{
|
||||
channelMediaCount: count,
|
||||
},
|
||||
() => {
|
||||
if (this.state.query) {
|
||||
let title = '';
|
||||
let requestUrl = this.state.requestUrl;
|
||||
|
||||
if (!count) {
|
||||
title = 'No results for "' + this.state.query + '"';
|
||||
} else if (1 === count) {
|
||||
title = '1 result for "' + this.state.query + '"';
|
||||
} else {
|
||||
title = count + ' results for "' + this.state.query + '"';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
title: title,
|
||||
});
|
||||
if (author) {
|
||||
if (this.state.query) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
author.id +
|
||||
'&show=shared_by_me&q=' +
|
||||
encodeURIComponent(this.state.query) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
author.id +
|
||||
'&show=shared_by_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
changeRequestQuery(newQuery) {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
this.setState({
|
||||
author: author,
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (newQuery) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
|
||||
onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
|
||||
this.setState({
|
||||
uploadsPreviewItemsCount: totalAuthorPreviewItems,
|
||||
});
|
||||
}
|
||||
|
||||
let title = this.state.title;
|
||||
getCountFunc(count) {
|
||||
this.setState(
|
||||
{
|
||||
channelMediaCount: count,
|
||||
},
|
||||
() => {
|
||||
if (this.state.query) {
|
||||
let title = '';
|
||||
|
||||
if ('' === newQuery) {
|
||||
title = this.props.title;
|
||||
if (!count) {
|
||||
title = 'No results for "' + this.state.query + '"';
|
||||
} else if (1 === count) {
|
||||
title = '1 result for "' + this.state.query + '"';
|
||||
} else {
|
||||
title = count + ' results for "' + this.state.query + '"';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
query: newQuery,
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleFiltersClick() {
|
||||
this.setState({
|
||||
hiddenFilters: !this.state.hiddenFilters,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleTagsClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: !this.state.hiddenTags,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleSortingClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: !this.state.hiddenSorting,
|
||||
});
|
||||
}
|
||||
|
||||
onTagSelect(tag) {
|
||||
this.setState({ selectedTag: tag }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: this.state.selectedSort,
|
||||
tag: tag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onSortSelect(sortBy) {
|
||||
this.setState({ selectedSort: sortBy }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: sortBy,
|
||||
tag: this.state.selectedTag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onFiltersUpdate(updatedArgs) {
|
||||
const args = {
|
||||
media_type: null,
|
||||
upload_date: null,
|
||||
duration: null,
|
||||
publish_state: null,
|
||||
sort_by: null,
|
||||
ordering: null,
|
||||
t: null,
|
||||
};
|
||||
|
||||
switch (updatedArgs.media_type) {
|
||||
case 'video':
|
||||
case 'audio':
|
||||
case 'image':
|
||||
case 'pdf':
|
||||
args.media_type = updatedArgs.media_type;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (updatedArgs.upload_date) {
|
||||
case 'today':
|
||||
case 'this_week':
|
||||
case 'this_month':
|
||||
case 'this_year':
|
||||
args.upload_date = updatedArgs.upload_date;
|
||||
break;
|
||||
}
|
||||
|
||||
// Handle duration filter
|
||||
if (updatedArgs.duration && updatedArgs.duration !== 'all') {
|
||||
args.duration = updatedArgs.duration;
|
||||
}
|
||||
|
||||
// Handle publish state filter
|
||||
if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
|
||||
args.publish_state = updatedArgs.publish_state;
|
||||
}
|
||||
|
||||
switch (updatedArgs.sort_by) {
|
||||
case 'date_added_desc':
|
||||
// Default sorting, no need to add parameters
|
||||
break;
|
||||
case 'date_added_asc':
|
||||
args.ordering = 'asc';
|
||||
break;
|
||||
case 'alphabetically_asc':
|
||||
args.sort_by = 'title_asc';
|
||||
break;
|
||||
case 'alphabetically_desc':
|
||||
args.sort_by = 'title_desc';
|
||||
break;
|
||||
case 'plays_least':
|
||||
args.sort_by = 'views_asc';
|
||||
break;
|
||||
case 'plays_most':
|
||||
args.sort_by = 'views_desc';
|
||||
break;
|
||||
case 'likes_least':
|
||||
args.sort_by = 'likes_asc';
|
||||
break;
|
||||
case 'likes_most':
|
||||
args.sort_by = 'likes_desc';
|
||||
break;
|
||||
}
|
||||
|
||||
if (updatedArgs.tag && updatedArgs.tag !== 'all') {
|
||||
args.t = updatedArgs.tag;
|
||||
}
|
||||
|
||||
const newArgs = [];
|
||||
|
||||
for (let arg in args) {
|
||||
if (null !== args[arg]) {
|
||||
newArgs.push(arg + '=' + args[arg]);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
|
||||
},
|
||||
function () {
|
||||
changeRequestQuery(newQuery) {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (this.state.query) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
|
||||
if (newQuery) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_by_me&q=' +
|
||||
encodeURIComponent(newQuery) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_by_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
|
||||
let title = this.state.title;
|
||||
|
||||
if ('' === newQuery) {
|
||||
title = this.props.title;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
requestUrl: requestUrl,
|
||||
query: newQuery,
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onResponseDataLoaded(responseData) {
|
||||
if (responseData && responseData.tags) {
|
||||
const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
|
||||
this.setState({ availableTags: tags });
|
||||
}
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const authorData = ProfilePageStore.get('author-data');
|
||||
onToggleFiltersClick() {
|
||||
this.setState({
|
||||
hiddenFilters: !this.state.hiddenFilters,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
|
||||
onToggleTagsClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: !this.state.hiddenTags,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Check if any filters are active
|
||||
const hasActiveFilters = this.state.filterArgs && (
|
||||
this.state.filterArgs.includes('media_type=') ||
|
||||
this.state.filterArgs.includes('upload_date=') ||
|
||||
this.state.filterArgs.includes('duration=') ||
|
||||
this.state.filterArgs.includes('publish_state=')
|
||||
);
|
||||
onToggleSortingClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: !this.state.hiddenSorting,
|
||||
});
|
||||
}
|
||||
|
||||
return [
|
||||
this.state.author ? (
|
||||
<ProfilePagesHeader
|
||||
key="ProfilePagesHeader"
|
||||
author={this.state.author}
|
||||
type="shared_by_me"
|
||||
onQueryChange={this.changeRequestQuery}
|
||||
onToggleFiltersClick={this.onToggleFiltersClick}
|
||||
onToggleTagsClick={this.onToggleTagsClick}
|
||||
onToggleSortingClick={this.onToggleSortingClick}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
hasActiveTags={this.state.selectedTag !== 'all'}
|
||||
hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
|
||||
/>
|
||||
) : null,
|
||||
this.state.author ? (
|
||||
<ProfilePagesContent key="ProfilePagesContent">
|
||||
<MediaListWrapper
|
||||
title={this.state.title}
|
||||
className="items-list-ver"
|
||||
showBulkActions={isMediaAuthor}
|
||||
selectedCount={this.props.bulkActions.selectedMedia.size}
|
||||
totalCount={this.props.bulkActions.availableMediaIds.length}
|
||||
onBulkAction={this.props.bulkActions.handleBulkAction}
|
||||
onSelectAll={this.props.bulkActions.handleSelectAll}
|
||||
onDeselectAll={this.props.bulkActions.handleDeselectAll}
|
||||
>
|
||||
<ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
|
||||
<ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
|
||||
<ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
|
||||
<LazyLoadItemListAsync
|
||||
key={`${this.state.requestUrl}-${this.props.bulkActions.listKey}`}
|
||||
requestUrl={this.state.requestUrl}
|
||||
hideAuthor={true}
|
||||
itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
|
||||
hideViews={!PageStore.get('config-media-item').displayViews}
|
||||
hideDate={!PageStore.get('config-media-item').displayPublishDate}
|
||||
canEdit={isMediaAuthor}
|
||||
onResponseDataLoaded={this.onResponseDataLoaded}
|
||||
showSelection={isMediaAuthor}
|
||||
hasAnySelection={this.props.bulkActions.selectedMedia.size > 0}
|
||||
selectedMedia={this.props.bulkActions.selectedMedia}
|
||||
onMediaSelection={this.props.bulkActions.handleMediaSelection}
|
||||
onItemsUpdate={this.props.bulkActions.handleItemsUpdate}
|
||||
/>
|
||||
{isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
|
||||
<EmptySharedByMe name={this.state.author.name} />
|
||||
) : null}
|
||||
</MediaListWrapper>
|
||||
</ProfilePagesContent>
|
||||
) : null,
|
||||
this.state.author && isMediaAuthor ? (
|
||||
<BulkActionsModals
|
||||
key="BulkActionsModals"
|
||||
{...this.props.bulkActions}
|
||||
selectedMediaIds={Array.from(this.props.bulkActions.selectedMedia)}
|
||||
csrfToken={this.props.bulkActions.getCsrfToken()}
|
||||
username={this.state.author.username}
|
||||
onConfirmCancel={this.props.bulkActions.handleConfirmCancel}
|
||||
onConfirmProceed={this.props.bulkActions.handleConfirmProceed}
|
||||
onPermissionModalCancel={this.props.bulkActions.handlePermissionModalCancel}
|
||||
onPermissionModalSuccess={this.props.bulkActions.handlePermissionModalSuccess}
|
||||
onPermissionModalError={this.props.bulkActions.handlePermissionModalError}
|
||||
onPlaylistModalCancel={this.props.bulkActions.handlePlaylistModalCancel}
|
||||
onPlaylistModalSuccess={this.props.bulkActions.handlePlaylistModalSuccess}
|
||||
onPlaylistModalError={this.props.bulkActions.handlePlaylistModalError}
|
||||
onChangeOwnerModalCancel={this.props.bulkActions.handleChangeOwnerModalCancel}
|
||||
onChangeOwnerModalSuccess={this.props.bulkActions.handleChangeOwnerModalSuccess}
|
||||
onChangeOwnerModalError={this.props.bulkActions.handleChangeOwnerModalError}
|
||||
onPublishStateModalCancel={this.props.bulkActions.handlePublishStateModalCancel}
|
||||
onPublishStateModalSuccess={this.props.bulkActions.handlePublishStateModalSuccess}
|
||||
onPublishStateModalError={this.props.bulkActions.handlePublishStateModalError}
|
||||
onCategoryModalCancel={this.props.bulkActions.handleCategoryModalCancel}
|
||||
onCategoryModalSuccess={this.props.bulkActions.handleCategoryModalSuccess}
|
||||
onCategoryModalError={this.props.bulkActions.handleCategoryModalError}
|
||||
onTagModalCancel={this.props.bulkActions.handleTagModalCancel}
|
||||
onTagModalSuccess={this.props.bulkActions.handleTagModalSuccess}
|
||||
onTagModalError={this.props.bulkActions.handleTagModalError}
|
||||
/>
|
||||
) : null,
|
||||
];
|
||||
}
|
||||
onTagSelect(tag) {
|
||||
this.setState({ selectedTag: tag }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: this.state.selectedSort,
|
||||
tag: tag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onSortSelect(sortBy) {
|
||||
this.setState({ selectedSort: sortBy }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: sortBy,
|
||||
tag: this.state.selectedTag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onFiltersUpdate(updatedArgs) {
|
||||
const args = {
|
||||
media_type: null,
|
||||
upload_date: null,
|
||||
duration: null,
|
||||
publish_state: null,
|
||||
sort_by: null,
|
||||
ordering: null,
|
||||
t: null,
|
||||
};
|
||||
|
||||
switch (updatedArgs.media_type) {
|
||||
case 'video':
|
||||
case 'audio':
|
||||
case 'image':
|
||||
case 'pdf':
|
||||
args.media_type = updatedArgs.media_type;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (updatedArgs.upload_date) {
|
||||
case 'today':
|
||||
case 'this_week':
|
||||
case 'this_month':
|
||||
case 'this_year':
|
||||
args.upload_date = updatedArgs.upload_date;
|
||||
break;
|
||||
}
|
||||
|
||||
// Handle duration filter
|
||||
if (updatedArgs.duration && updatedArgs.duration !== 'all') {
|
||||
args.duration = updatedArgs.duration;
|
||||
}
|
||||
|
||||
// Handle publish state filter
|
||||
if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
|
||||
args.publish_state = updatedArgs.publish_state;
|
||||
}
|
||||
|
||||
switch (updatedArgs.sort_by) {
|
||||
case 'date_added_desc':
|
||||
// Default sorting, no need to add parameters
|
||||
break;
|
||||
case 'date_added_asc':
|
||||
args.ordering = 'asc';
|
||||
break;
|
||||
case 'alphabetically_asc':
|
||||
args.sort_by = 'title_asc';
|
||||
break;
|
||||
case 'alphabetically_desc':
|
||||
args.sort_by = 'title_desc';
|
||||
break;
|
||||
case 'plays_least':
|
||||
args.sort_by = 'views_asc';
|
||||
break;
|
||||
case 'plays_most':
|
||||
args.sort_by = 'views_desc';
|
||||
break;
|
||||
case 'likes_least':
|
||||
args.sort_by = 'likes_asc';
|
||||
break;
|
||||
case 'likes_most':
|
||||
args.sort_by = 'likes_desc';
|
||||
break;
|
||||
}
|
||||
|
||||
if (updatedArgs.tag && updatedArgs.tag !== 'all') {
|
||||
args.t = updatedArgs.tag;
|
||||
}
|
||||
|
||||
const newArgs = [];
|
||||
|
||||
for (let arg in args) {
|
||||
if (null !== args[arg]) {
|
||||
newArgs.push(arg + '=' + args[arg]);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
|
||||
},
|
||||
function () {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (this.state.query) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_by_me&q=' +
|
||||
encodeURIComponent(this.state.query) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_by_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onResponseDataLoaded(responseData) {
|
||||
if (responseData && responseData.tags) {
|
||||
const tags = responseData.tags
|
||||
.split(',')
|
||||
.map((tag) => tag.trim())
|
||||
.filter((tag) => tag);
|
||||
this.setState({ availableTags: tags });
|
||||
}
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const authorData = ProfilePageStore.get('author-data');
|
||||
|
||||
const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
|
||||
|
||||
// Check if any filters are active
|
||||
const hasActiveFilters =
|
||||
this.state.filterArgs &&
|
||||
(this.state.filterArgs.includes('media_type=') ||
|
||||
this.state.filterArgs.includes('upload_date=') ||
|
||||
this.state.filterArgs.includes('duration=') ||
|
||||
this.state.filterArgs.includes('publish_state='));
|
||||
|
||||
return [
|
||||
this.state.author ? (
|
||||
<ProfilePagesHeader
|
||||
key="ProfilePagesHeader"
|
||||
author={this.state.author}
|
||||
type="shared_by_me"
|
||||
onQueryChange={this.changeRequestQuery}
|
||||
onToggleFiltersClick={this.onToggleFiltersClick}
|
||||
onToggleTagsClick={this.onToggleTagsClick}
|
||||
onToggleSortingClick={this.onToggleSortingClick}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
hasActiveTags={this.state.selectedTag !== 'all'}
|
||||
hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
|
||||
hideChannelBanner={inEmbeddedApp()}
|
||||
/>
|
||||
) : null,
|
||||
this.state.author ? (
|
||||
<ProfilePagesContent key="ProfilePagesContent">
|
||||
<MediaListWrapper
|
||||
title={this.state.title}
|
||||
className="items-list-ver"
|
||||
showBulkActions={isMediaAuthor}
|
||||
selectedCount={this.props.bulkActions.selectedMedia.size}
|
||||
totalCount={this.props.bulkActions.availableMediaIds.length}
|
||||
onBulkAction={this.props.bulkActions.handleBulkAction}
|
||||
onSelectAll={this.props.bulkActions.handleSelectAll}
|
||||
onDeselectAll={this.props.bulkActions.handleDeselectAll}
|
||||
>
|
||||
<ProfileMediaFilters
|
||||
hidden={this.state.hiddenFilters}
|
||||
tags={this.state.availableTags}
|
||||
onFiltersUpdate={this.onFiltersUpdate}
|
||||
/>
|
||||
<ProfileMediaTags
|
||||
hidden={this.state.hiddenTags}
|
||||
tags={this.state.availableTags}
|
||||
onTagSelect={this.onTagSelect}
|
||||
/>
|
||||
<ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
|
||||
<LazyLoadItemListAsync
|
||||
key={`${this.state.requestUrl}-${this.props.bulkActions.listKey}`}
|
||||
requestUrl={this.state.requestUrl}
|
||||
hideAuthor={true}
|
||||
itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
|
||||
hideViews={!PageStore.get('config-media-item').displayViews}
|
||||
hideDate={!PageStore.get('config-media-item').displayPublishDate}
|
||||
canEdit={isMediaAuthor}
|
||||
onResponseDataLoaded={this.onResponseDataLoaded}
|
||||
showSelection={isMediaAuthor}
|
||||
hasAnySelection={this.props.bulkActions.selectedMedia.size > 0}
|
||||
selectedMedia={this.props.bulkActions.selectedMedia}
|
||||
onMediaSelection={this.props.bulkActions.handleMediaSelection}
|
||||
onItemsUpdate={this.props.bulkActions.handleItemsUpdate}
|
||||
/>
|
||||
{isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
|
||||
<EmptySharedByMe name={this.state.author.name} />
|
||||
) : null}
|
||||
</MediaListWrapper>
|
||||
</ProfilePagesContent>
|
||||
) : null,
|
||||
this.state.author && isMediaAuthor ? (
|
||||
<BulkActionsModals
|
||||
key="BulkActionsModals"
|
||||
{...this.props.bulkActions}
|
||||
selectedMediaIds={Array.from(this.props.bulkActions.selectedMedia)}
|
||||
csrfToken={this.props.bulkActions.getCsrfToken()}
|
||||
username={this.state.author.username}
|
||||
onConfirmCancel={this.props.bulkActions.handleConfirmCancel}
|
||||
onConfirmProceed={this.props.bulkActions.handleConfirmProceed}
|
||||
onPermissionModalCancel={this.props.bulkActions.handlePermissionModalCancel}
|
||||
onPermissionModalSuccess={this.props.bulkActions.handlePermissionModalSuccess}
|
||||
onPermissionModalError={this.props.bulkActions.handlePermissionModalError}
|
||||
onPlaylistModalCancel={this.props.bulkActions.handlePlaylistModalCancel}
|
||||
onPlaylistModalSuccess={this.props.bulkActions.handlePlaylistModalSuccess}
|
||||
onPlaylistModalError={this.props.bulkActions.handlePlaylistModalError}
|
||||
onChangeOwnerModalCancel={this.props.bulkActions.handleChangeOwnerModalCancel}
|
||||
onChangeOwnerModalSuccess={this.props.bulkActions.handleChangeOwnerModalSuccess}
|
||||
onChangeOwnerModalError={this.props.bulkActions.handleChangeOwnerModalError}
|
||||
onPublishStateModalCancel={this.props.bulkActions.handlePublishStateModalCancel}
|
||||
onPublishStateModalSuccess={this.props.bulkActions.handlePublishStateModalSuccess}
|
||||
onPublishStateModalError={this.props.bulkActions.handlePublishStateModalError}
|
||||
onCategoryModalCancel={this.props.bulkActions.handleCategoryModalCancel}
|
||||
onCategoryModalSuccess={this.props.bulkActions.handleCategoryModalSuccess}
|
||||
onCategoryModalError={this.props.bulkActions.handleCategoryModalError}
|
||||
onTagModalCancel={this.props.bulkActions.handleTagModalCancel}
|
||||
onTagModalSuccess={this.props.bulkActions.handleTagModalSuccess}
|
||||
onTagModalError={this.props.bulkActions.handleTagModalError}
|
||||
/>
|
||||
) : null,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
ProfileSharedByMePage.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
bulkActions: PropTypes.object.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
bulkActions: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
ProfileSharedByMePage.defaultProps = {
|
||||
title: 'Shared by me',
|
||||
title: 'Shared by me',
|
||||
};
|
||||
|
||||
// Wrap with HOC and export as named export for compatibility
|
||||
|
||||
@@ -10,364 +10,404 @@ import { LazyLoadItemListAsync } from '../components/item-list/LazyLoadItemListA
|
||||
import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFilters';
|
||||
import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
|
||||
import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
|
||||
import { translateString } from '../utils/helpers';
|
||||
import { inEmbeddedApp, translateString } from '../utils/helpers';
|
||||
|
||||
import { Page } from './_Page';
|
||||
|
||||
import '../components/profile-page/ProfilePage.scss';
|
||||
|
||||
function EmptySharedWithMe(props) {
|
||||
return (
|
||||
<LinksConsumer>
|
||||
{(links) => (
|
||||
<div className="empty-media empty-channel-media">
|
||||
<div className="welcome-title">No shared media</div>
|
||||
<div className="start-uploading">
|
||||
Media that others have shared with you will show up here.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LinksConsumer>
|
||||
);
|
||||
return (
|
||||
<LinksConsumer>
|
||||
{(links) => (
|
||||
<div className="empty-media empty-channel-media">
|
||||
<div className="welcome-title">No shared media</div>
|
||||
<div className="start-uploading">Media that others have shared with you will show up here.</div>
|
||||
</div>
|
||||
)}
|
||||
</LinksConsumer>
|
||||
);
|
||||
}
|
||||
|
||||
export class ProfileSharedWithMePage extends Page {
|
||||
constructor(props, pageSlug) {
|
||||
super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me');
|
||||
constructor(props, pageSlug) {
|
||||
super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me');
|
||||
|
||||
this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me';
|
||||
this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me';
|
||||
|
||||
this.state = {
|
||||
channelMediaCount: -1,
|
||||
author: ProfilePageStore.get('author-data'),
|
||||
uploadsPreviewItemsCount: 0,
|
||||
title: this.props.title,
|
||||
query: ProfilePageStore.get('author-query'),
|
||||
requestUrl: null,
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
filterArgs: '',
|
||||
availableTags: [],
|
||||
selectedTag: 'all',
|
||||
selectedSort: 'date_added_desc',
|
||||
};
|
||||
this.state = {
|
||||
channelMediaCount: -1,
|
||||
author: ProfilePageStore.get('author-data'),
|
||||
uploadsPreviewItemsCount: 0,
|
||||
title: this.props.title,
|
||||
query: ProfilePageStore.get('author-query'),
|
||||
requestUrl: null,
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
filterArgs: '',
|
||||
availableTags: [],
|
||||
selectedTag: 'all',
|
||||
selectedSort: 'date_added_desc',
|
||||
};
|
||||
|
||||
this.authorDataLoad = this.authorDataLoad.bind(this);
|
||||
this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
|
||||
this.getCountFunc = this.getCountFunc.bind(this);
|
||||
this.changeRequestQuery = this.changeRequestQuery.bind(this);
|
||||
this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
|
||||
this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
|
||||
this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
|
||||
this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
|
||||
this.onTagSelect = this.onTagSelect.bind(this);
|
||||
this.onSortSelect = this.onSortSelect.bind(this);
|
||||
this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
|
||||
this.authorDataLoad = this.authorDataLoad.bind(this);
|
||||
this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
|
||||
this.getCountFunc = this.getCountFunc.bind(this);
|
||||
this.changeRequestQuery = this.changeRequestQuery.bind(this);
|
||||
this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
|
||||
this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
|
||||
this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
|
||||
this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
|
||||
this.onTagSelect = this.onTagSelect.bind(this);
|
||||
this.onSortSelect = this.onSortSelect.bind(this);
|
||||
this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
|
||||
|
||||
ProfilePageStore.on('load-author-data', this.authorDataLoad);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
ProfilePageActions.load_author_data();
|
||||
}
|
||||
|
||||
authorDataLoad() {
|
||||
const author = ProfilePageStore.get('author-data');
|
||||
|
||||
let requestUrl = this.state.requestUrl;
|
||||
|
||||
if (author) {
|
||||
if (this.state.query) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me' + this.state.filterArgs;
|
||||
}
|
||||
ProfilePageStore.on('load-author-data', this.authorDataLoad);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
author: author,
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
ProfilePageActions.load_author_data();
|
||||
}
|
||||
|
||||
onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
|
||||
this.setState({
|
||||
uploadsPreviewItemsCount: totalAuthorPreviewItems,
|
||||
});
|
||||
}
|
||||
authorDataLoad() {
|
||||
const author = ProfilePageStore.get('author-data');
|
||||
|
||||
getCountFunc(count) {
|
||||
this.setState(
|
||||
{
|
||||
channelMediaCount: count,
|
||||
},
|
||||
() => {
|
||||
if (this.state.query) {
|
||||
let title = '';
|
||||
let requestUrl = this.state.requestUrl;
|
||||
|
||||
if (!count) {
|
||||
title = 'No results for "' + this.state.query + '"';
|
||||
} else if (1 === count) {
|
||||
title = '1 result for "' + this.state.query + '"';
|
||||
} else {
|
||||
title = count + ' results for "' + this.state.query + '"';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
title: title,
|
||||
});
|
||||
if (author) {
|
||||
if (this.state.query) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
author.id +
|
||||
'&show=shared_with_me&q=' +
|
||||
encodeURIComponent(this.state.query) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
author.id +
|
||||
'&show=shared_with_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
changeRequestQuery(newQuery) {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
this.setState({
|
||||
author: author,
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (newQuery) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
|
||||
onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
|
||||
this.setState({
|
||||
uploadsPreviewItemsCount: totalAuthorPreviewItems,
|
||||
});
|
||||
}
|
||||
|
||||
let title = this.state.title;
|
||||
getCountFunc(count) {
|
||||
this.setState(
|
||||
{
|
||||
channelMediaCount: count,
|
||||
},
|
||||
() => {
|
||||
if (this.state.query) {
|
||||
let title = '';
|
||||
|
||||
if ('' === newQuery) {
|
||||
title = this.props.title;
|
||||
if (!count) {
|
||||
title = 'No results for "' + this.state.query + '"';
|
||||
} else if (1 === count) {
|
||||
title = '1 result for "' + this.state.query + '"';
|
||||
} else {
|
||||
title = count + ' results for "' + this.state.query + '"';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
query: newQuery,
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleFiltersClick() {
|
||||
this.setState({
|
||||
hiddenFilters: !this.state.hiddenFilters,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleTagsClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: !this.state.hiddenTags,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
onToggleSortingClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: !this.state.hiddenSorting,
|
||||
});
|
||||
}
|
||||
|
||||
onTagSelect(tag) {
|
||||
this.setState({ selectedTag: tag }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: this.state.selectedSort,
|
||||
tag: tag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onSortSelect(sortBy) {
|
||||
this.setState({ selectedSort: sortBy }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: sortBy,
|
||||
tag: this.state.selectedTag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onFiltersUpdate(updatedArgs) {
|
||||
const args = {
|
||||
media_type: null,
|
||||
upload_date: null,
|
||||
duration: null,
|
||||
publish_state: null,
|
||||
sort_by: null,
|
||||
ordering: null,
|
||||
t: null,
|
||||
};
|
||||
|
||||
switch (updatedArgs.media_type) {
|
||||
case 'video':
|
||||
case 'audio':
|
||||
case 'image':
|
||||
case 'pdf':
|
||||
args.media_type = updatedArgs.media_type;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (updatedArgs.upload_date) {
|
||||
case 'today':
|
||||
case 'this_week':
|
||||
case 'this_month':
|
||||
case 'this_year':
|
||||
args.upload_date = updatedArgs.upload_date;
|
||||
break;
|
||||
}
|
||||
|
||||
// Handle duration filter
|
||||
if (updatedArgs.duration && updatedArgs.duration !== 'all') {
|
||||
args.duration = updatedArgs.duration;
|
||||
}
|
||||
|
||||
// Handle publish state filter
|
||||
if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
|
||||
args.publish_state = updatedArgs.publish_state;
|
||||
}
|
||||
|
||||
switch (updatedArgs.sort_by) {
|
||||
case 'date_added_desc':
|
||||
// Default sorting, no need to add parameters
|
||||
break;
|
||||
case 'date_added_asc':
|
||||
args.ordering = 'asc';
|
||||
break;
|
||||
case 'alphabetically_asc':
|
||||
args.sort_by = 'title_asc';
|
||||
break;
|
||||
case 'alphabetically_desc':
|
||||
args.sort_by = 'title_desc';
|
||||
break;
|
||||
case 'plays_least':
|
||||
args.sort_by = 'views_asc';
|
||||
break;
|
||||
case 'plays_most':
|
||||
args.sort_by = 'views_desc';
|
||||
break;
|
||||
case 'likes_least':
|
||||
args.sort_by = 'likes_asc';
|
||||
break;
|
||||
case 'likes_most':
|
||||
args.sort_by = 'likes_desc';
|
||||
break;
|
||||
}
|
||||
|
||||
if (updatedArgs.tag && updatedArgs.tag !== 'all') {
|
||||
args.t = updatedArgs.tag;
|
||||
}
|
||||
|
||||
const newArgs = [];
|
||||
|
||||
for (let arg in args) {
|
||||
if (null !== args[arg]) {
|
||||
newArgs.push(arg + '=' + args[arg]);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
|
||||
},
|
||||
function () {
|
||||
changeRequestQuery(newQuery) {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (this.state.query) {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
|
||||
if (newQuery) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_with_me&q=' +
|
||||
encodeURIComponent(newQuery) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_with_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
|
||||
let title = this.state.title;
|
||||
|
||||
if ('' === newQuery) {
|
||||
title = this.props.title;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
requestUrl: requestUrl,
|
||||
query: newQuery,
|
||||
title: title,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onResponseDataLoaded(responseData) {
|
||||
if (responseData && responseData.tags) {
|
||||
const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
|
||||
this.setState({ availableTags: tags });
|
||||
}
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const authorData = ProfilePageStore.get('author-data');
|
||||
onToggleFiltersClick() {
|
||||
this.setState({
|
||||
hiddenFilters: !this.state.hiddenFilters,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
|
||||
onToggleTagsClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: !this.state.hiddenTags,
|
||||
hiddenSorting: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Check if any filters are active
|
||||
const hasActiveFilters = this.state.filterArgs && (
|
||||
this.state.filterArgs.includes('media_type=') ||
|
||||
this.state.filterArgs.includes('upload_date=') ||
|
||||
this.state.filterArgs.includes('duration=') ||
|
||||
this.state.filterArgs.includes('publish_state=')
|
||||
);
|
||||
onToggleSortingClick() {
|
||||
this.setState({
|
||||
hiddenFilters: true,
|
||||
hiddenTags: true,
|
||||
hiddenSorting: !this.state.hiddenSorting,
|
||||
});
|
||||
}
|
||||
|
||||
return [
|
||||
this.state.author ? (
|
||||
<ProfilePagesHeader
|
||||
key="ProfilePagesHeader"
|
||||
author={this.state.author}
|
||||
type="shared_with_me"
|
||||
onQueryChange={this.changeRequestQuery}
|
||||
onToggleFiltersClick={this.onToggleFiltersClick}
|
||||
onToggleTagsClick={this.onToggleTagsClick}
|
||||
onToggleSortingClick={this.onToggleSortingClick}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
hasActiveTags={this.state.selectedTag !== 'all'}
|
||||
hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
|
||||
/>
|
||||
) : null,
|
||||
this.state.author ? (
|
||||
<ProfilePagesContent key="ProfilePagesContent">
|
||||
<MediaListWrapper
|
||||
title={this.state.title}
|
||||
className="items-list-ver"
|
||||
>
|
||||
<ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
|
||||
<ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
|
||||
<ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
|
||||
<LazyLoadItemListAsync
|
||||
key={this.state.requestUrl}
|
||||
requestUrl={this.state.requestUrl}
|
||||
hideAuthor={true}
|
||||
itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
|
||||
hideViews={!PageStore.get('config-media-item').displayViews}
|
||||
hideDate={!PageStore.get('config-media-item').displayPublishDate}
|
||||
canEdit={false}
|
||||
onResponseDataLoaded={this.onResponseDataLoaded}
|
||||
/>
|
||||
{isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
|
||||
<EmptySharedWithMe name={this.state.author.name} />
|
||||
) : null}
|
||||
</MediaListWrapper>
|
||||
</ProfilePagesContent>
|
||||
) : null,
|
||||
];
|
||||
}
|
||||
onTagSelect(tag) {
|
||||
this.setState({ selectedTag: tag }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: this.state.selectedSort,
|
||||
tag: tag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onSortSelect(sortBy) {
|
||||
this.setState({ selectedSort: sortBy }, () => {
|
||||
this.onFiltersUpdate({
|
||||
media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
|
||||
upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
|
||||
duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
|
||||
publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
|
||||
sort_by: sortBy,
|
||||
tag: this.state.selectedTag,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onFiltersUpdate(updatedArgs) {
|
||||
const args = {
|
||||
media_type: null,
|
||||
upload_date: null,
|
||||
duration: null,
|
||||
publish_state: null,
|
||||
sort_by: null,
|
||||
ordering: null,
|
||||
t: null,
|
||||
};
|
||||
|
||||
switch (updatedArgs.media_type) {
|
||||
case 'video':
|
||||
case 'audio':
|
||||
case 'image':
|
||||
case 'pdf':
|
||||
args.media_type = updatedArgs.media_type;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (updatedArgs.upload_date) {
|
||||
case 'today':
|
||||
case 'this_week':
|
||||
case 'this_month':
|
||||
case 'this_year':
|
||||
args.upload_date = updatedArgs.upload_date;
|
||||
break;
|
||||
}
|
||||
|
||||
// Handle duration filter
|
||||
if (updatedArgs.duration && updatedArgs.duration !== 'all') {
|
||||
args.duration = updatedArgs.duration;
|
||||
}
|
||||
|
||||
// Handle publish state filter
|
||||
if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
|
||||
args.publish_state = updatedArgs.publish_state;
|
||||
}
|
||||
|
||||
switch (updatedArgs.sort_by) {
|
||||
case 'date_added_desc':
|
||||
// Default sorting, no need to add parameters
|
||||
break;
|
||||
case 'date_added_asc':
|
||||
args.ordering = 'asc';
|
||||
break;
|
||||
case 'alphabetically_asc':
|
||||
args.sort_by = 'title_asc';
|
||||
break;
|
||||
case 'alphabetically_desc':
|
||||
args.sort_by = 'title_desc';
|
||||
break;
|
||||
case 'plays_least':
|
||||
args.sort_by = 'views_asc';
|
||||
break;
|
||||
case 'plays_most':
|
||||
args.sort_by = 'views_desc';
|
||||
break;
|
||||
case 'likes_least':
|
||||
args.sort_by = 'likes_asc';
|
||||
break;
|
||||
case 'likes_most':
|
||||
args.sort_by = 'likes_desc';
|
||||
break;
|
||||
}
|
||||
|
||||
if (updatedArgs.tag && updatedArgs.tag !== 'all') {
|
||||
args.t = updatedArgs.tag;
|
||||
}
|
||||
|
||||
const newArgs = [];
|
||||
|
||||
for (let arg in args) {
|
||||
if (null !== args[arg]) {
|
||||
newArgs.push(arg + '=' + args[arg]);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
|
||||
},
|
||||
function () {
|
||||
if (!this.state.author) {
|
||||
return;
|
||||
}
|
||||
|
||||
let requestUrl;
|
||||
|
||||
if (this.state.query) {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_with_me&q=' +
|
||||
encodeURIComponent(this.state.query) +
|
||||
this.state.filterArgs;
|
||||
} else {
|
||||
requestUrl =
|
||||
ApiUrlContext._currentValue.media +
|
||||
'?author=' +
|
||||
this.state.author.id +
|
||||
'&show=shared_with_me' +
|
||||
this.state.filterArgs;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
requestUrl: requestUrl,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onResponseDataLoaded(responseData) {
|
||||
if (responseData && responseData.tags) {
|
||||
const tags = responseData.tags
|
||||
.split(',')
|
||||
.map((tag) => tag.trim())
|
||||
.filter((tag) => tag);
|
||||
this.setState({ availableTags: tags });
|
||||
}
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const authorData = ProfilePageStore.get('author-data');
|
||||
|
||||
const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
|
||||
|
||||
// Check if any filters are active
|
||||
const hasActiveFilters =
|
||||
this.state.filterArgs &&
|
||||
(this.state.filterArgs.includes('media_type=') ||
|
||||
this.state.filterArgs.includes('upload_date=') ||
|
||||
this.state.filterArgs.includes('duration=') ||
|
||||
this.state.filterArgs.includes('publish_state='));
|
||||
|
||||
return [
|
||||
this.state.author ? (
|
||||
<ProfilePagesHeader
|
||||
key="ProfilePagesHeader"
|
||||
author={this.state.author}
|
||||
type="shared_with_me"
|
||||
onQueryChange={this.changeRequestQuery}
|
||||
onToggleFiltersClick={this.onToggleFiltersClick}
|
||||
onToggleTagsClick={this.onToggleTagsClick}
|
||||
onToggleSortingClick={this.onToggleSortingClick}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
hasActiveTags={this.state.selectedTag !== 'all'}
|
||||
hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
|
||||
hideChannelBanner={inEmbeddedApp()}
|
||||
/>
|
||||
) : null,
|
||||
this.state.author ? (
|
||||
<ProfilePagesContent key="ProfilePagesContent">
|
||||
<MediaListWrapper title={this.state.title} className="items-list-ver">
|
||||
<ProfileMediaFilters
|
||||
hidden={this.state.hiddenFilters}
|
||||
tags={this.state.availableTags}
|
||||
onFiltersUpdate={this.onFiltersUpdate}
|
||||
/>
|
||||
<ProfileMediaTags
|
||||
hidden={this.state.hiddenTags}
|
||||
tags={this.state.availableTags}
|
||||
onTagSelect={this.onTagSelect}
|
||||
/>
|
||||
<ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
|
||||
<LazyLoadItemListAsync
|
||||
key={this.state.requestUrl}
|
||||
requestUrl={this.state.requestUrl}
|
||||
hideAuthor={true}
|
||||
itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
|
||||
hideViews={!PageStore.get('config-media-item').displayViews}
|
||||
hideDate={!PageStore.get('config-media-item').displayPublishDate}
|
||||
canEdit={false}
|
||||
onResponseDataLoaded={this.onResponseDataLoaded}
|
||||
/>
|
||||
{isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
|
||||
<EmptySharedWithMe name={this.state.author.name} />
|
||||
) : null}
|
||||
</MediaListWrapper>
|
||||
</ProfilePagesContent>
|
||||
) : null,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
ProfileSharedWithMePage.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
ProfileSharedWithMePage.defaultProps = {
|
||||
title: 'Shared with me',
|
||||
title: 'Shared with me',
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { PageStore, MediaPageStore } from '../utils/stores/';
|
||||
import { MediaPageActions } from '../utils/actions/';
|
||||
import { inEmbeddedApp } from '../utils/helpers/';
|
||||
import ViewerError from '../components/media-page/ViewerError';
|
||||
import ViewerInfo from '../components/media-page/ViewerInfo';
|
||||
import ViewerSidebar from '../components/media-page/ViewerSidebar';
|
||||
@@ -10,102 +11,102 @@ import '../components/media-page/MediaPage.scss';
|
||||
const wideLayoutBreakpoint = 1216;
|
||||
|
||||
export class _MediaPage extends Page {
|
||||
constructor(props) {
|
||||
super(props, 'media');
|
||||
constructor(props) {
|
||||
super(props, 'media');
|
||||
|
||||
const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
|
||||
const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
|
||||
|
||||
this.state = {
|
||||
mediaLoaded: false,
|
||||
mediaLoadFailed: false,
|
||||
wideLayout: isWideLayout,
|
||||
infoAndSidebarViewType: !isWideLayout ? 0 : 1,
|
||||
viewerClassname: 'cf viewer-section viewer-wide',
|
||||
viewerNestedClassname: 'viewer-section-nested',
|
||||
pagePlaylistLoaded: false,
|
||||
};
|
||||
this.state = {
|
||||
mediaLoaded: false,
|
||||
mediaLoadFailed: false,
|
||||
wideLayout: isWideLayout,
|
||||
infoAndSidebarViewType: !isWideLayout ? 0 : 1,
|
||||
viewerClassname: 'cf viewer-section viewer-wide',
|
||||
viewerNestedClassname: 'viewer-section-nested',
|
||||
pagePlaylistLoaded: false,
|
||||
};
|
||||
|
||||
this.onWindowResize = this.onWindowResize.bind(this);
|
||||
this.onMediaLoad = this.onMediaLoad.bind(this);
|
||||
this.onMediaLoadError = this.onMediaLoadError.bind(this);
|
||||
this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
|
||||
this.onWindowResize = this.onWindowResize.bind(this);
|
||||
this.onMediaLoad = this.onMediaLoad.bind(this);
|
||||
this.onMediaLoadError = this.onMediaLoadError.bind(this);
|
||||
this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
|
||||
|
||||
MediaPageStore.on('loaded_media_data', this.onMediaLoad);
|
||||
MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
|
||||
MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
|
||||
}
|
||||
MediaPageStore.on('loaded_media_data', this.onMediaLoad);
|
||||
MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
|
||||
MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
MediaPageActions.loadMediaData();
|
||||
// FIXME: Is not neccessary to check on every window dimension for changes...
|
||||
PageStore.on('window_resize', this.onWindowResize);
|
||||
}
|
||||
componentDidMount() {
|
||||
MediaPageActions.loadMediaData();
|
||||
// FIXME: Is not neccessary to check on every window dimension for changes...
|
||||
PageStore.on('window_resize', this.onWindowResize);
|
||||
}
|
||||
|
||||
onPagePlaylistLoad() {
|
||||
this.setState({
|
||||
pagePlaylistLoaded: true,
|
||||
});
|
||||
}
|
||||
onPagePlaylistLoad() {
|
||||
this.setState({
|
||||
pagePlaylistLoaded: true,
|
||||
});
|
||||
}
|
||||
|
||||
onWindowResize() {
|
||||
const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
|
||||
onWindowResize() {
|
||||
const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
|
||||
|
||||
this.setState({
|
||||
wideLayout: isWideLayout,
|
||||
infoAndSidebarViewType: !isWideLayout || (MediaPageStore.isVideo() && this.state.theaterMode) ? 0 : 1,
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
wideLayout: isWideLayout,
|
||||
infoAndSidebarViewType: !isWideLayout || (MediaPageStore.isVideo() && this.state.theaterMode) ? 0 : 1,
|
||||
});
|
||||
}
|
||||
|
||||
onMediaLoad() {
|
||||
this.setState({ mediaLoaded: true });
|
||||
}
|
||||
onMediaLoad() {
|
||||
this.setState({ mediaLoaded: true });
|
||||
}
|
||||
|
||||
onMediaLoadError() {
|
||||
this.setState({ mediaLoadFailed: true });
|
||||
}
|
||||
onMediaLoadError() {
|
||||
this.setState({ mediaLoadFailed: true });
|
||||
}
|
||||
|
||||
viewerContainerContent() {
|
||||
return null;
|
||||
}
|
||||
viewerContainerContent() {
|
||||
return null;
|
||||
}
|
||||
|
||||
mediaType() {
|
||||
return null;
|
||||
}
|
||||
mediaType() {
|
||||
return null;
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
return this.state.mediaLoadFailed ? (
|
||||
<div className={this.state.viewerClassname}>
|
||||
<ViewerError />
|
||||
</div>
|
||||
) : (
|
||||
<div className={this.state.viewerClassname}>
|
||||
<div className="viewer-container" key="viewer-container">
|
||||
{this.state.mediaLoaded ? this.viewerContainerContent() : null}
|
||||
</div>
|
||||
<div key="viewer-section-nested" className={this.state.viewerNestedClassname}>
|
||||
{!this.state.infoAndSidebarViewType
|
||||
? [
|
||||
<ViewerInfo key="viewer-info" />,
|
||||
this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
]
|
||||
: [
|
||||
this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
<ViewerInfo key="viewer-info" />,
|
||||
]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
pageContent() {
|
||||
return this.state.mediaLoadFailed ? (
|
||||
<div className={this.state.viewerClassname}>
|
||||
<ViewerError />
|
||||
</div>
|
||||
) : (
|
||||
<div className={this.state.viewerClassname}>
|
||||
<div className="viewer-container" key="viewer-container">
|
||||
{this.state.mediaLoaded ? this.viewerContainerContent() : null}
|
||||
</div>
|
||||
<div key="viewer-section-nested" className={this.state.viewerNestedClassname}>
|
||||
{!this.state.infoAndSidebarViewType
|
||||
? [
|
||||
<ViewerInfo key="viewer-info" />,
|
||||
!inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
]
|
||||
: [
|
||||
!inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
<ViewerInfo key="viewer-info" />,
|
||||
]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
// FIXME: 'VideoViewerStore' is used only in case of video media, but is included in every media page code.
|
||||
import { PageStore, MediaPageStore, VideoViewerStore } from '../utils/stores/';
|
||||
import { MediaPageActions } from '../utils/actions/';
|
||||
import { inEmbeddedApp } from '../utils/helpers/';
|
||||
import ViewerInfoVideo from '../components/media-page/ViewerInfoVideo';
|
||||
import ViewerError from '../components/media-page/ViewerError';
|
||||
import ViewerSidebar from '../components/media-page/ViewerSidebar';
|
||||
@@ -11,118 +12,119 @@ import _MediaPage from './_MediaPage';
|
||||
const wideLayoutBreakpoint = 1216;
|
||||
|
||||
export class _VideoMediaPage extends Page {
|
||||
constructor(props) {
|
||||
super(props, 'media');
|
||||
constructor(props) {
|
||||
super(props, 'media');
|
||||
|
||||
this.state = {
|
||||
wideLayout: wideLayoutBreakpoint <= window.innerWidth,
|
||||
mediaLoaded: false,
|
||||
mediaLoadFailed: false,
|
||||
isVideoMedia: false,
|
||||
theaterMode: false, // FIXME: Used only in case of video media, but is included in every media page code.
|
||||
pagePlaylistLoaded: false,
|
||||
pagePlaylistData: MediaPageStore.get('playlist-data'),
|
||||
};
|
||||
this.state = {
|
||||
wideLayout: wideLayoutBreakpoint <= window.innerWidth,
|
||||
mediaLoaded: false,
|
||||
mediaLoadFailed: false,
|
||||
isVideoMedia: false,
|
||||
theaterMode: false, // FIXME: Used only in case of video media, but is included in every media page code.
|
||||
pagePlaylistLoaded: false,
|
||||
pagePlaylistData: MediaPageStore.get('playlist-data'),
|
||||
};
|
||||
|
||||
this.onWindowResize = this.onWindowResize.bind(this);
|
||||
this.onMediaLoad = this.onMediaLoad.bind(this);
|
||||
this.onMediaLoadError = this.onMediaLoadError.bind(this);
|
||||
this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
|
||||
this.onWindowResize = this.onWindowResize.bind(this);
|
||||
this.onMediaLoad = this.onMediaLoad.bind(this);
|
||||
this.onMediaLoadError = this.onMediaLoadError.bind(this);
|
||||
this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
|
||||
|
||||
MediaPageStore.on('loaded_media_data', this.onMediaLoad);
|
||||
MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
|
||||
MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
MediaPageActions.loadMediaData();
|
||||
// FIXME: Is not neccessary to check on every window dimension for changes...
|
||||
PageStore.on('window_resize', this.onWindowResize);
|
||||
}
|
||||
|
||||
onWindowResize() {
|
||||
this.setState({
|
||||
wideLayout: wideLayoutBreakpoint <= window.innerWidth,
|
||||
});
|
||||
}
|
||||
|
||||
onPagePlaylistLoad() {
|
||||
this.setState({
|
||||
pagePlaylistLoaded: true,
|
||||
pagePlaylistData: MediaPageStore.get('playlist-data'),
|
||||
});
|
||||
}
|
||||
|
||||
onMediaLoad() {
|
||||
const isVideoMedia = 'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');
|
||||
|
||||
if (isVideoMedia) {
|
||||
this.onViewerModeChange = this.onViewerModeChange.bind(this);
|
||||
|
||||
VideoViewerStore.on('changed_viewer_mode', this.onViewerModeChange);
|
||||
|
||||
this.setState({
|
||||
mediaLoaded: true,
|
||||
isVideoMedia: isVideoMedia,
|
||||
theaterMode: VideoViewerStore.get('in-theater-mode'),
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
mediaLoaded: true,
|
||||
isVideoMedia: isVideoMedia,
|
||||
});
|
||||
MediaPageStore.on('loaded_media_data', this.onMediaLoad);
|
||||
MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
|
||||
MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
|
||||
}
|
||||
}
|
||||
|
||||
onViewerModeChange() {
|
||||
this.setState({ theaterMode: VideoViewerStore.get('in-theater-mode') });
|
||||
}
|
||||
componentDidMount() {
|
||||
MediaPageActions.loadMediaData();
|
||||
// FIXME: Is not neccessary to check on every window dimension for changes...
|
||||
PageStore.on('window_resize', this.onWindowResize);
|
||||
}
|
||||
|
||||
onMediaLoadError(a) {
|
||||
this.setState({ mediaLoadFailed: true });
|
||||
}
|
||||
onWindowResize() {
|
||||
this.setState({
|
||||
wideLayout: wideLayoutBreakpoint <= window.innerWidth,
|
||||
});
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const viewerClassname = 'cf viewer-section' + (this.state.theaterMode ? ' theater-mode' : ' viewer-wide');
|
||||
const viewerNestedClassname = 'viewer-section-nested' + (this.state.theaterMode ? ' viewer-section' : '');
|
||||
onPagePlaylistLoad() {
|
||||
this.setState({
|
||||
pagePlaylistLoaded: true,
|
||||
pagePlaylistData: MediaPageStore.get('playlist-data'),
|
||||
});
|
||||
}
|
||||
|
||||
return this.state.mediaLoadFailed ? (
|
||||
<div className={viewerClassname}>
|
||||
<ViewerError />
|
||||
</div>
|
||||
) : (
|
||||
<div className={viewerClassname}>
|
||||
{[
|
||||
<div className="viewer-container" key="viewer-container">
|
||||
{this.state.mediaLoaded && this.state.pagePlaylistLoaded
|
||||
? this.viewerContainerContent(MediaPageStore.get('media-data'))
|
||||
: null}
|
||||
</div>,
|
||||
<div key="viewer-section-nested" className={viewerNestedClassname}>
|
||||
{!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
|
||||
? [
|
||||
<ViewerInfoVideo key="viewer-info" />,
|
||||
this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
]
|
||||
: [
|
||||
this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
<ViewerInfoVideo key="viewer-info" />,
|
||||
onMediaLoad() {
|
||||
const isVideoMedia =
|
||||
'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');
|
||||
|
||||
if (isVideoMedia) {
|
||||
this.onViewerModeChange = this.onViewerModeChange.bind(this);
|
||||
|
||||
VideoViewerStore.on('changed_viewer_mode', this.onViewerModeChange);
|
||||
|
||||
this.setState({
|
||||
mediaLoaded: true,
|
||||
isVideoMedia: isVideoMedia,
|
||||
theaterMode: VideoViewerStore.get('in-theater-mode'),
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
mediaLoaded: true,
|
||||
isVideoMedia: isVideoMedia,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onViewerModeChange() {
|
||||
this.setState({ theaterMode: VideoViewerStore.get('in-theater-mode') });
|
||||
}
|
||||
|
||||
onMediaLoadError(a) {
|
||||
this.setState({ mediaLoadFailed: true });
|
||||
}
|
||||
|
||||
pageContent() {
|
||||
const viewerClassname = 'cf viewer-section' + (this.state.theaterMode ? ' theater-mode' : ' viewer-wide');
|
||||
const viewerNestedClassname = 'viewer-section-nested' + (this.state.theaterMode ? ' viewer-section' : '');
|
||||
|
||||
return this.state.mediaLoadFailed ? (
|
||||
<div className={viewerClassname}>
|
||||
<ViewerError />
|
||||
</div>
|
||||
) : (
|
||||
<div className={viewerClassname}>
|
||||
{[
|
||||
<div className="viewer-container" key="viewer-container">
|
||||
{this.state.mediaLoaded && this.state.pagePlaylistLoaded
|
||||
? this.viewerContainerContent(MediaPageStore.get('media-data'))
|
||||
: null}
|
||||
</div>,
|
||||
<div key="viewer-section-nested" className={viewerNestedClassname}>
|
||||
{!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
|
||||
? [
|
||||
<ViewerInfoVideo key="viewer-info" />,
|
||||
!inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
]
|
||||
: [
|
||||
!inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
|
||||
<ViewerSidebar
|
||||
key="viewer-sidebar"
|
||||
mediaId={MediaPageStore.get('media-id')}
|
||||
playlistData={MediaPageStore.get('playlist-data')}
|
||||
/>
|
||||
) : null,
|
||||
<ViewerInfoVideo key="viewer-info" />,
|
||||
]}
|
||||
</div>,
|
||||
]}
|
||||
</div>,
|
||||
]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,101 +1,103 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
|
||||
import { BrowserCache } from '../classes/';
|
||||
import { PageStore } from '../stores/';
|
||||
import { addClassname, removeClassname } from '../helpers/';
|
||||
import { addClassname, removeClassname, inEmbeddedApp } from '../helpers/';
|
||||
import SiteContext from './SiteContext';
|
||||
|
||||
let slidingSidebarTimeout;
|
||||
|
||||
function onSidebarVisibilityChange(visibleSidebar) {
|
||||
clearTimeout(slidingSidebarTimeout);
|
||||
clearTimeout(slidingSidebarTimeout);
|
||||
|
||||
addClassname(document.body, 'sliding-sidebar');
|
||||
|
||||
slidingSidebarTimeout = setTimeout(function () {
|
||||
if ('media' === PageStore.get('current-page')) {
|
||||
if (visibleSidebar) {
|
||||
addClassname(document.body, 'overflow-hidden');
|
||||
} else {
|
||||
removeClassname(document.body, 'overflow-hidden');
|
||||
}
|
||||
} else {
|
||||
if (!visibleSidebar || 767 < window.innerWidth) {
|
||||
removeClassname(document.body, 'overflow-hidden');
|
||||
} else {
|
||||
addClassname(document.body, 'overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleSidebar) {
|
||||
addClassname(document.body, 'visible-sidebar');
|
||||
} else {
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
addClassname(document.body, 'sliding-sidebar');
|
||||
|
||||
slidingSidebarTimeout = setTimeout(function () {
|
||||
slidingSidebarTimeout = null;
|
||||
removeClassname(document.body, 'sliding-sidebar');
|
||||
}, 220);
|
||||
}, 20);
|
||||
if ('media' === PageStore.get('current-page')) {
|
||||
if (visibleSidebar) {
|
||||
addClassname(document.body, 'overflow-hidden');
|
||||
} else {
|
||||
removeClassname(document.body, 'overflow-hidden');
|
||||
}
|
||||
} else {
|
||||
if (!visibleSidebar || 767 < window.innerWidth) {
|
||||
removeClassname(document.body, 'overflow-hidden');
|
||||
} else {
|
||||
addClassname(document.body, 'overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleSidebar) {
|
||||
addClassname(document.body, 'visible-sidebar');
|
||||
} else {
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
|
||||
slidingSidebarTimeout = setTimeout(function () {
|
||||
slidingSidebarTimeout = null;
|
||||
removeClassname(document.body, 'sliding-sidebar');
|
||||
}, 220);
|
||||
}, 20);
|
||||
}
|
||||
|
||||
export const LayoutContext = createContext();
|
||||
|
||||
export const LayoutProvider = ({ children }) => {
|
||||
const site = useContext(SiteContext);
|
||||
const cache = new BrowserCache('MediaCMS[' + site.id + '][layout]', 86400);
|
||||
const site = useContext(SiteContext);
|
||||
const cache = new BrowserCache('MediaCMS[' + site.id + '][layout]', 86400);
|
||||
|
||||
const enabledSidebar = !!(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));
|
||||
const isMediaPage = useMemo(() => PageStore.get('current-page') === 'media', []);
|
||||
const isEmbeddedApp = useMemo(() => inEmbeddedApp(), []);
|
||||
|
||||
const [visibleSidebar, setVisibleSidebar] = useState(cache.get('visible-sidebar'));
|
||||
const [visibleMobileSearch, setVisibleMobileSearch] = useState(false);
|
||||
const enabledSidebar = Boolean(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));
|
||||
|
||||
const toggleMobileSearch = () => {
|
||||
setVisibleMobileSearch(!visibleMobileSearch);
|
||||
};
|
||||
const [visibleSidebar, setVisibleSidebar] = useState(cache.get('visible-sidebar'));
|
||||
const [visibleMobileSearch, setVisibleMobileSearch] = useState(false);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const newval = !visibleSidebar;
|
||||
onSidebarVisibilityChange(newval);
|
||||
setVisibleSidebar(newval);
|
||||
};
|
||||
const toggleMobileSearch = () => {
|
||||
setVisibleMobileSearch(!visibleMobileSearch);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (visibleSidebar) {
|
||||
addClassname(document.body, 'visible-sidebar');
|
||||
} else {
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
if ('media' !== PageStore.get('current-page') && 1023 < window.innerWidth) {
|
||||
cache.set('visible-sidebar', visibleSidebar);
|
||||
}
|
||||
}, [visibleSidebar]);
|
||||
const toggleSidebar = () => {
|
||||
const newval = !visibleSidebar;
|
||||
onSidebarVisibilityChange(newval);
|
||||
setVisibleSidebar(newval);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
PageStore.once('page_init', () => {
|
||||
if ('media' === PageStore.get('current-page')) {
|
||||
setVisibleSidebar(false);
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!isEmbeddedApp && visibleSidebar) {
|
||||
addClassname(document.body, 'visible-sidebar');
|
||||
} else {
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
|
||||
setVisibleSidebar(
|
||||
'media' !== PageStore.get('current-page') &&
|
||||
1023 < window.innerWidth &&
|
||||
(null === visibleSidebar || visibleSidebar)
|
||||
);
|
||||
}, []);
|
||||
if (!isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth) {
|
||||
cache.set('visible-sidebar', visibleSidebar);
|
||||
}
|
||||
}, [isEmbeddedApp, isMediaPage, visibleSidebar]);
|
||||
|
||||
const value = {
|
||||
enabledSidebar,
|
||||
visibleSidebar,
|
||||
setVisibleSidebar,
|
||||
visibleMobileSearch,
|
||||
toggleMobileSearch,
|
||||
toggleSidebar,
|
||||
};
|
||||
useEffect(() => {
|
||||
PageStore.once('page_init', () => {
|
||||
if (isEmbeddedApp || isMediaPage) {
|
||||
setVisibleSidebar(false);
|
||||
removeClassname(document.body, 'visible-sidebar');
|
||||
}
|
||||
});
|
||||
|
||||
return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
|
||||
setVisibleSidebar(
|
||||
!isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth && (null === visibleSidebar || visibleSidebar)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const value = {
|
||||
enabledSidebar,
|
||||
visibleSidebar,
|
||||
setVisibleSidebar,
|
||||
visibleMobileSearch,
|
||||
toggleMobileSearch,
|
||||
toggleSidebar,
|
||||
};
|
||||
|
||||
return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
|
||||
};
|
||||
|
||||
export const LayoutConsumer = LayoutContext.Consumer;
|
||||
|
||||
4
frontend/src/static/js/utils/helpers/embeddedApp.ts
Normal file
4
frontend/src/static/js/utils/helpers/embeddedApp.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export function inEmbeddedApp() {
|
||||
const url = new URL(globalThis.location.href);
|
||||
return url.searchParams.get('mode') === 'embed_mode';
|
||||
}
|
||||
@@ -14,3 +14,4 @@ export * from './quickSort';
|
||||
export * from './requests';
|
||||
export { translateString } from './translate';
|
||||
export { replaceString } from './replacementStrings';
|
||||
export * from './embeddedApp';
|
||||
|
||||
@@ -3,64 +3,82 @@ import ReactDOM from 'react-dom';
|
||||
import { ThemeProvider } from './contexts/ThemeContext';
|
||||
import { LayoutProvider } from './contexts/LayoutContext';
|
||||
import { UserProvider } from './contexts/UserContext';
|
||||
import { inEmbeddedApp } from './helpers';
|
||||
|
||||
const AppProviders = ({ children }) => (
|
||||
<LayoutProvider>
|
||||
<ThemeProvider>
|
||||
<UserProvider>{children}</UserProvider>
|
||||
</ThemeProvider>
|
||||
</LayoutProvider>
|
||||
<LayoutProvider>
|
||||
<ThemeProvider>
|
||||
<UserProvider>{children}</UserProvider>
|
||||
</ThemeProvider>
|
||||
</LayoutProvider>
|
||||
);
|
||||
|
||||
import { PageHeader, PageSidebar } from '../components/page-layout';
|
||||
|
||||
export function renderPage(idSelector, PageComponent) {
|
||||
const appHeader = document.getElementById('app-header');
|
||||
const appSidebar = document.getElementById('app-sidebar');
|
||||
const appContent = idSelector ? document.getElementById(idSelector) : undefined;
|
||||
const appContent = idSelector ? document.getElementById(idSelector) : undefined;
|
||||
|
||||
if (appContent && PageComponent) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
{appHeader ? ReactDOM.createPortal(<PageHeader />, appHeader) : null}
|
||||
{appSidebar ? ReactDOM.createPortal(<PageSidebar />, appSidebar) : null}
|
||||
<PageComponent />
|
||||
</AppProviders>,
|
||||
appContent
|
||||
);
|
||||
} else if (appHeader && appSidebar) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
{ReactDOM.createPortal(<PageHeader />, appHeader)}
|
||||
<PageSidebar />
|
||||
</AppProviders>,
|
||||
appSidebar
|
||||
);
|
||||
} else if (appHeader) {
|
||||
ReactDOM.render(
|
||||
<LayoutProvider>
|
||||
<ThemeProvider>
|
||||
<UserProvider>
|
||||
<PageHeader />
|
||||
</UserProvider>
|
||||
</ThemeProvider>
|
||||
</LayoutProvider>,
|
||||
appSidebar
|
||||
);
|
||||
} else if (appSidebar) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
<PageSidebar />
|
||||
</AppProviders>,
|
||||
appSidebar
|
||||
);
|
||||
}
|
||||
if (inEmbeddedApp() && appContent) {
|
||||
globalThis.document.body.classList.add('embedded-app');
|
||||
globalThis.document.body.classList.remove('visible-sidebar');
|
||||
|
||||
if (PageComponent) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
<PageComponent />
|
||||
</AppProviders>,
|
||||
appContent
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const appHeader = document.getElementById('app-header');
|
||||
const appSidebar = document.getElementById('app-sidebar');
|
||||
|
||||
if (appContent && PageComponent) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
{appHeader ? ReactDOM.createPortal(<PageHeader />, appHeader) : null}
|
||||
{appSidebar ? ReactDOM.createPortal(<PageSidebar />, appSidebar) : null}
|
||||
<PageComponent />
|
||||
</AppProviders>,
|
||||
appContent
|
||||
);
|
||||
} else if (appHeader && appSidebar) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
{ReactDOM.createPortal(<PageHeader />, appHeader)}
|
||||
<PageSidebar />
|
||||
</AppProviders>,
|
||||
appSidebar
|
||||
);
|
||||
} else if (appHeader) {
|
||||
ReactDOM.render(
|
||||
<LayoutProvider>
|
||||
<ThemeProvider>
|
||||
<UserProvider>
|
||||
<PageHeader />
|
||||
</UserProvider>
|
||||
</ThemeProvider>
|
||||
</LayoutProvider>,
|
||||
appSidebar
|
||||
);
|
||||
} else if (appSidebar) {
|
||||
ReactDOM.render(
|
||||
<AppProviders>
|
||||
<PageSidebar />
|
||||
</AppProviders>,
|
||||
appSidebar
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function renderEmbedPage(idSelector, PageComponent) {
|
||||
const appContent = idSelector ? document.getElementById(idSelector) : undefined;
|
||||
const appContent = idSelector ? document.getElementById(idSelector) : undefined;
|
||||
|
||||
if (appContent && PageComponent) {
|
||||
ReactDOM.render(<PageComponent />, appContent);
|
||||
}
|
||||
if (appContent && PageComponent) {
|
||||
ReactDOM.render(<PageComponent />, appContent);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user