MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Polish video player CSS, add timer on fullscreen/modal/public pages (#5928)

Browse Source
master
Eugen Rochko 7 years ago committed by GitHub
parent b0db4dad79
commit 70ce2a2095
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 32 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      app/javascript/mastodon/features/ui/components/video_modal.js
  2. 65
      app/javascript/mastodon/features/video/index.js
  3. 69
      app/javascript/styles/mastodon/components.scss
  4. 2
      app/views/stream_entries/_detailed_status.html.haml

1
app/javascript/mastodon/features/ui/components/video_modal.js
Unescape View File

@ -23,6 +23,7 @@ export default class VideoModal extends ImmutablePureComponent {
src={media.get('url')} src={media.get('url')}
startTime={time} startTime={time}
onCloseVideo={onClose} onCloseVideo={onClose}
detailed
description={media.get('description')} description={media.get('description')}
/> />
</div> </div>

65
app/javascript/mastodon/features/video/index.js
Unescape View File

@ -17,6 +17,18 @@ const messages = defineMessages({
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
}); });
const formatTime = secondsNum => {
let hours = Math.floor(secondsNum / 3600);
let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
let seconds = secondsNum - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = '0' + hours;
if (minutes < 10) minutes = '0' + minutes;
if (seconds < 10) seconds = '0' + seconds;
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
};
const findElementPosition = el => { const findElementPosition = el => {
let box; let box;
@ -83,11 +95,13 @@ export default class Video extends React.PureComponent {
startTime: PropTypes.number, startTime: PropTypes.number,
onOpenVideo: PropTypes.func, onOpenVideo: PropTypes.func,
onCloseVideo: PropTypes.func, onCloseVideo: PropTypes.func,
detailed: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
state = { state = {
progress: 0, currentTime: 0,
duration: 0,
paused: true, paused: true,
dragging: false, dragging: false,
fullscreen: false, fullscreen: false,
@ -117,7 +131,10 @@ export default class Video extends React.PureComponent {
} }
handleTimeUpdate = () => { handleTimeUpdate = () => {
this.setState({ progress: 100 * (this.video.currentTime / this.video.duration) }); this.setState({
currentTime: Math.floor(this.video.currentTime),
duration: Math.floor(this.video.duration),
});
} }
handleMouseDown = e => { handleMouseDown = e => {
@ -143,8 +160,10 @@ export default class Video extends React.PureComponent {
handleMouseMove = throttle(e => { handleMouseMove = throttle(e => {
const { x } = getPointerPosition(this.seek, e); const { x } = getPointerPosition(this.seek, e);
this.video.currentTime = this.video.duration * x; const currentTime = Math.floor(this.video.duration * x);
this.setState({ progress: x * 100 });
this.video.currentTime = currentTime;
this.setState({ currentTime });
}, 60); }, 60);
togglePlay = () => { togglePlay = () => {
@ -226,11 +245,12 @@ export default class Video extends React.PureComponent {
} }
render () { render () {
const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt } = this.props; const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed } = this.props;
const { progress, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100;
return ( return (
<div className={classNames('video-player', { inactive: !revealed, inline: width && height && !fullscreen, fullscreen })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div className={classNames('video-player', { inactive: !revealed, detailed, inline: width && height && !fullscreen, fullscreen })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<video <video
ref={this.setVideoRef} ref={this.setVideoRef}
src={src} src={src}
@ -267,16 +287,27 @@ export default class Video extends React.PureComponent {
/> />
</div> </div>
<div className='video-player__buttons left'> <div className='video-player__buttons-bar'>
<button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> <div className='video-player__buttons left'>
<button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> <button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button>
{!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} <button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button>
</div>
{!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>}
<div className='video-player__buttons right'>
{(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} {(detailed || fullscreen) &&
{onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-times' /></button>} <span>
<button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> <span className='video-player__time-current'>{formatTime(currentTime)}</span>
<span className='video-player__time-sep'>/</span>
<span className='video-player__time-total'>{formatTime(duration)}</span>
</span>
}
</div>
<div className='video-player__buttons right'>
{(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>}
{onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>}
<button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
</div>
</div> </div>
</div> </div>
</div> </div>

69
app/javascript/styles/mastodon/components.scss
Unescape View File

@ -3998,6 +3998,7 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
background: $base-shadow-color; background: $base-shadow-color;
max-width: 100%; max-width: 100%;
border-radius: 4px;
video { video {
height: 100%; height: 100%;
@ -4032,8 +4033,8 @@ button.icon-button.active i.fa-retweet {
left: 0; left: 0;
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 10px; padding: 0 15px;
opacity: 0; opacity: 0;
transition: opacity .1s ease; transition: opacity .1s ease;
@ -4086,40 +4087,67 @@ button.icon-button.active i.fa-retweet {
} }
} }
&__buttons { &__buttons-bar {
display: flex;
justify-content: space-between;
padding-bottom: 10px; padding-bottom: 10px;
}
&__buttons {
font-size: 16px; font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.left { &.left {
float: left;
button { button {
padding-right: 10px; padding-left: 0;
} }
} }
&.right { &.right {
float: right;
button { button {
padding-left: 10px; padding-right: 0;
} }
} }
button { button {
background: transparent; background: transparent;
padding: 0; padding: 2px 10px;
font-size: 16px;
border: 0; border: 0;
color: $white; color: rgba($white, 0.75);
&:active, &:active,
&:hover, &:hover,
&:focus { &:focus {
color: $ui-highlight-color; color: $white;
} }
} }
} }
&__time-sep,
&__time-total,
&__time-current {
font-size: 14px;
font-weight: 500;
}
&__time-current {
color: $white;
margin-left: 10px;
}
&__time-sep {
display: inline-block;
margin: 0 6px;
}
&__time-sep,
&__time-total {
color: $white;
}
&__seek { &__seek {
cursor: pointer; cursor: pointer;
height: 24px; height: 24px;
@ -4129,6 +4157,7 @@ button.icon-button.active i.fa-retweet {
content: ""; content: "";
width: 100%; width: 100%;
background: rgba($white, 0.35); background: rgba($white, 0.35);
border-radius: 4px;
display: block; display: block;
position: absolute; position: absolute;
height: 4px; height: 4px;
@ -4140,8 +4169,9 @@ button.icon-button.active i.fa-retweet {
display: block; display: block;
position: absolute; position: absolute;
height: 4px; height: 4px;
border-radius: 4px;
top: 10px; top: 10px;
background: $ui-highlight-color; background: lighten($ui-highlight-color, 8%);
} }
&__buffer { &__buffer {
@ -4158,7 +4188,8 @@ button.icon-button.active i.fa-retweet {
top: 6px; top: 6px;
margin-left: -6px; margin-left: -6px;
transition: opacity .1s ease; transition: opacity .1s ease;
background: $ui-highlight-color; background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none; pointer-events: none;
&.active { &.active {
@ -4172,6 +4203,16 @@ button.icon-button.active i.fa-retweet {
} }
} }
} }
&.detailed,
&.fullscreen {
.video-player__buttons {
button {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
} }
.media-spoiler-video { .media-spoiler-video {

2
app/views/stream_entries/_detailed_status.html.haml
Unescape View File

@ -22,7 +22,7 @@
- if !status.media_attachments.empty? - if !status.media_attachments.empty?
- if status.media_attachments.first.video? - if status.media_attachments.first.video?
- video = status.media_attachments.first - video = status.media_attachments.first
%div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 670, height: 380) }} %div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 670, height: 380, detailed: true) }}
- else - else
%div{ data: { component: 'MediaGallery', props: Oj.dump(height: 380, sensitive: status.sensitive?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }} %div{ data: { component: 'MediaGallery', props: Oj.dump(height: 380, sensitive: status.sensitive?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }}
- elsif status.preview_cards.first - elsif status.preview_cards.first

Write Preview
Loading…
Cancel
Save