Merge pull request #416 from ThibG/glitch-soc/features/media-modal

Port various media modal improvements to glitch-soc

app/javascript/flavours/glitch/styles/components/index.scss

@@ -353,35 +353,42 @@
 
 .image-loader {
   position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.image-loader--loading {
-    .image-loader__preview-canvas {
-      filter: blur(2px);
-    }
+  .image-loader__preview-canvas {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    background: url('~images/void.png') repeat;
+    object-fit: contain;
   }
 
-  .image-loader__img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    max-width: 100%;
-    max-height: 100%;
-    background-image: none;
+  &.image-loader--loading .image-loader__preview-canvas {
+    filter: blur(2px);
   }
 
-  &.image-loader--amorphous {
-    position: static;
+  &.image-loader--amorphous .image-loader__preview-canvas {
+    display: none;
+  }
+}
 
-    .image-loader__preview-canvas {
-      display: none;
-    }
+.zoomable-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .image-loader__img {
-      position: static;
-      width: auto;
-      height: auto;
-    }
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    object-fit: contain;
   }
 }
 

app/javascript/flavours/glitch/styles/components/media.scss

@@ -157,43 +157,85 @@
   position: absolute;
 }
 
-.media-modal {
-  max-width: 80vw;
-  max-height: 80vh;
+.video-modal {
+  max-width: 100vw;
+  max-height: 100vh;
   position: relative;
 
-  .extended-video-player,
-  img,
-  canvas,
-  video {
-    max-width: 80vw;
-    max-height: 80vh;
-    width: auto;
-    height: auto;
-    margin: auto;
-  }
-
-  .extended-video-player,
-  video {
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
     display: flex;
-    width: 80vw;
-    height: 80vh;
-  }
+    align-items: center;
+    justify-content: center;
 
-  img,
-  canvas {
-    display: block;
-    background: url('~images/void.png') repeat;
-    object-fit: contain;
-  }
-
-  .react-swipeable-view-container {
-    max-width: 80vw;
+    video {
+      max-width: $media-modal-media-max-width;
+      max-height: $media-modal-media-max-height;
+    }
   }
 }
 
-.media-modal__content {
-  background: $base-overlay-background;
+.media-modal {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.media-modal__closer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.media-modal__navigation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+
+  * {
+    pointer-events: auto;
+  }
+
+  &.media-modal__navigation--hidden {
+    opacity: 0;
+
+    * {
+      pointer-events: none;
+    }
+  }
+}
+
+.media-modal__nav {
+  background: rgba($base-overlay-background, 0.5);
+  box-sizing: border-box;
+  border: 0;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  height: 20vmax;
+  margin: auto 0;
+  padding: 30px 15px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.media-modal__nav--left {
+  left: 0;
+}
+
+.media-modal__nav--right {
+  right: 0;
 }
 
 .media-modal__pagination {
@@ -201,7 +243,8 @@
   text-align: center;
   position: absolute;
   left: 0;
-  bottom: -40px;
+  bottom: 20px;
+  pointer-events: none;
 }
 
 .media-modal__page-dot {
@@ -225,8 +268,8 @@
 
 .media-modal__close {
   position: absolute;
-  right: 4px;
-  top: 4px;
+  right: 8px;
+  top: 8px;
   z-index: 100;
 }
 
@@ -244,8 +287,8 @@
   @include fullwidth-gallery;
 
   video {
-    height: 100%;
-    width: 100%;
+    max-width: 100vw;
+    max-height: 80vh;
     z-index: 1;
     object-fit: cover;
     position: relative;

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -2,29 +2,6 @@
   background: lighten($ui-base-color, 8%);
 }
 
-.modal-container__nav {
-  align-items: center;
-  background: rgba($base-overlay-background, 0.5);
-  box-sizing: border-box;
-  border: 0;
-  color: $primary-text-color;
-  cursor: pointer;
-  display: flex;
-  font-size: 24px;
-  height: 100%;
-  padding: 30px 15px;
-  position: absolute;
-  top: 0;
-}
-
-.modal-container__nav--left {
-  left: -61px;
-}
-
-.modal-container__nav--right {
-  right: -61px;
-}
-
 .modal-root {
   transition: opacity 0.3s linear;
   will-change: opacity;

app/javascript/flavours/glitch/styles/variables.scss

@@ -31,6 +31,11 @@ $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
 // Avatar border size (8% default, 100% for rounded avatars)
 $ui-avatar-border-size: 8%;