about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/video
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2019-05-26 18:58:14 +0200
committerThibaut Girka <thib@sitedethib.com>2019-05-27 19:43:15 +0200
commitb4d4138cf9753b0c25a17f01702b61a74de6ec2c (patch)
tree17fddc0e0880233a357a26bf703b2f8d40a364d7 /app/javascript/flavours/glitch/features/video
parent20d01a954e0961eed41954bd23713e91a1dafe14 (diff)
[Glitch] Add keyboard shortcut to hide/show media
Port a472190729782f31731674c626c07af483fe9c7f and 988342a56cb58da9ac660eec3e55c3bcbbd6269b to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/features/video')
-rw-r--r--app/javascript/flavours/glitch/features/video/index.js21
1 files changed, 13 insertions, 8 deletions
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 2e0d59d47..3dd296c3c 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { fromJS } from 'immutable';
+import { fromJS, is } from 'immutable';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
@@ -94,7 +94,6 @@ export default class Video extends React.PureComponent {
     width: PropTypes.number,
     height: PropTypes.number,
     sensitive: PropTypes.bool,
-    revealed: PropTypes.bool,
     startTime: PropTypes.number,
     onOpenVideo: PropTypes.func,
     onCloseVideo: PropTypes.func,
@@ -102,9 +101,11 @@ export default class Video extends React.PureComponent {
     fullwidth: PropTypes.bool,
     detailed: PropTypes.bool,
     inline: PropTypes.bool,
-    preventPlayback: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
     cacheWidth: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+    visible: PropTypes.bool,
+    onToggleVisibility: PropTypes.func,
+    preventPlayback: PropTypes.bool,
     blurhash: PropTypes.string,
     link: PropTypes.node,
   };
@@ -119,12 +120,12 @@ export default class Video extends React.PureComponent {
     fullscreen: false,
     hovered: false,
     muted: false,
-    revealed: this.props.revealed === undefined ? (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all') : this.props.revealed,
+    revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
   };
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.revealed === true) {
-      this.setState({ revealed: true });
+    if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+      this.setState({ revealed: nextProps.visible });
     }
   }
 
@@ -349,7 +350,11 @@ export default class Video extends React.PureComponent {
       this.video.pause();
     }
 
-    this.setState({ revealed: !this.state.revealed });
+    if (this.props.onToggleVisibility) {
+      this.props.onToggleVisibility();
+    } else {
+      this.setState({ revealed: !this.state.revealed });
+    }
   }
 
   handleLoadedData = () => {