{"size": 2618, "ext": "js", "max_stars_repo_path": "src/components/MediaControls/MediaControls.js", "max_stars_repo_name": "demeshko/grauman", "max_stars_repo_stars_event_min_datetime": "2020-10-31T11:53:23.000Z", "max_stars_repo_stars_event_max_datetime": "2021-01-08T13:40:20.000Z", "max_issues_repo_path": "src/components/MediaControls/MediaControls.js", "max_issues_repo_name": "demeshko/grauman", "max_issues_repo_issues_event_min_datetime": "2017-09-13T22:16:50.000Z", "max_issues_repo_issues_event_max_datetime": "2018-04-30T08:12:32.000Z", "max_forks_repo_path": "src/components/MediaControls/MediaControls.js", "max_forks_repo_name": "demeshko/grauman", "max_forks_repo_forks_event_min_datetime": "2017-09-14T23:25:58.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-01T18:26:25.000Z"}
{"max_stars_count": 2, "max_issues_count": 23, "max_forks_count": 7, "avg_line_length": 35.8630136986, "max_line_length": 108, "alphanum_fraction": 0.60236822}
import m from 'mithril';
import PlayButton from './PlayButton';
import ElapsedTime from './ElapsedTime';
import TotalTime from './TotalTime';
import FullscreenButton from './FullscreenButton';
import SettingsButton from './SettingsButton';
import VolumeButton from './VolumeButton';
import Scrubber from './Scrubber';
import './MediaControls.scss';

/**
 * Media Controls component
 * @prop {Object} attrs
 * @prop {function} attrs.onTogglePlay - Play button event handler
 * @prop {function} attrs.onToggleFullscreen - Fullscreen button event handler
 * @prop {function} attrs.onChangeSpeed - Change speed event handler
 * @prop {function} attrs.onToggleLoop - Change loop setting of playback
 * @prop {string} attrs.elapsedTime - Elapsed playback time
 * @prop {string} attrs.totalTime - Total playback time
 * @prop {string} attrs.type - Media type
 * @prop {boolean} attrs.playing - Is media playing
 * @prop {boolean} attrs.paused - Is media paused
 * @prop {boolean} attrs.stopped - Is media stopped
 * @prop {boolean} attrs.fullscreen - Is media in fullscreen mode
 */
const MediaControls = {
    view(vnode) {
        const {
            onTogglePlay,
            onToggleFullscreen,
            onToggleLoop,
            onToggleMute,
            onChangeVolume,
            onChangeSpeed,
            onSeek,
            onLockControls,
            isSeekingLocked,
            isFullscreenEnabled,
            isVolumeControllable,
            type,
            elapsedTime,
            totalTime,
            fullscreen,
            speed,
            loop,
            volume,
            muted,
            duration,
            currentTime,
            loadedRanges
        } = vnode.attrs;

        return m('div.controls', {
            onmouseenter: function (/* e */) { onLockControls(true); },
            onmouseleave: function (/* e */) { onLockControls(false); }
        }, [
            m('div.left', [
                m(PlayButton, { ...vnode.attrs, onClick: onTogglePlay }),
                m(ElapsedTime, { type, enabled: true }, elapsedTime)
            ]),
            m(Scrubber, { duration, currentTime, loadedRanges, onSeek, isSeekingLocked }),
            m('div.right', [
                m(TotalTime, { type }, totalTime),
                isFullscreenEnabled ? m(FullscreenButton, { fullscreen, onClick: onToggleFullscreen }) : '',
                m(VolumeButton, { isVolumeControllable, volume, muted, onChangeVolume, onToggleMute }),
                m(SettingsButton, { speed, loop, onToggleLoop, onChangeSpeed }),
            ])
        ]);
    }
};

export default MediaControls;
