labo-components/app/components/resourceviewer/ViewerHeader.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil'; // for generating unique CSS classnames for this component
import ToolHeader from '../shared/ToolHeader';

import trunc from '../../util/Trunc';
import IconUtil from '../../util/IconUtil';

import Paging from './Paging';
import FlexRouter from '../../util/FlexRouter';

/*
	This component show the static metadata and content annotations
*/

export default class ViewerHeader extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    // Tool header
    renderToolHeader = (name, activeProject, userProjects, user, onOutput) => (
        <ToolHeader
            name={name}
            activeProject={activeProject}
            projects={userProjects}
            user={user}
            onOutput={onOutput}
        />
    );

    // Handle project select from toolheader
    // ignore the unused component class name return variable _
    onProjectSelect = (_, project) => {
        this.props.setActiveProject(project);
    };

    renderResultListPagingButtons = (
        resource,
        collectionConfig,
        recipeUrl,
        query
    ) => (
        <Paging
            searchResult={resource}
            collectionConfig={collectionConfig}
            onPaged={searchResult => {
                FlexRouter.gotoResourceViewer(
                    recipeUrl,
                    searchResult,
                    query ? query.term : null,
                    true // hide the page header
                );
            }}
        />
    );

    // Resource header
    renderResourceHeader = (user, title, mediaTypes, showPaging, onBookmark) => {
        const types = {
            video: 'Video content',
            audio: 'Audio content',
            image: 'Image content',
            text: 'Textual content'
        };

        const mediaTypeIcons = mediaTypes
            ? mediaTypes.map(mt => (
                  <span
                      key={mt}
                      className={IconUtil.getMimeTypeIcon(
                          mt,
                          true,
                          true,
                          false
                      )}
                      title={types[mt]}
                  ></span>
              ))
            : [];

        return (
            <div className="resource-header">
                <h2 className="title">
                    {mediaTypeIcons}
                    {trunc(title || '', 150)}
                </h2>
                <div className="actions">
                    {/* Only render paging buttons if a query is set */}
                    {showPaging &&
                        this.renderResultListPagingButtons(
                            this.props.resource,
                            this.props.collectionConfig,
                            this.props.recipe.url,
                            this.props.query
                        )}
                    {/* Anonymous users are not able to bookmark */}
                    {onBookmark && user && user.id !== 'ANONYMOUS' && (
                        <div className="btn bookmark" onClick={onBookmark}>
                            <i className="fas fa-bookmark"></i> Bookmark
                        </div>
                    )}
                </div>
            </div>
        );
    };

    render() {
        const toolHeader = this.renderToolHeader(
            'Resource Viewer',
            this.props.activeProject,
            this.props.userProjects,
            this.props.user,
            this.onProjectSelect
        );

        const resourceHeader = this.renderResourceHeader(
            this.props.user,
            this.props.resource.title,
            this.props.resource.mediaTypes,
            this.props.showPaging,
            this.props.onBookmark
        );

        return (
            <div className={IDUtil.cssClassName('viewer-header')}>
                {toolHeader}
                {resourceHeader}
            </div>
        );
    }
}

ViewerHeader.propTypes = {
    activeProject: PropTypes.object,
    userProjects: PropTypes.array,
    user: PropTypes.object.isRequired,
    resource: PropTypes.object.isRequired,
    query: PropTypes.object,
    showPaging: PropTypes.bool,
    collectionConfig: PropTypes.object,
    recipe: PropTypes.object,
    onBookmark: PropTypes.func.isRequired,
    setActiveProject: PropTypes.func.isRequired
};