From 8183d2ed556c37245066789d8d6bb3c6966da670 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 3 Sep 2018 20:22:13 +0200
Subject: [Glitch] Do not override ctrl/cmd+click in media gallery

---
 app/javascript/flavours/glitch/components/media_gallery.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index 3faf0b453..a68d983b8 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -70,7 +70,7 @@ class Item extends React.PureComponent {
   handleClick = (e) => {
     const { index, onClick } = this.props;
 
-    if (e.button === 0) {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
       e.preventDefault();
       onClick(index);
     }
-- 
cgit 


From be644e3b7cd441650d2657914917df08104e3b46 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 3 Sep 2018 20:46:00 +0200
Subject: Media gallery styling closer to upstream's

---
 .../flavours/glitch/components/media_gallery.js      |  9 ++++++---
 .../features/status/components/detailed_status.js    |  1 +
 app/javascript/flavours/glitch/styles/_mixins.scss   |  1 +
 .../flavours/glitch/styles/components/media.scss     | 20 ++++++++++++--------
 4 files changed, 20 insertions(+), 11 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index a68d983b8..fa27757f3 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -163,7 +163,8 @@ class Item extends React.PureComponent {
             sizes={sizes}
             alt={attachment.get('description')}
             title={attachment.get('description')}
-            style={{ objectPosition: `${x}% ${y}%` }} />
+            style={{ objectPosition: `${x}% ${y}%` }}
+          />
         </a>
       );
     } else if (attachment.get('type') === 'gifv') {
@@ -191,7 +192,7 @@ class Item extends React.PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+      <div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
         {thumbnail}
       </div>
     );
@@ -261,6 +262,8 @@ export default class MediaGallery extends React.PureComponent {
 
     if (this.isStandaloneEligible() && width) {
       style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
+    } else if (width) {
+      style.height = width / (16/9);
     }
 
     if (!visible) {
@@ -280,7 +283,7 @@ export default class MediaGallery extends React.PureComponent {
       }
     }
 
-    const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
+    const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
 
     return (
       <div className={computedClass} style={style} ref={this.handleRef}>
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index ee9eb02c6..2e61e6d8c 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -77,6 +77,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             sensitive={status.get('sensitive')}
             media={status.get('media_attachments')}
             letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
             onOpenMedia={this.props.onOpenMedia}
           />
         );
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index 102723e39..3ccecb874 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -48,5 +48,6 @@
     width: inherit;
     max-width: none;
     height: 250px;
+    border-radius: 0px;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 5a49c07fa..ef7525941 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -78,17 +78,11 @@
   box-sizing: border-box;
   margin-top: 8px;
   overflow: hidden;
+  border-radius: 4px;
   position: relative;
-  background: $base-shadow-color;
   width: 100%;
   height: 110px;
 
-  .detailed-status & {
-    margin-left: -14px;
-    width: calc(100% + 28px);
-    height: 250px;
-  }
-
   @include fullwidth-gallery;
 }
 
@@ -98,6 +92,12 @@
   display: block;
   float: left;
   position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .full-width & {
+    border-radius: 0;
+  }
 
   &.standalone {
     .media-gallery__item-gifv-thumbnail {
@@ -105,13 +105,17 @@
       top: 0;
     }
   }
+
+  &.letterbox {
+    background: $base-shadow-color;
+  }
 }
 
 .media-gallery__item-thumbnail {
   cursor: zoom-in;
   display: block;
   text-decoration: none;
-  height: 100%;
+  color: $secondary-text-color;
   line-height: 0;
 
   &,
-- 
cgit 


From 8622dccaf1a2380562284999c395592032a8f5ba Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 3 Sep 2018 21:28:40 +0200
Subject: Disable focus points for letterboxed media

---
 app/javascript/flavours/glitch/components/media_gallery.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index fa27757f3..1de12c5e0 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -163,7 +163,7 @@ class Item extends React.PureComponent {
             sizes={sizes}
             alt={attachment.get('description')}
             title={attachment.get('description')}
-            style={{ objectPosition: `${x}% ${y}%` }}
+            style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
           />
         </a>
       );
-- 
cgit 


From d8b2f15b23773880ffd5cee52b8c9a78c2e2bc53 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Tue, 4 Sep 2018 18:50:45 +0200
Subject: Pause video playback if toot is collapsed or CWs folded (fixes #146)

---
 app/javascript/flavours/glitch/components/status.js    | 1 +
 app/javascript/flavours/glitch/features/video/index.js | 7 +++++++
 2 files changed, 8 insertions(+)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 9f47abfef..f3709f653 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -430,6 +430,7 @@ export default class Status extends ImmutablePureComponent {
               sensitive={status.get('sensitive')}
               letterbox={settings.getIn(['media', 'letterbox'])}
               fullwidth={settings.getIn(['media', 'fullwidth'])}
+              preventPlayback={isCollapsed || !isExpanded}
               onOpenVideo={this.handleOpenVideo}
             />)}
           </Bundle>
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 7e284a0bc..44aba797c 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -101,6 +101,7 @@ export default class Video extends React.PureComponent {
     fullwidth: PropTypes.bool,
     detailed: PropTypes.bool,
     inline: PropTypes.bool,
+    preventPlayback: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
@@ -215,6 +216,12 @@ export default class Video extends React.PureComponent {
     document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
   }
 
+  componentDidUpdate (prevProps) {
+    if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) {
+      this.video.pause();
+    }
+  }
+
   handleFullscreenChange = () => {
     this.setState({ fullscreen: isFullscreen() });
   }
-- 
cgit