mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-01-20 07:12:58 -05:00
updates in ViewerInfoVideoTitleBanner component
This commit is contained in:
Yiannis
@@ -1,107 +1,119 @@
|
||||
import React from 'react';
|
||||
import { formatViewsNumber } from '../../utils/helpers/';
|
||||
import { formatViewsNumber, inEmbeddedApp } from '../../utils/helpers/';
|
||||
import { PageStore, MediaPageStore } from '../../utils/stores/';
|
||||
import { MemberContext, PlaylistsContext } from '../../utils/contexts/';
|
||||
import { MediaLikeIcon, MediaDislikeIcon, OtherMediaDownloadLink, VideoMediaDownloadLink, MediaSaveButton, MediaShareButton, MediaMoreOptionsIcon } from '../media-actions/';
|
||||
import {
|
||||
MediaLikeIcon,
|
||||
MediaDislikeIcon,
|
||||
OtherMediaDownloadLink,
|
||||
VideoMediaDownloadLink,
|
||||
MediaSaveButton,
|
||||
MediaShareButton,
|
||||
MediaMoreOptionsIcon,
|
||||
} from '../media-actions/';
|
||||
import ViewerInfoTitleBanner from './ViewerInfoTitleBanner';
|
||||
import { translateString } from '../../utils/helpers/';
|
||||
|
||||
export default class ViewerInfoVideoTitleBanner extends ViewerInfoTitleBanner {
|
||||
render() {
|
||||
const displayViews = PageStore.get('config-options').pages.media.displayViews && void 0 !== this.props.views;
|
||||
render() {
|
||||
const displayViews = PageStore.get('config-options').pages.media.displayViews && void 0 !== this.props.views;
|
||||
|
||||
const mediaData = MediaPageStore.get('media-data');
|
||||
const mediaState = mediaData.state;
|
||||
const isShared = mediaData.is_shared;
|
||||
const mediaData = MediaPageStore.get('media-data');
|
||||
const mediaState = mediaData.state;
|
||||
const isShared = mediaData.is_shared;
|
||||
|
||||
let stateTooltip = '';
|
||||
let stateTooltip = '';
|
||||
|
||||
switch (mediaState) {
|
||||
case 'private':
|
||||
stateTooltip = 'The site admins have to make its access public';
|
||||
break;
|
||||
case 'unlisted':
|
||||
stateTooltip = 'The site admins have to make it appear on listings';
|
||||
break;
|
||||
switch (mediaState) {
|
||||
case 'private':
|
||||
stateTooltip = 'The site admins have to make its access public';
|
||||
break;
|
||||
case 'unlisted':
|
||||
stateTooltip = 'The site admins have to make it appear on listings';
|
||||
break;
|
||||
}
|
||||
|
||||
const sharedTooltip = 'This media is shared with specific users or categories';
|
||||
|
||||
return (
|
||||
<div className="media-title-banner">
|
||||
{displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? this.mediaCategories(true)
|
||||
: null}
|
||||
|
||||
{void 0 !== this.props.title ? <h1>{this.props.title}</h1> : null}
|
||||
|
||||
{isShared || 'public' !== mediaState ? (
|
||||
<div className="media-labels-area">
|
||||
<div className="media-labels-area-inner">
|
||||
{isShared ? (
|
||||
<>
|
||||
<span className="media-label-state">
|
||||
<span>shared</span>
|
||||
</span>
|
||||
<span className="helper-icon" data-tooltip={sharedTooltip}>
|
||||
<i className="material-icons">help_outline</i>
|
||||
</span>
|
||||
</>
|
||||
) : 'public' !== mediaState ? (
|
||||
<>
|
||||
<span className="media-label-state">
|
||||
<span>{mediaState}</span>
|
||||
</span>
|
||||
<span className="helper-icon" data-tooltip={stateTooltip}>
|
||||
<i className="material-icons">help_outline</i>
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={
|
||||
'media-views-actions' +
|
||||
(this.state.likedMedia ? ' liked-media' : '') +
|
||||
(this.state.dislikedMedia ? ' disliked-media' : '')
|
||||
}
|
||||
>
|
||||
{!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? this.mediaCategories()
|
||||
: null}
|
||||
|
||||
{displayViews ? (
|
||||
<div className="media-views">
|
||||
{formatViewsNumber(this.props.views, true)}{' '}
|
||||
{1 >= this.props.views ? translateString('view') : translateString('views')}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="media-actions">
|
||||
<div>
|
||||
{MemberContext._currentValue.can.likeMedia ? <MediaLikeIcon /> : null}
|
||||
{MemberContext._currentValue.can.dislikeMedia ? <MediaDislikeIcon /> : null}
|
||||
{!inEmbeddedApp() && MemberContext._currentValue.can.shareMedia ? (
|
||||
<MediaShareButton isVideo={true} />
|
||||
) : null}
|
||||
|
||||
{!inEmbeddedApp() &&
|
||||
!MemberContext._currentValue.is.anonymous &&
|
||||
MemberContext._currentValue.can.saveMedia &&
|
||||
-1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? (
|
||||
<MediaSaveButton />
|
||||
) : null}
|
||||
|
||||
{!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this
|
||||
.downloadLink ? (
|
||||
<VideoMediaDownloadLink />
|
||||
) : (
|
||||
<OtherMediaDownloadLink link={this.downloadLink} title={this.downloadFilename} />
|
||||
)}
|
||||
|
||||
<MediaMoreOptionsIcon allowDownload={this.props.allowDownload} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sharedTooltip = 'This media is shared with specific users or categories';
|
||||
|
||||
return (
|
||||
<div className="media-title-banner">
|
||||
{displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? this.mediaCategories(true)
|
||||
: null}
|
||||
|
||||
{void 0 !== this.props.title ? <h1>{this.props.title}</h1> : null}
|
||||
|
||||
{isShared || 'public' !== mediaState ? (
|
||||
<div className="media-labels-area">
|
||||
<div className="media-labels-area-inner">
|
||||
{isShared ? (
|
||||
<>
|
||||
<span className="media-label-state">
|
||||
<span>shared</span>
|
||||
</span>
|
||||
<span className="helper-icon" data-tooltip={sharedTooltip}>
|
||||
<i className="material-icons">help_outline</i>
|
||||
</span>
|
||||
</>
|
||||
) : 'public' !== mediaState ? (
|
||||
<>
|
||||
<span className="media-label-state">
|
||||
<span>{mediaState}</span>
|
||||
</span>
|
||||
<span className="helper-icon" data-tooltip={stateTooltip}>
|
||||
<i className="material-icons">help_outline</i>
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={
|
||||
'media-views-actions' +
|
||||
(this.state.likedMedia ? ' liked-media' : '') +
|
||||
(this.state.dislikedMedia ? ' disliked-media' : '')
|
||||
}
|
||||
>
|
||||
{!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
|
||||
? this.mediaCategories()
|
||||
: null}
|
||||
|
||||
{displayViews ? (
|
||||
<div className="media-views">
|
||||
{formatViewsNumber(this.props.views, true)} {1 >= this.props.views ? translateString('view') : translateString('views')}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="media-actions">
|
||||
<div>
|
||||
{MemberContext._currentValue.can.likeMedia ? <MediaLikeIcon /> : null}
|
||||
{MemberContext._currentValue.can.dislikeMedia ? <MediaDislikeIcon /> : null}
|
||||
{MemberContext._currentValue.can.shareMedia ? <MediaShareButton isVideo={true} /> : null}
|
||||
|
||||
{!MemberContext._currentValue.is.anonymous &&
|
||||
MemberContext._currentValue.can.saveMedia &&
|
||||
-1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? (
|
||||
<MediaSaveButton />
|
||||
) : null}
|
||||
|
||||
{!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this
|
||||
.downloadLink ? (
|
||||
<VideoMediaDownloadLink />
|
||||
) : (
|
||||
<OtherMediaDownloadLink link={this.downloadLink} title={this.downloadFilename} />
|
||||
)}
|
||||
|
||||
<MediaMoreOptionsIcon allowDownload={this.props.allowDownload} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user