logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

media_modal.vue (6372B)

    

  1. <template>
  2.   <Modal
  3.     v-if="showing"
  4.     class="media-modal-view"
  5.     @backdropClicked="hideIfNotSwiped"
  6.   >
  7.     <SwipeClick
  8.       v-if="type === 'image'"
  9.       ref="swipeClick"
  10.       class="modal-image-container"
  11.       :direction="swipeDirection"
  12.       :threshold="swipeThreshold"
  13.       :disable-click-threshold="swipeDisableClickThreshold"
  14.       @preview-requested="handleSwipePreview"
  15.       @swipe-finished="handleSwipeEnd"
  16.       @swipeless-clicked="hide"
  17.     >
  18.       <PinchZoom
  19.         ref="pinchZoom"
  20.         class="modal-image-container-inner"
  21.         selector=".modal-image"
  22.         reach-min-scale-strategy="reset"
  23.         stop-propagate-handled="stop-propgate-handled"
  24.         :allow-pan-min-scale="pinchZoomMinScale"
  25.         :min-scale="pinchZoomMinScale"
  26.         :reset-to-min-scale-limit="pinchZoomScaleResetLimit"
  27.       >
  28.         <img
  29.           :class="{ loading }"
  30.           class="modal-image"
  31.           :src="currentMedia.url"
  32.           :alt="currentMedia.description"
  33.           :title="currentMedia.description"
  34.           @load="onImageLoaded"
  35.         >
  36.       </PinchZoom>
  37.     </SwipeClick>
  38.     <VideoAttachment
  39.       v-if="type === 'video'"
  40.       class="modal-image"
  41.       :attachment="currentMedia"
  42.       :controls="true"
  43.     />
  44.     <audio
  45.       v-if="type === 'audio'"
  46.       class="modal-image"
  47.       :src="currentMedia.url"
  48.       :alt="currentMedia.description"
  49.       :title="currentMedia.description"
  50.       controls
  51.     />
  52.     <Flash
  53.       v-if="type === 'flash'"
  54.       class="modal-image"
  55.       :src="currentMedia.url"
  56.       :alt="currentMedia.description"
  57.       :title="currentMedia.description"
  58.     />
  59.     <button
  60.       v-if="canNavigate"
  61.       :title="$t('media_modal.previous')"
  62.       class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
  63.       @click.stop.prevent="goPrev"
  64.     >
  65.       <FAIcon
  66.         class="button-icon arrow-icon"
  67.         icon="chevron-left"
  68.       />
  69.     </button>
  70.     <button
  71.       v-if="canNavigate"
  72.       :title="$t('media_modal.next')"
  73.       class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
  74.       @click.stop.prevent="goNext"
  75.     >
  76.       <FAIcon
  77.         class="button-icon arrow-icon"
  78.         icon="chevron-right"
  79.       />
  80.     </button>
  81.     <button
  82.       class="modal-view-button modal-view-button-hide"
  83.       :title="$t('media_modal.hide')"
  84.       @click.stop.prevent="hide"
  85.     >
  86.       <FAIcon
  87.         class="button-icon"
  88.         icon="times"
  89.       />
  90.     </button>
  92.     <span
  93.       v-if="description"
  94.       class="description"
  95.     >
  96.       {{ description }}
  97.     </span>
  98.     <span
  99.       class="counter"
  100.     >
  101.       {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
  102.     </span>
  103.     <span
  104.       v-if="loading"
  105.       class="loading-spinner"
  106.     >
  107.       <FAIcon
  108.         spin
  109.         icon="circle-notch"
  110.         size="5x"
  111.       />
  112.     </span>
  113.   </Modal>
  114. </template>
  116. <script src="./media_modal.js"></script>
  118. <style lang="scss">
  119. $modal-view-button-icon-height: 3em;
  120. $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
  121. $modal-view-button-icon-width: 3em;
  122. $modal-view-button-icon-margin: 0.5em;
  124. .media-modal-view {
  125.   @keyframes media-fadein {
  126.     from {
  127.       opacity: 0;
  128.     }
  130.     to {
  131.       opacity: 1;
  132.     }
  133.   }
  135.   .modal-image-container {
  136.     display: flex;
  137.     overflow: hidden;
  138.     align-items: center;
  139.     flex-direction: column;
  140.     max-width: 100%;
  141.     max-height: 100%;
  142.     width: 100%;
  143.     height: 100%;
  144.     flex-grow: 1;
  145.     justify-content: center;
  147.     &-inner {
  148.       width: 100%;
  149.       height: 100%;
  150.       flex-grow: 1;
  151.       display: flex;
  152.       flex-direction: column;
  153.       align-items: center;
  154.       justify-content: center;
  155.     }
  156.   }
  158.   .description,
  159.   .counter {
  160.     /* Hardcoded since background is also hardcoded */
  161.     color: white;
  162.     margin-top: 1em;
  163.     text-shadow: 0 0 10px black, 0 0 10px black;
  164.     padding: 0.2em 2em;
  165.   }
  167.   .description {
  168.     flex: 0 0 auto;
  169.     overflow-y: auto;
  170.     min-height: 1em;
  171.     max-width: 500px;
  172.     max-height: 9.5em;
  173.     word-break: break-all;
  174.   }
  176.   .modal-image {
  177.     max-width: 100%;
  178.     max-height: 100%;
  179.     image-orientation: from-image; // NOTE: only FF supports this
  180.     animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
  182.     &.loading {
  183.       opacity: 0.5;
  184.     }
  185.   }
  187.   .loading-spinner {
  188.     width: 100%;
  189.     height: 100%;
  190.     position: absolute;
  191.     pointer-events: none;
  192.     display: flex;
  193.     justify-content: center;
  194.     align-items: center;
  196.     svg {
  197.       color: white;
  198.     }
  199.   }
  201.   .modal-view-button {
  202.     border: 0;
  203.     padding: 0;
  204.     opacity: 0;
  205.     box-shadow: none;
  206.     background: none;
  207.     appearance: none;
  208.     overflow: visible;
  209.     cursor: pointer;
  210.     transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  211.     height: $modal-view-button-icon-height;
  212.     width: $modal-view-button-icon-width;
  214.     .button-icon {
  215.       position: absolute;
  216.       height: $modal-view-button-icon-height;
  217.       width: $modal-view-button-icon-width;
  218.       font-size: 1rem;
  219.       line-height: $modal-view-button-icon-height;
  220.       color: #fff;
  221.       text-align: center;
  222.       background-color: rgb(0 0 0 / 30%);
  223.     }
  224.   }
  226.   .modal-view-button-arrow {
  227.     position: absolute;
  228.     display: block;
  229.     top: 50%;
  230.     margin-top: $modal-view-button-icon-half-height;
  231.     width: $modal-view-button-icon-width;
  232.     height: $modal-view-button-icon-height;
  234.     .arrow-icon {
  235.       position: absolute;
  236.       top: 0;
  237.       line-height: $modal-view-button-icon-height;
  238.       color: #fff;
  239.       text-align: center;
  240.       background-color: rgb(0 0 0 / 30%);
  241.     }
  243.     &--prev {
  244.       left: 0;
  246.       .arrow-icon {
  247.         left: $modal-view-button-icon-margin;
  248.       }
  249.     }
  251.     &--next {
  252.       right: 0;
  254.       .arrow-icon {
  255.         right: $modal-view-button-icon-margin;
  256.       }
  257.     }
  258.   }
  260.   .modal-view-button-hide {
  261.     position: absolute;
  262.     top: 0;
  263.     right: 0;
  265.     .button-icon {
  266.       top: $modal-view-button-icon-margin;
  267.       right: $modal-view-button-icon-margin;
  268.     }
  269.   }
  270. }
  272. .modal-view.media-modal-view {
  273.   z-index: var(--ZI_media_modal);
  274.   flex-direction: column;
  276.   .modal-view-button-arrow,
  277.   .modal-view-button-hide {
  278.     opacity: 0.75;
  280.     &:focus,
  281.     &:hover {
  282.       outline: none;
  283.       box-shadow: none;
  284.     }
  286.     &:hover {
  287.       opacity: 1;
  288.     }
  289.   }
  291.   overflow: hidden;
  292. }
  293. </style>