vbatts/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign video player (#4911)

Browse source 
* Redesign video player

* Use new video player on static public pages too

* Use media gallery component on static public pages too

* Pause video when hiding it

* Full-screen sizing on WebKit

* Add aria labels to video player buttons

* Display link card on public status page

* Fix fullscreen from modal sizing issue

* Remove contain: strict property to fix fullscreen from columns
This commit is contained in:
Eugen Rochko 2017-09-14 03:39:10 +02:00 • committed by GitHub
parent af00220d79
commit 2bbf987a0a
46 changed files with 1064 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/javascript/packs/public.js
View file

@ -24,6 +24,11 @@ function main() {
const emojify = require('../mastodon/emoji').default;
const { getLocale } = require('../mastodon/locales');
const { localeData } = getLocale();
const VideoContainer = require('../mastodon/containers/video_container').default;
const MediaGalleryContainer = require('../mastodon/containers/media_gallery_container').default;
const CardContainer = require('../mastodon/containers/card_container').default;
const React = require('react');
const ReactDOM = require('react-dom');
localeData.forEach(IntlRelativeFormat.__addLocaleData);
@ -65,22 +70,21 @@ function main() {
window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
});
});
});
delegate(document, '.video-player video', 'click', ({ target }) => {
if (target.paused) {
target.play();
} else {
target.pause();
}
});
[].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
});
delegate(document, '.activity-stream .media-spoiler-wrapper .media-spoiler', 'click', function() {
this.parentNode.classList.add('media-spoiler-wrapper__visible');
});
[].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<MediaGalleryContainer locale={locale} {...props} />, content);
});
delegate(document, '.activity-stream .media-spoiler-wrapper .spoiler-button', 'click', function() {
this.parentNode.classList.remove('media-spoiler-wrapper__visible');
[].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
});
});
delegate(document, '.webapp-btn', 'click', ({ target, button }) => {