diff --git a/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js b/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js index 1ea3d8e6..6863a78b 100644 --- a/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js +++ b/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js @@ -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 ( +
+ {displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle + ? this.mediaCategories(true) + : null} + + {void 0 !== this.props.title ?

{this.props.title}

: null} + + {isShared || 'public' !== mediaState ? ( +
+
+ {isShared ? ( + <> + + shared + + + help_outline + + + ) : 'public' !== mediaState ? ( + <> + + {mediaState} + + + help_outline + + + ) : null} +
+
+ ) : null} + +
+ {!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle + ? this.mediaCategories() + : null} + + {displayViews ? ( +
+ {formatViewsNumber(this.props.views, true)}{' '} + {1 >= this.props.views ? translateString('view') : translateString('views')} +
+ ) : null} + +
+
+ {MemberContext._currentValue.can.likeMedia ? : null} + {MemberContext._currentValue.can.dislikeMedia ? : null} + {!inEmbeddedApp() && MemberContext._currentValue.can.shareMedia ? ( + + ) : null} + + {!inEmbeddedApp() && + !MemberContext._currentValue.is.anonymous && + MemberContext._currentValue.can.saveMedia && + -1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? ( + + ) : null} + + {!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this + .downloadLink ? ( + + ) : ( + + )} + + +
+
+
+
+ ); } - - const sharedTooltip = 'This media is shared with specific users or categories'; - - return ( -
- {displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle - ? this.mediaCategories(true) - : null} - - {void 0 !== this.props.title ?

{this.props.title}

: null} - - {isShared || 'public' !== mediaState ? ( -
-
- {isShared ? ( - <> - - shared - - - help_outline - - - ) : 'public' !== mediaState ? ( - <> - - {mediaState} - - - help_outline - - - ) : null} -
-
- ) : null} - -
- {!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle - ? this.mediaCategories() - : null} - - {displayViews ? ( -
- {formatViewsNumber(this.props.views, true)} {1 >= this.props.views ? translateString('view') : translateString('views')} -
- ) : null} - -
-
- {MemberContext._currentValue.can.likeMedia ? : null} - {MemberContext._currentValue.can.dislikeMedia ? : null} - {MemberContext._currentValue.can.shareMedia ? : null} - - {!MemberContext._currentValue.is.anonymous && - MemberContext._currentValue.can.saveMedia && - -1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? ( - - ) : null} - - {!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this - .downloadLink ? ( - - ) : ( - - )} - - -
-
-
-
- ); - } }