refactored attachments and gallery. All attachments now are in gallery.

1 files changed, 72 insertions, 235 deletions

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index f80badfd..fe9e9398 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,7 +1,8 @@
 <template>
-  <div
+  <button
     v-if="usePlaceholder"
-    :class="{ 'fullwidth': fullwidth }"
+    class="Attachment -placeholder button-unstyled"
+    :class="classNames"
     @click="openModal"
   >
     <a
@@ -15,16 +16,16 @@
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
-  </div>
+  </button>
   <div
     v-else
     v-show="!isEmpty"
-    class="attachment"
-    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    class="Attachment"
+    :class="classNames"
   >
     <a
       v-if="hidden"
-      class="image-attachment"
+      class="image-container"
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
@@ -34,7 +35,6 @@
         :key="nsfwImage"
         class="nsfw"
         :src="nsfwImage"
-        :class="{'small': isSmall}"
       >
       <FAIcon
         v-if="type === 'video'"
@@ -42,21 +42,40 @@
         icon="play-circle"
       />
     </a>
-    <button
-      v-if="nsfw && hideNsfwLocal && !hidden"
-      class="button-unstyled hider"
-      @click.prevent="toggleHidden"
-    >
-      <FAIcon icon="times" />
-    </button>
+    <div
+      class="attachment-buttons"
+      v-if="!hidden"
+      >
+      <button
+        v-if="type === 'flash' && flashLoaded"
+        class="button-unstyled attachment-button"
+        @click.prevent="stopFlash"
+      >
+        <FAIcon icon="stop" />
+      </button>
+      <button
+        v-if="!useModal"
+        class="button-unstyled attachment-button"
+        @click.prevent="openModalForce"
+      >
+        <FAIcon icon="search-plus" />
+      </button>
+      <button
+        v-if="nsfw && hideNsfwLocal"
+        class="button-unstyled attachment-button"
+        @click.prevent="toggleHidden"
+      >
+        <FAIcon icon="times" />
+      </button>
+    </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
-      class="image-attachment"
-      :class="{'hidden': hidden && preloadImage }"
+      class="image-container"
+      :class="{'-hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-      @click="openModal"
+      @click.stop.prevent="openModal"
     >
       <StillImage
         class="image"
@@ -71,37 +90,43 @@
     <a
       v-if="type === 'video' && !hidden"
       class="video-container"
-      :class="{'small': isSmall}"
-      :href="allowPlay ? undefined : attachment.url"
-      @click="openModal"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
     >
       <VideoAttachment
         class="video"
         :attachment="attachment"
-        :controls="allowPlay"
+        :controls="!useModal"
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
       <FAIcon
-        v-if="!allowPlay"
+        v-if="useModal"
         class="play-icon"
         icon="play-circle"
       />
     </a>
 
-    <audio
-      v-if="type === 'audio'"
-      :src="attachment.url"
-      :alt="attachment.description"
-      :title="attachment.description"
-      controls
-      @play="$emit('play')"
-      @pause="$emit('pause')"
-    />
+    <a
+      v-if="type === 'audio' && !hidden"
+      class="audio-container"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
+    >
+      <audio
+        v-if="type === 'audio'"
+        :src="attachment.url"
+        :alt="attachment.description"
+        :title="attachment.description"
+        controls
+        @play="$emit('play')"
+        @pause="$emit('pause')"
+      />
+    </a>
 
     <div
       v-if="type === 'html' && attachment.oembed"
-      class="oembed"
+      class="oembed-container"
       @click.prevent="linkClicked"
     >
       <div
@@ -118,211 +143,23 @@
       </div>
     </div>
 
-    <Flash
-      v-if="type === 'flash'"
-      :src="attachment.large_thumb_url || attachment.url"
-    />
+    <a
+      v-if="type === 'flash' && !hidden"
+      class="flash-container"
+      :href="attachment.url"
+      @click.stop.prevent="openModal"
+    >
+      <Flash
+        class="flash"
+        ref="flash"
+        :src="attachment.large_thumb_url || attachment.url"
+        @playerOpened="setFlashLoaded(true)"
+        @playerClosed="setFlashLoaded(false)"
+      />
+    </a>
   </div>
 </template>
 
 <script src="./attachment.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.attachments {
-  display: flex;
-  flex-wrap: wrap;
-
-  .non-gallery {
-    max-width: 100%;
-  }
-
-  .placeholder {
-    display: inline-block;
-    padding: 0.3em 1em 0.3em 0;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 100%;
-
-    svg {
-      color: inherit;
-    }
-  }
-
-  .nsfw-placeholder {
-    cursor: pointer;
-
-    &.loading {
-      cursor: progress;
-    }
-  }
-
-  .attachment {
-    position: relative;
-    margin-top: 0.5em;
-    align-self: flex-start;
-    line-height: 0;
-
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--attachmentRadius;
-    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    overflow: hidden;
-  }
-
-  .non-gallery.attachment {
-    &.flash,
-    &.video {
-      flex: 1 0 40%;
-    }
-    .nsfw {
-      height: 260px;
-    }
-    .small {
-      height: 120px;
-      flex-grow: 0;
-    }
-    .video {
-      height: 260px;
-      display: flex;
-    }
-    video {
-      max-height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .fullwidth {
-    flex-basis: 100%;
-  }
-  // fixes small gap below video
-  &.video {
-    line-height: 0;
-  }
-
-  .video-container {
-    display: flex;
-    max-height: 100%;
-  }
-
-  .video {
-    width: 100%;
-    height: 100%;
-  }
-
-  .play-icon {
-    position: absolute;
-    font-size: 64px;
-    top: calc(50% - 32px);
-    left: calc(50% - 32px);
-    color: rgba(255, 255, 255, 0.75);
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-  }
-
-  .play-icon::before {
-    margin: 0;
-  }
-
-  &.html {
-    flex-basis: 90%;
-    width: 100%;
-    display: flex;
-  }
-
-  .hider {
-    position: absolute;
-    right: 0;
-    margin: 10px;
-    padding: 0;
-    z-index: 4;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    text-align: center;
-    width: 2em;
-    height: 2em;
-    font-size: 1.25em;
-    // TODO: theming? hard to theme with unknown background image color
-    background: rgba(230, 230, 230, 0.7);
-    .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.6);
-    }
-    &:hover .svg-inline--fa {
-      color: rgba(0, 0, 0, 0.9);
-    }
-  }
-
-  video {
-    z-index: 0;
-  }
-
-  audio {
-    width: 100%;
-  }
-
-  img.media-upload {
-    line-height: 0;
-    max-height: 200px;
-    max-width: 100%;
-  }
-
-  .oembed {
-    line-height: 1.2em;
-    flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
-    display: flex;
-
-    img {
-      width: 100%;
-    }
-
-    .image {
-      flex: 1;
-      img {
-        border: 0px;
-        border-radius: 5px;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .text {
-      flex: 2;
-      margin: 8px;
-      word-break: break-all;
-      h1 {
-        font-size: 14px;
-        margin: 0px;
-      }
-    }
-  }
-
-  .image-attachment {
-    &,
-    & .image {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .nsfw {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-
-    img {
-      image-orientation: from-image; // NOTE: only FF supports this
-    }
-  }
-}
-</style>
+<style src="./attachment.scss" lang="scss"></style>