Skip to content

Player controls changes #1586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tf merged 6 commits into from
Oct 26, 2020
Merged

Player controls changes #1586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d16450c
Make controls inset except for audio without poster
tf Oct 20, 2020
0097a52
Add big play/pause button to classic controls
tf Oct 20, 2020
f892dc1
Align waveform controls with adjusted player controls
tf Oct 20, 2020
9b9de43
Increase player controls button size
tf Oct 20, 2020
d5cc9d6
Make players take poster file instead of poster id
tf Oct 22, 2020
7568fcd
Unmute every time play button is clicked
tf Oct 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion entry_types/scrolled/package/spec/frontend/AudioPlayer-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ describe('AudioPlayer', () => {
renderInEntry(
() => <AudioPlayer {...requiredProps()}
audioFile={useFile({collectionName: 'audioFiles', permaId: 100})}
posterId={200} />,
posterImageFile={useFile({collectionName: 'imageFiles', permaId: 200})} />,
{
seed: {
fileUrlTemplates: {
Expand Down
2 changes: 1 addition & 1 deletion entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ describe('VideoPlayer', () => {
renderInEntry(
() => <VideoPlayer {...requiredProps()}
videoFile={useFile({collectionName: 'videoFiles', permaId: 100})}
posterId={200} />,
posterImageFile={useFile({collectionName: 'imageFiles', permaId: 200})} />,
{
seed: {
fileUrlTemplates: {
Expand Down
30 changes: 16 additions & 14 deletions entry_types/scrolled/package/src/contentElements/inlineAudio/InlineAudio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {

export function InlineAudio({sectionProps, configuration}) {
const audioFile = useFile({collectionName: 'audioFiles', permaId: configuration.id});
const posterImageFile = useFile({collectionName: 'imageFiles', permaId: configuration.posterId});

const [playerState, playerActions] = usePlayerState();
const {isEditable, isSelected} = useContentElementEditorState();
Expand Down Expand Up @@ -45,25 +46,26 @@ export function InlineAudio({sectionProps, configuration}) {

return (
<Figure caption={configuration.caption}>
<AudioPlayer isPrepared={isPrepared}
position={configuration.position}
controls={configuration.controls}
playerState={playerState}
playerActions={playerActions}
audioFile={audioFile}
posterId={configuration.posterId}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
quality={'high'}
playsInline={true}
atmoDuringPlayback={configuration.atmoDuringPlayback}
onClick={onPlayerClick} />

<AudioPlayerControls audioFile={audioFile}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
playerState={playerState}
playerActions={playerActions}
standAlone={!posterImageFile}
configuration={configuration}
sectionProps={sectionProps}/>
sectionProps={sectionProps}
onPlayerClick={onPlayerClick}>
<AudioPlayer isPrepared={isPrepared}
position={configuration.position}
controls={configuration.controls}
playerState={playerState}
playerActions={playerActions}
audioFile={audioFile}
posterImageFile={posterImageFile}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
quality={'high'}
playsInline={true}
atmoDuringPlayback={configuration.atmoDuringPlayback} />
</AudioPlayerControls>
</Figure>
)
}
46 changes: 43 additions & 3 deletions entry_types/scrolled/package/src/contentElements/inlineAudio/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,58 @@ storiesOfContentElement(module, {
},
variants: [
{
name: 'with waveform player controls',
name: 'stand alone',
},
{
name: 'stand alone with caption',
configuration: {
caption: 'Some caption'
}
},
{
name: 'with poster image',
configuration: {
posterId: filePermaId('imageFiles', 'turtle')
}
},
{
name: 'with poster image and caption',
configuration: {
posterId: filePermaId('imageFiles', 'turtle'),
caption: 'Some caption'
}
},
{
name: 'with waveform',
configuration: {
playerControlVariant: 'waveform',
waveformColor: '#1963ad'
}
},
{
name: 'with poster image',
name: 'with waveform and caption',
configuration: {
playerControlVariant: 'waveform',
waveformColor: '#1963ad',
caption: 'Some caption'
}
},
{
name: 'with waveform and poster image',
configuration: {
playerControlVariant: 'waveform',
waveformColor: '#1963ad',
posterId: filePermaId('imageFiles', 'turtle')
}
},
{
name: 'with waveform, poster image and caption',
configuration: {
playerControlVariant: 'waveform',
waveformColor: '#1963ad',
posterId: filePermaId('imageFiles', 'turtle'),
caption: 'Some caption'
}
}
]

});
29 changes: 15 additions & 14 deletions entry_types/scrolled/package/src/contentElements/inlineVideo/InlineVideo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {

export function InlineVideo({sectionProps, configuration}) {
const videoFile = useFile({collectionName: 'videoFiles', permaId: configuration.id});
const posterImageFile = useFile({collectionName: 'imageFiles', permaId: configuration.posterId});

const [playerState, playerActions] = usePlayerState();
const {isEditable, isSelected} = useContentElementEditorState();
Expand Down Expand Up @@ -46,25 +47,25 @@ export function InlineVideo({sectionProps, configuration}) {
return (
<Figure caption={configuration.caption}>
<MediaInteractionTracking playerState={playerState} playerActions={playerActions}>
<VideoPlayer isPrepared={isPrepared}
position={configuration.position}
controls={configuration.controls}
playerState={playerState}
playerActions={playerActions}
videoFile={videoFile}
posterId={configuration.posterId}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
quality={'high'}
playsInline={true}
atmoDuringPlayback={configuration.atmoDuringPlayback}
onClick={onPlayerClick} />

<VideoPlayerControls videoFile={videoFile}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
playerState={playerState}
playerActions={playerActions}
configuration={configuration}
sectionProps={sectionProps}/>
sectionProps={sectionProps}
onPlayerClick={onPlayerClick}>
<VideoPlayer isPrepared={isPrepared}
position={configuration.position}
controls={configuration.controls}
playerState={playerState}
playerActions={playerActions}
videoFile={videoFile}
posterImageFile={posterImageFile}
defaultTextTrackFilePermaId={configuration.defaultTextTrackFileId}
quality={'high'}
playsInline={true}
atmoDuringPlayback={configuration.atmoDuringPlayback} />
</VideoPlayerControls>
</MediaInteractionTracking>
</Figure>
)
Expand Down
15 changes: 7 additions & 8 deletions entry_types/scrolled/package/src/frontend/AudioPlayer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import classNames from 'classnames';

import {useFile} from '../../entryState';
import {MediaPlayer} from '../MediaPlayer';
import {useTextTracks} from '../useTextTracks';
import {useMediaMuted} from '../useMediaMuted';
Expand All @@ -15,13 +14,12 @@ import styles from '../AudioPlayer.module.css';
*
* @param {Object} props
* @param {Object} props.audioFile - Audio file obtained via `useFile`.
* @param {number} [props.posterId] - Perma id of the poster image file.
* @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
* @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
* @param {String} [props.position] - Position of parent content element.
* @param {boolean} [props.isPrepared] - Control lazy loading.
*/
export function AudioPlayer({audioFile, ...props}) {
const posterImage = useFile({collectionName: 'imageFiles', permaId: props.posterId});
export function AudioPlayer({audioFile, posterImageFile, ...props}) {
const textTracks = useTextTracks({
file: audioFile,
defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
Expand All @@ -30,17 +28,18 @@ export function AudioPlayer({audioFile, ...props}) {

if (audioFile && audioFile.isReady) {
return (
<ViewportDependentPillarBoxes file={posterImage} position={props.position}>
<ViewportDependentPillarBoxes file={posterImageFile} position={props.position}>
<div className={classNames(styles.spaceForTextTracks,
{[styles.spaceForTextTracksActive]: !posterImage &&
{[styles.spaceForTextTracksActive]: !posterImageFile &&
textTracks.files.length})}>
<MediaPlayer className={styles.audioPlayer}
type={'audio'}
textTracks={textTracks}
filePermaId={audioFile.permaId}
sources={processSources(audioFile)}
textTracksInset={props.position === 'full'}
posterImageUrl={posterImage && posterImage.isReady ? posterImage.urls.large : undefined}
textTracksInset={!!posterImageFile}
posterImageUrl={posterImageFile && posterImageFile.isReady ?
posterImageFile.urls.large : undefined}
altText={audioFile.configuration.alt}
{...props} />
<AudioStructuredData file={audioFile} />
Expand Down
7 changes: 0 additions & 7 deletions entry_types/scrolled/package/src/frontend/MediaPlayer.module.css
View file
Open in desktop

This file was deleted.

34 changes: 15 additions & 19 deletions entry_types/scrolled/package/src/frontend/MediaPlayer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {useEventContextData} from '../useEventContextData';

import {getTextTrackSources, updateTextTracksMode} from './textTracks';
import textTrackStyles from './textTracks.module.css';
import styles from '../MediaPlayer.module.css';

export * from './usePlayerState';

Expand Down Expand Up @@ -64,24 +63,21 @@ function PreparedMediaPlayer(props){
}, [props.textTracks.activeFileId]);

return (
<>
<PlayerContainer className={classNames(props.className, {[textTrackStyles.inset]: props.textTracksInset})}
type={props.type}
sources={appendSuffix(props.sources, props.sourceUrlSuffix)}
textTrackSources={getTextTrackSources(props.textTracks.files, props.textTracksDisabled)}
filePermaId={props.filePermaId}
poster={props.posterImageUrl}
loop={props.loop}
controls={props.controls}
playsInline={props.playsInline}
objectPosition={props.objectPosition}
mediaEventsContextData={eventContextData}
atmoDuringPlayback={props.atmoDuringPlayback}
onSetup={onSetup}
onDispose={onDispose}
altText={props.altText} />
<div className={styles.mask} onClick={props.onClick} />
</>
<PlayerContainer className={classNames(props.className, {[textTrackStyles.inset]: props.textTracksInset})}
type={props.type}
sources={appendSuffix(props.sources, props.sourceUrlSuffix)}
textTrackSources={getTextTrackSources(props.textTracks.files, props.textTracksDisabled)}
filePermaId={props.filePermaId}
poster={props.posterImageUrl}
loop={props.loop}
controls={props.controls}
playsInline={props.playsInline}
objectPosition={props.objectPosition}
mediaEventsContextData={eventContextData}
atmoDuringPlayback={props.atmoDuringPlayback}
onSetup={onSetup}
onDispose={onDispose}
altText={props.altText} />
);
};

Expand Down
19 changes: 7 additions & 12 deletions entry_types/scrolled/package/src/frontend/MediaPlayer/playerActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,28 +39,23 @@ export const USER_IDLE = 'MEDIA_USER_IDLE';
export const SAVE_MEDIA_ELEMENT_ID = 'MEDIA_SAVE_MEDIA_ELEMENT_ID';
export const DISCARD_MEDIA_ELEMENT_ID = 'MEDIA_DISCARD_MEDIA_ELEMENT_ID';

let isBlessed = false;

export function createActions(dispatch){
return {
playBlessed(){
if (!isBlessed) {
media.mute(false);
isBlessed = true;
}
dispatch({type: PLAY});
playBlessed({via} = {}){
media.mute(false);
dispatch({type: PLAY, payload: {via}});
},
play(){
dispatch({type: PLAY});
play({via} = {}){
dispatch({type: PLAY, payload: {via}});
},
playing(){
dispatch({type: PLAYING});
},
playFailed(){
dispatch({type: PLAY_FAILED});
},
pause(){
dispatch({type: PAUSE});
pause({via} = {}){
dispatch({type: PAUSE, payload: {via}});
},
paused(){
dispatch({type: PAUSED})
Expand Down
7 changes: 6 additions & 1 deletion entry_types/scrolled/package/src/frontend/MediaPlayer/textTracks.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
font-family: inherit !important;
}

/* Ensure text tracks are displayed on top of waveform */
:global .vjs-text-track-display {
z-index: 2;
}

.inset :global .vjs-text-track-display {
bottom: 20px;
bottom: 40px;
}

:global .vjs-text-track-display div {
Expand Down
14 changes: 9 additions & 5 deletions entry_types/scrolled/package/src/frontend/MediaPlayer/usePlayerState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,16 @@ export function playerStateReducer(state, action){
...state,
isLoading: true,
shouldPlay: true,
playFailed: false
playFailed: false,
unplayed: false,
lastControlledVia: action.payload.via
};
case PLAYING:
return {
...state,
shouldPlay: true,
isPlaying: true,
userIdle: false,
unplayed: false
userIdle: false
};
case PLAY_AND_FADE_IN:
return {
Expand Down Expand Up @@ -78,7 +79,8 @@ export function playerStateReducer(state, action){
shouldPlay: false,
isLoading: false,
fadeDuration: null,
shouldPause: true
shouldPause: true,
lastControlledVia: action.payload.via
};
case PAUSED:
state.shouldPause = false;
Expand Down Expand Up @@ -141,7 +143,9 @@ export function playerStateReducer(state, action){
return {
...state,
shouldPlay: false,
isPlaying: false
isPlaying: false,
unplayed: true,
lastControlledVia: null
};
case WAITING:
return {
Expand Down
Loading