IMPR: Video player + loading animation

src/js/window.js

@@ -211,6 +211,12 @@ class MetaWindow {
               `meta-${ui.name}--json`,
             ]);
 
+            break;
+          case 'video/mp4':
+            ui.setContent(`<video controls autoplay><source src="${link}" type="video/mp4">Your browser does not support the video tag.</video>`, [
+              `meta-${ui.name}--image`,
+              `meta-${ui.name}--video`,
+            ]);
             break;
           case 'text/html':
           case 'application/xhtml+xml':

src/scss/window.scss

@@ -1,248 +1,275 @@
 @import "variables";
-
 $module-name: "meta-MetaWindow";
 
-.#{$module-name} {
+@keyframes fade {
-  position: fixed;
+    0% {
+        opacity: 1;
 
-  // lightbox inner elements
+        filter: grayscale(0);
-  .meta-spinner--embed,
-  .meta-spinner,
-  .meta-error {
-    align-items: center;
-    display: none;
-    justify-content: center;
-    text-align: center;
-    z-index: 2;
-  }
-
-  .meta-spinner--embed,
-  .meta-spinner {
-    @include spinner_style();
-
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .meta-error {
-    color: $clr-red;
-    font-size: 1.5em;
-    font-weight: bold;
-  }
-
-  .meta-spinner--embed {
-    display: flex;
-  }
-
-  &-overlay {
-    align-items: center;
-    background: $meta-overlay-bg;
-    bottom: 0;
-    display: none;
-    justify-content: center;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 98;
-
-    // meta states
-    &--open {
-      display: flex;
     }
 
-    &--loading {
+    50% {
-      .meta-spinner {
+        opacity: .5;
-        display: flex;
+
-      }
+        filter: grayscale(1);
     }
 
-    &--error {
+    100% {
-      .meta-content {
+        opacity: 1;
-        justify-content: center;
-      }
 
-      .meta-error {
+        filter: grayscale(0);
-        display: flex;
+    }
-      }
+}
+
+.#{$module-name} {
+    position: fixed;
+
+    // lightbox inner elements
+    .meta-spinner--embed,
+    .meta-spinner,
+    .meta-error {
+        z-index: 2;
+        display: none;
+        text-align: center;
+
+        align-items: center;
+        justify-content: center;
+    }
+
+    .meta-spinner--embed,
+    .meta-spinner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        @include spinner_style();
+    }
+
+    .meta-error {
+        font-size: 1.5em;
+        font-weight: bold;
+        color: $clr-red;
+    }
+
+    .meta-spinner--embed {
+        display: flex;
+    }
+
+    &-overlay {
+        position: fixed;
+        z-index: 98;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: none;
+        background: $meta-overlay-bg;
+
+        align-items: center;
+        justify-content: center;
+
+        // meta states
+        &--open {
+            display: flex;
+        }
+
+        &--loading {
+            animation-name: fade;
+            animation-duration: 5s;
+            animation-iteration-count: infinite;
+
+            .meta-spinner {
+                display: flex;
+            }
+        }
+
+        &--error {
+            .meta-content {
+                justify-content: center;
+            }
+
+            .meta-error {
+                display: flex;
+            }
+        }
+    }
+
+    // navs
+    .meta-nav {
+        font-size: $meta-nav-size;
+        z-index: 2;
+        color: $meta-nav-color;
+        border: 0;
+        background: none;
+        text-shadow: $meta-nav-hover-shadow 0 0 .25em;
+
+        @include hover-focus() {
+            color: $meta-nav-color;
+        }
+
+        &:hover {
+            text-decoration: none;
+            color: $meta-nav-hover-color;
+            background: $meta-nav-hover-bg;
+            text-shadow: none;
+        }
+    }
+
+    .meta-nav-arrow {
+        font-size: $meta-nav-arrows-size;
+        position: absolute;
+        z-index: 2;
+        top: auto;
+        bottom: 0;
+        display: flex;
+        padding: $meta-nav-padding;
+
+        align-items: center;
+        justify-content: center;
+        @include hover-focus() {
+            .fa,
+            .fas,
+            .far,
+            .fab {
+                transform: $meta-nav-hover-transform;
+            }
+        }
+
+        @media (min-width: map-get($grid-breakpoints, "lg")) {
+            top: 0;
+            bottom: 0;
+        }
+
+        &__next {
+            right: 0;
+        }
+
+        &__prev {
+            left: 0;
+        }
+
+        @media (min-width: map-get($grid-breakpoints, "lg")) {
+            &__next {
+                right: -($meta-nav-arrows-size + .5);
+            }
+
+            &__prev {
+                left: -($meta-nav-arrows-size + .5);
+            }
+        }
+    }
+
+    .meta-close {
+        position: absolute;
+        top: -3rem;
+        right: 0;
+        width: 1.25em;
+
+        &:hover {
+            .fa,
+            .fas,
+            .far,
+            .fab {
+                transform: $meta-nav-close-hover-transform;
+            }
+        }
+
+        @media (min-width: map-get($grid-breakpoints, "lg")) {
+            top: -($meta-nav-arrows-size + .5);
+            right: -($meta-nav-arrows-size + .5);
+        }
+    }
+
+    .meta-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (min-width: map-get($grid-breakpoints, "md")) {
+            height: 80%;
+        }
+        @media (min-width: map-get($grid-breakpoints, "lg")) {
+            width: 90%;
+            width: calc(90% - 3rem);
+            height: 90%;
+            height: calc(90% - 3rem);
+        }
+    }
+
+    .meta-wrap {
+        display: flex;
+        overflow: auto;
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        word-break: break-word;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+
+            object-fit: cover;
+        }
+    }
+
+    // Lightbox types
+
+    &--text {
+        .meta-content {
+            padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
+            padding-right: 0;
+            color: $meta-text-wrapper-color;
+            background: $meta-text-wrapper-bg;
+        }
+
+        .meta-wrap {
+            padding-right: $meta-text-wrapper-padding-width;
+        }
+    }
+
+    &--image,
+    &--video {
+        .typography,
+        .meta-wrap {
+            overflow: hidden;
+            min-height: 100%;
+
+            align-items: center;
+            justify-content: center;
+
+            img {
+                margin: 0;
+            }
+        }
+    }
+
+    &--video,
+    &--embed {
+        @include responsive-ratio($meta-video-width, $meta-video-height, true);
+
+        a[rel="nofollow noreferrer noopener"] {
+            font-size: $meta-embed-loading-failed-size;
+            font-weight: $meta-embed-loading-failed-weight;
+            color: $meta-embed-loading-failed-color;
+
+            &:before {
+                display: block;
+                content: "Unable to load. Please follow the provided link: ";
+            }
+        }
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
     }
-  }
-
-  // navs
-  .meta-nav {
-    background: none;
-    border: 0;
-    color: $meta-nav-color;
-    font-size: $meta-nav-size;
-    text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
-    z-index: 2;
-
-    @include hover-focus() {
-      color: $meta-nav-color;
-    }
-
-    &:hover {
-      background: $meta-nav-hover-bg;
-      color: $meta-nav-hover-color;
-      text-decoration: none;
-      text-shadow: none;
-    }
-  }
-
-  .meta-nav-arrow {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    font-size: $meta-nav-arrows-size;
-    justify-content: center;
-    padding: $meta-nav-padding;
-    position: absolute;
-    top: auto;
-    z-index: 2;
-
-    @include hover-focus() {
-      .fa,
-      .fas,
-      .far,
-      .fab {
-        transform: $meta-nav-hover-transform;
-      }
-    }
-
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-      bottom: 0;
-      top: 0;
-    }
-
-    &__next {
-      right: 0;
-    }
-
-    &__prev {
-      left: 0;
-    }
-
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-      &__next {
-        right: -($meta-nav-arrows-size + 0.5);
-      }
-
-      &__prev {
-        left: -($meta-nav-arrows-size + 0.5);
-      }
-    }
-  }
-
-  .meta-close {
-    position: absolute;
-    right: 0;
-    top: -3rem;
-    width: 1.25em;
-
-    &:hover {
-      .fa,
-      .fas,
-      .far,
-      .fab {
-        transform: $meta-nav-close-hover-transform;
-      }
-    }
-
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-      right: -($meta-nav-arrows-size + 0.5);
-      top: -($meta-nav-arrows-size + 0.5);
-    }
-  }
-
-  .meta-content {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 100%;
-    z-index: 1;
-
-    @media (min-width: map-get($grid-breakpoints, "md")) {
-      height: 80%;
-    }
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-      height: 90%;
-      height: calc(90% - 3rem);
-      width: 90%;
-      width: calc(90% - 3rem);
-    }
-  }
-
-  .meta-wrap {
-    display: flex;
-    height: 100%;
-    margin: 0 auto;
-    max-height: 100%;
-    max-width: 100%;
-    overflow: auto;
-    width: 100%;
-    word-break: break-word;
-
-    img {
-      max-height: 100%;
-      max-width: 100%;
-      object-fit: cover;
-    }
-  }
-
-  // Lightbox types
-
-  &--text {
-    .meta-content {
-      background: $meta-text-wrapper-bg;
-      color: $meta-text-wrapper-color;
-      padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
-      padding-right: 0;
-    }
-
-    .meta-wrap {
-      padding-right: $meta-text-wrapper-padding-width;
-    }
-  }
-
-  &--image,
-  &--video {
-    .typography,
-    .meta-wrap {
-      align-items: center;
-      justify-content: center;
-      min-height: 100%;
-      overflow: hidden;
-
-      img {
-        margin: 0;
-      }
-    }
-  }
-
-  &--video,
-  &--embed {
-    @include responsive-ratio($meta-video-width, $meta-video-height, true);
-
-    a[rel="nofollow noreferrer noopener"] {
-      color: $meta-embed-loading-failed-color;
-      font-size: $meta-embed-loading-failed-size;
-      font-weight: $meta-embed-loading-failed-weight;
-
-      &:before {
-        content: "Unable to load. Please follow the provided link: ";
-        display: block;
-      }
-    }
-
-    iframe {
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
 }