From a9a0c854e1df8fbc682eeb059fc68e8dbdbb5bde Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Thu, 13 Jul 2017 22:18:18 +0200 Subject: [PATCH] fix(components/media_modal): Style issues (#4187) --- .../components/extended_video_player.js | 4 +++- .../features/ui/components/media_modal.js | 20 +++++++++---------- app/javascript/styles/components.scss | 8 ++++++++ 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/app/javascript/mastodon/components/extended_video_player.js b/app/javascript/mastodon/components/extended_video_player.js index 4c62fa7b3d..b38a4b8ff1 100644 --- a/app/javascript/mastodon/components/extended_video_player.js +++ b/app/javascript/mastodon/components/extended_video_player.js @@ -5,6 +5,8 @@ export default class ExtendedVideoPlayer extends React.PureComponent { static propTypes = { src: PropTypes.string.isRequired, + width: PropTypes.number, + height: PropTypes.number, time: PropTypes.number, controls: PropTypes.bool.isRequired, muted: PropTypes.bool.isRequired, @@ -30,7 +32,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent { render () { return ( -
+
; } - if (attachment.get('type') === 'image') { - content = media.map((image) => { - const width = image.getIn(['meta', 'original', 'width']) || null; - const height = image.getIn(['meta', 'original', 'height']) || null; + content = media.map((image) => { + const width = image.getIn(['meta', 'original', 'width']) || null; + const height = image.getIn(['meta', 'original', 'height']) || null; + if (image.get('type') === 'image') { return ; - }).toArray(); - } else if (attachment.get('type') === 'gifv') { - content = ; - } + } else if (image.get('type') === 'gifv') { + return ; + } + + return null; + }).toArray(); return (
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 02602afa4f..bcf7ba4e01 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2957,6 +2957,7 @@ button.icon-button.active i.fa-retweet { max-height: 80vh; position: relative; + .extended-video-player, img, canvas, video { @@ -2966,6 +2967,13 @@ button.icon-button.active i.fa-retweet { height: auto; } + .extended-video-player, + video { + display: flex; + width: 80vw; + height: 80vh; + } + img, canvas { display: block;