Skip to content

Commit

Permalink
feat: add iframe fullscreen button (#257)
Browse files Browse the repository at this point in the history
* feat: add iframe fullscreen button

* fixup style

* fixup: rm  quote from tree

* intl

* fixup intl

* codecilmate

* fix: fullscreen button color

* change icon fad
  • Loading branch information
mashirozx committed Dec 30, 2021
1 parent 18497b5 commit 3c29fe4
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 30 deletions.
101 changes: 71 additions & 30 deletions app/javascript/mastodon/features/status/components/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import punycode from 'punycode';
import classnames from 'classnames';
import Icon from 'mastodon/components/icon';
import { useBlurhash } from 'mastodon/initial_state';
import Blurhash from 'mastodon/components/blurhash';
import { debounce } from 'lodash';
import IconButton from 'mastodon/components/icon_button';

const IDNA_PREFIX = 'xn--';

Expand Down Expand Up @@ -37,28 +38,12 @@ const trim = (text, len) => {

const domParser = new DOMParser();

const addAutoPlay = html => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
const messages = defineMessages({
fullscreen: { id: 'status.fullscreen', defaultMessage: 'Expand to full screen view' },
});

if (iframe) {
if (iframe.src.indexOf('?') !== -1) {
iframe.src += '&';
} else {
iframe.src += '?';
}

iframe.src += 'autoplay=1&auto_play=1';

// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return document.querySelector('body').innerHTML;
}

return html;
};

export default class Card extends React.PureComponent {
export default @injectIntl
class Card extends React.PureComponent {

static contextTypes = {
router: PropTypes.object,
Expand All @@ -72,6 +57,7 @@ export default class Card extends React.PureComponent {
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
sensitive: PropTypes.bool,
intl: PropTypes.object.isRequired,
quote: PropTypes.bool,
};

Expand All @@ -85,6 +71,7 @@ export default class Card extends React.PureComponent {
previewLoaded: false,
embedded: false,
revealed: !this.props.sensitive,
isIframe: false,
};

componentWillReceiveProps (nextProps) {
Expand Down Expand Up @@ -171,20 +158,74 @@ export default class Card extends React.PureComponent {
this.setState({ revealed: true });
}

addAutoPlay = html => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');

if (iframe) {
this.setState({ isIframe: true });

if (iframe.src.indexOf('?') !== -1) {
iframe.src += '&';
} else {
iframe.src += '?';
}

iframe.src += 'autoplay=1&auto_play=1';

// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return document.querySelector('body').innerHTML;
}

return html;
}

handleIframeFullscreen = () => {
const iframe = this.node;
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}

renderVideo () {
const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) };
const { card, intl } = this.props;
const content = { __html: this.addAutoPlay(card.get('html')) };
const { width } = this.state;
const ratio = card.get('width') / card.get('height');
const height = width / ratio;

const fullscreenEnabled = (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) ? true : false;
const isIframe = this.state.isIframe;

return (
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ height }}
/>
<div className='status-card__image status-card-video__container'>
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ height }}
/>
{fullscreenEnabled && isIframe ? (
<IconButton
className={'fullscreen-iframe-button'}
title={intl.formatMessage(messages.fullscreen)}
icon={'expand-wide:fad'}
onClick={this.handleIframeFullscreen}
size={18}
style={{
width: 'unset',
height: 'unset',
}}
/>
) : null}
</div>
);
}

Expand Down
4 changes: 4 additions & 0 deletions app/javascript/mastodon/locales/defaultMessages.json
Original file line number Diff line number Diff line change
Expand Up @@ -2784,6 +2784,10 @@
{
"defaultMessage": "Sensitive content",
"id": "status.sensitive_warning"
},
{
"defaultMessage": "Expand to full screen view",
"id": "status.fullscreen"
}
],
"path": "app/javascript/mastodon/features/status/components/card.json"
Expand Down
1 change: 1 addition & 0 deletions app/javascript/mastodon/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,7 @@
"status.embed": "Embed",
"status.favourite": "Favourite",
"status.filtered": "Filtered",
"status.fullscreen": "Expand to full screen view",
"status.hide_translation": "Hide translation",
"status.load_more": "Load more",
"status.local_only": "This post is only visible by other users of your instance",
Expand Down
10 changes: 10 additions & 0 deletions app/javascript/styles/mastodon-light/diff.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@ html {
}
}

.status-card-video__container {
.fullscreen-iframe-button {
color: rgba($white, 0.8);

&:hover {
color: $white;
}
}
}

// Change default background colors of columns
.column > .scrollable,
.getting-started,
Expand Down
24 changes: 24 additions & 0 deletions app/javascript/styles/mastodon/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3308,6 +3308,30 @@ a.status-card {
}
}

.status-card-video__container {
.fullscreen-iframe-button {
position: absolute;
top: 50%;
right: 0;
padding: 6px;
border-radius: 8px 0 0 8px;
color: $secondary-text-color;
background: rgba($base-shadow-color, 0.6);
transform: translate(100%, -50%);
transition: transform 0.5s;

&:hover {
color: $primary-text-color;
}
}

&:hover {
.fullscreen-iframe-button {
transform: translate(0, -50%);
}
}
}

.status-card__title {
display: block;
font-weight: 500;
Expand Down

0 comments on commit 3c29fe4

Please sign in to comment.