diff --git a/dist/vue-silentbox.esm.js b/dist/vue-silentbox.esm.js
index 0136e03..ecbc3cb 100644
--- a/dist/vue-silentbox.esm.js
+++ b/dist/vue-silentbox.esm.js
@@ -369,6 +369,7 @@ var __vue_render__ = function() {
                   : _c("img", {
                       attrs: {
                         src: _vm.overlayItem.src,
+                        alt: _vm.overlayItem.alt,
                         width: "auto",
                         height: "auto"
                       }
@@ -467,7 +468,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-006fe535_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
+    inject("data-v-473fdecd_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" :alt=\"overlayItem.alt\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -512,8 +513,8 @@ var script$1 = {
         return {
           src: '',
           alt: '',
-          width: '200px',
-          height: 'auto',
+          thumbnailWidth: '200px',
+          thumbnailHeight: 'auto',
           thumbnail: '',
           autoplay: false,
           controls: true,
@@ -552,8 +553,8 @@ var script$1 = {
         item: {
           src: '',
           alt: '',
-          width: '200px',
-          height: 'auto',
+          thumbnailWidth: '200px',
+          thumbnailHeight: 'auto',
           thumbnail: '',
           autoplay: false,
           controls: true,
@@ -660,8 +661,8 @@ var __vue_render__$1 = function() {
               attrs: {
                 src: image.thumbnail,
                 alt: image.alt,
-                width: image.width,
-                height: image.height
+                width: image.thumbnailWidth,
+                height: image.thumbnailHeight
               }
             })
           ]
@@ -690,7 +691,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-26477a4e_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.width\"\r\n        :height=\"image.height\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+    inject("data-v-f065e5fe_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
diff --git a/dist/vue-silentbox.min.js b/dist/vue-silentbox.min.js
index fbaa85f..6fec90d 100644
--- a/dist/vue-silentbox.min.js
+++ b/dist/vue-silentbox.min.js
@@ -372,6 +372,7 @@ var VueSilentbox = (function (exports) {
                     : _c("img", {
                         attrs: {
                           src: _vm.overlayItem.src,
+                          alt: _vm.overlayItem.alt,
                           width: "auto",
                           height: "auto"
                         }
@@ -470,7 +471,7 @@ var VueSilentbox = (function (exports) {
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-006fe535_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
+      inject("data-v-473fdecd_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" :alt=\"overlayItem.alt\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
@@ -515,8 +516,8 @@ var VueSilentbox = (function (exports) {
           return {
             src: '',
             alt: '',
-            width: '200px',
-            height: 'auto',
+            thumbnailWidth: '200px',
+            thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
             controls: true,
@@ -555,8 +556,8 @@ var VueSilentbox = (function (exports) {
           item: {
             src: '',
             alt: '',
-            width: '200px',
-            height: 'auto',
+            thumbnailWidth: '200px',
+            thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
             controls: true,
@@ -663,8 +664,8 @@ var VueSilentbox = (function (exports) {
                 attrs: {
                   src: image.thumbnail,
                   alt: image.alt,
-                  width: image.width,
-                  height: image.height
+                  width: image.thumbnailWidth,
+                  height: image.thumbnailHeight
                 }
               })
             ]
@@ -693,7 +694,7 @@ var VueSilentbox = (function (exports) {
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-26477a4e_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.width\"\r\n        :height=\"image.height\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+      inject("data-v-f065e5fe_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/dist/vue-silentbox.umd.js b/dist/vue-silentbox.umd.js
index 1a6d0a0..ff398d4 100644
--- a/dist/vue-silentbox.umd.js
+++ b/dist/vue-silentbox.umd.js
@@ -375,6 +375,7 @@
                     : _c("img", {
                         attrs: {
                           src: _vm.overlayItem.src,
+                          alt: _vm.overlayItem.alt,
                           width: "auto",
                           height: "auto"
                         }
@@ -473,7 +474,7 @@
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-006fe535_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
+      inject("data-v-473fdecd_0", { source: ".silentbox-is-opened {\n  overflow: hidden;\n}\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n@keyframes pulsingNext {\n0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n}\n}\n@keyframes pulsingPrevious {\n0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n}\n75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n}\n100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n}\n}\n\n/*# sourceMappingURL=overlay.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/overlay.vue","overlay.vue"],"names":[],"mappings":"AAuMA;EACA,gBAAA;ACtMA;ADyMA;EACA,cAAA;EACA,aAAA;EACA,OAAA;EACA,eAAA;EACA,MAAA;EACA,YAAA;EACA,YAAA;ACtMA;ADiLA;EAwBA,+BAAA;EACA,2BAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACtMA;ADsKA;EAoCA,eAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;ACvMA;AD+JA;EA4CA,SAAA;EACA,eAAA;EACA,cAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;ACxMA;AD0MA;;EAEA,sBAjDA;EAkDA,SAAA;EACA,0CAAA;EACA,eAAA;EACA,cAAA;EACA,OAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;ACxMA;ADoIA;EAyEA,eAAA;EACA,YAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;AC1MA;AD4HA;EAkFA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,WA/EA;AC5HA;ADsHA;EAyFA,4BAAA;EACA,YAAA;EACA,WArFA;EAsFA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;EACA,2CAAA;EACA,aAAA;AC5MA;AD6MA;EAEA,oCAAA;EACA,aAAA;AC5MA;AD+MA;EACA,WApGA;EAqGA,eAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD8MA;EAEA,gBAhHA;EAiHA,WAAA;EACA,WAAA;EACA,QAAA;EACA,kBAAA;EACA,QAAA;EACA,sBAAA;EACA,WAAA;AC7MA;AD+MA;EACA,yBAAA;AC7MA;AD+MA;EACA,wBAAA;AC7MA;ADiNA;EAEA,mBAlIA;EAmIA,SAAA;EACA,UAAA;AChNA;ADuNA;EACA,2BAAA;EACA,0BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAA;ACrNA;ADsNA;EAEA,aAAA;EACA,qBArJA;AChEA;ADwNA;EACA,UAAA;EACA,QAAA;EACA,yBAAA;ACtNA;ADuNA;EAEA,sBAAA;EACA,mCAAA;EACA,+BAAA;ACtNA;ADyNA;EACA,WAAA;EACA,QAAA;EACA,yBAAA;ACvNA;ADwNA;EAEA,sBAAA;EACA,mCAAA;EACA,2BAAA;ACvNA;AD2NA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD0NA;EAGA,aAAA;AC1NA;ADgOA;AACA;IACA,kCAAA;IACA,WAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,cAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,WAAA;AC7NE;AACF;AD+NA;AACA;IACA,kCAAA;IACA,UAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,aAAA;AC7NE;AD+NF;IACA,kCAAA;IACA,UAAA;AC7NE;AACF;;AAEA,sCAAsC","file":"overlay.vue","sourcesContent":["<template>\r\n  <div id=\"silentbox-overlay\" v-if=\"visible\">\r\n    <div id=\"silentbox-overlay__background\" />\r\n\r\n    <div id=\"silentbox-overlay__content\" @click.stop=\"closeSilentboxOverlay\">\r\n      <div id=\"silentbox-overlay__embed\">\r\n        <div id=\"silentbox-overlay__container\">\r\n          <!-- embed video rendering -->\r\n          <iframe\r\n            v-if=\"isEmbedVideo(overlayItem.src)\"\r\n            :allow=\"['accelerometer;', overlayItem.autoplay + ';', 'encrypted-media;', 'gyroscope;', 'picture-in-picture']\"\r\n            :src=\"handleUrl(overlayItem.src)\"\r\n            frameborder=\"0\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            allowfullscreen\r\n          />\r\n          <!-- local video rendering -->\r\n          <div\r\n            v-else-if=\"isLocalVideo(overlayItem.src)\"\r\n            class=\"silentbox-video__frame\"\r\n          >\r\n            <video\r\n              :src=\"overlayItem.src\"\r\n              :autoplay=\"overlayItem.autoplay\"\r\n              controls\r\n              class=\"silentbox-video__embed\"\r\n            />\r\n          </div>\r\n          <!-- local/embed image rendering -->\r\n          <img v-else :src=\"overlayItem.src\" :alt=\"overlayItem.alt\" width=\"auto\" height=\"auto\" >\r\n        </div>\r\n        <p\r\n          id=\"silentbox-overlay__description\"\r\n          v-if=\"overlayItem.description\">\r\n            {{ overlayItem.description }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      id=\"silentbox-overlay__close-button\"\r\n      role=\"button\"\r\n      tabindex=\"3\"\r\n      @click.stop=\"closeSilentboxOverlay\"\r\n      @keyup.enter=\"closeSilentboxOverlay\"\r\n    >\r\n      <div class=\"icon\" />\r\n    </div>\r\n\r\n    <div id=\"silentbox-overlay__arrow-buttons\" v-if=\"totalItems > 1\">\r\n      <div\r\n        class=\"arrow arrow-previous\"\r\n        role=\"button\"\r\n        tabindex=\"2\"\r\n        @click.stop=\"moveToPreviousItem\"\r\n        @keyup.enter=\"moveToPreviousItem\"\r\n      />\r\n      <div\r\n        class=\"arrow arrow-next\"\r\n        role=\"button\"\r\n        tabindex=\"1\"\r\n        @click.stop=\"moveToNextItem\"\r\n        @keyup.enter=\"moveToNextItem\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport itemMixim from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'SilentboxOverlay',\r\n  mixins: [itemMixim],\r\n  props: {\r\n    overlayItem: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          description: ''\r\n        }\r\n      }\r\n    },\r\n    visible: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    totalItems: {\r\n      type: Number,\r\n      defautl: 1\r\n    }\r\n  },\r\n  methods: {\r\n    bodyScrolling () {\r\n      const body = document.body\r\n\r\n      // add class only if overlay should be visible\r\n      if (this.isVisible && !body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.add('silentbox-is-opened')\r\n      }\r\n\r\n      // remove class only if overlay should be hidden\r\n      if (!this.isVisible && body.classList.contains('silentbox-is-opened')) {\r\n        return body.classList.remove('silentbox-is-opened')\r\n      }\r\n    },\r\n    /**\r\n     * Move to next item.\r\n     */\r\n    moveToNextItem () {\r\n      this.$emit('requestNextSilentBoxItem')\r\n    },\r\n    /**\r\n     * Move to previous item.\r\n     */\r\n    moveToPreviousItem () {\r\n      this.$emit('requestPreviousSilentBoxItem')\r\n    },\r\n    /**\r\n     * Hide silentbox overlay.\r\n     */\r\n    closeSilentboxOverlay () {\r\n      this.$emit('closeSilentboxOverlay')\r\n    },\r\n    /**\r\n     * Search for known video services URLs and return their players if recognized.\r\n     * Unrecognized URLs are handled as images.\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    handleUrl (url) {\r\n      if (url.includes('youtube.com') || url.includes('youtu.be')) {\r\n        return this.parseYoutubeVideo(url)\r\n      } else if (url.includes('vimeo')) {\r\n        return this.parseVimeoVideo(url)\r\n      }\r\n      return url\r\n    },\r\n    /**\r\n     * Get embed URL for youtube.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseYoutubeVideo (url) {\r\n      let videoUrl = ''\r\n      const videoId = this.getYoutubeVideoId(url)\r\n\r\n      if (videoId) {\r\n        videoUrl = 'http://www.youtube.com/embed/' + videoId + '?rel=0'\r\n\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n        if (!this.overlayItem.controls) {\r\n          videoUrl += '&controls=0'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    },\r\n    /**\r\n     * Get embed URL for vimeo.com\r\n     *\r\n     * @param  {string} url\r\n     * @return {string}\r\n     */\r\n    parseVimeoVideo (url) {\r\n      let videoUrl = ''\r\n      const vimoId = /(vimeo(pro)?\\.com)\\/(?:[^\\d]+)?(\\d+)\\??(.*)?$/.exec(url)[3]\r\n\r\n      if (vimoId !== undefined) {\r\n        videoUrl = 'https://player.vimeo.com/video/' + vimoId + '?rel=0'\r\n        if (this.overlayItem.autoplay === 'autoplay') {\r\n          videoUrl += '&autoplay=1'\r\n        }\r\n      }\r\n\r\n      return videoUrl\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@mixin element($element) {\r\n    &__#{$element} {\r\n        @content;\r\n    }\r\n}\r\n\r\n// Colours used in silentbox\r\n$main:   #fff;\r\n$accent: #58e8d2;\r\n$bg: #000;\r\n\r\n.silentbox-is-opened {\r\n    overflow: hidden;\r\n}\r\n\r\n#silentbox-overlay {\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100vw;\r\n    z-index: 999;\r\n\r\n    @include element(background) {\r\n        background: rgba($bg, .75);\r\n        backdrop-filter: blur(20px);\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(content) {\r\n        cursor: default;\r\n        display: block;\r\n        height: 100%;\r\n        position: relative;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(embed) {\r\n        bottom: 0;\r\n        cursor: default;\r\n        display: block;\r\n        height: 80%;\r\n        left: 0;\r\n        margin: auto;\r\n        position: absolute;\r\n        right: 0;\r\n        top: -2.5rem;\r\n        width: 75%;\r\n\r\n        img,\r\n        iframe {\r\n            background-color: $bg;\r\n            bottom: 0;\r\n            box-shadow: 0 0 1.5rem rgba($bg, .45);\r\n            cursor: default;\r\n            display: block;\r\n            left: 0;\r\n            margin: auto;\r\n            max-height: 100%;\r\n            max-width: 100%;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n    }\r\n\r\n    @include element(container) {\r\n        cursor: default;\r\n        height: 100%;\r\n        margin: 0 0 1.5rem 0;\r\n        position: relative;\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    @include element(description) {\r\n        display: block;\r\n        padding-top: 1rem;\r\n        text-align: center;\r\n        color: $main;\r\n    }\r\n\r\n    @include element(close-button) {\r\n        background: rgba($bg, .0);\r\n        border: none;\r\n        color: $main;\r\n        cursor: pointer;\r\n        height: 2.5rem;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        transition: background-color 250ms ease-out;\r\n        width: 2.5rem;\r\n        &:hover,\r\n        &:focus {\r\n            background-color: rgba($bg, .5);\r\n            outline: none;\r\n        }\r\n\r\n        .icon {\r\n            color: $main;\r\n            cursor: pointer;\r\n            height: 1rem;\r\n            left: .7rem;\r\n            margin: 50% 50% 0 0;\r\n            position: absolute;\r\n            right: 0px;\r\n            top: -.5rem;\r\n            transition: 250ms ease;\r\n            width: 1rem;\r\n            &:before,\r\n            &:after {\r\n                background: $main;\r\n                content: \"\";\r\n                height: 2px;\r\n                left: 5%;\r\n                position: absolute;\r\n                top: 50%;\r\n                transition: 250ms ease;\r\n                width: 100%;\r\n            }\r\n            &:before {\r\n                transform: rotate(-45deg);\r\n            }\r\n            &:after {\r\n                transform: rotate(45deg);\r\n            }\r\n            &:hover,\r\n            &:focus {\r\n                &:before,\r\n                &:after {\r\n                    background: $accent;\r\n                    left: 25%;\r\n                    width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @include element(arrow-buttons) {\r\n        .arrow {\r\n            border-left: 2px solid $main;\r\n            border-top: 2px solid $main;\r\n            cursor: pointer;\r\n            height: 1.5rem;\r\n            position: absolute;\r\n            width: 1.5rem;\r\n            &:hover,\r\n            &:focus {\r\n                outline: none;\r\n                border-color: $accent;\r\n            }\r\n        }\r\n        .arrow-previous {\r\n            left: 2rem;\r\n            top: 50%;\r\n            transform: rotate(-45deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingPrevious;\r\n            }\r\n        }\r\n        .arrow-next {\r\n            right: 2rem;\r\n            top: 50%;\r\n            transform: rotate(135deg);\r\n            &:hover,\r\n            &:focus {\r\n                animation-duration: 1s;\r\n                animation-iteration-count: infinite;\r\n                animation-name: pulsingNext;\r\n            }\r\n        }\r\n    }\r\n    .silentbox-video__frame {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .silentbox-video__embed {\r\n      outline: none;\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        outline: none\r\n      }\r\n    }\r\n}\r\n\r\n// Animations\r\n@keyframes pulsingNext {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        right: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        right: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        right: 2rem;\r\n    }\r\n}\r\n@keyframes pulsingPrevious {\r\n    0%   {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n    25%  {\r\n        animation-timing-function: ease-in;\r\n        left: 1.75rem;\r\n    }\r\n    75%  {\r\n        animation-timing-function: ease-in;\r\n        left: 2.25rem;\r\n    }\r\n    100% {\r\n        animation-timing-function: ease-in;\r\n        left: 2rem;\r\n    }\r\n}\r\n</style>\r\n",".silentbox-is-opened {\n  overflow: hidden;\n}\n\n#silentbox-overlay {\n  display: block;\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: 999;\n}\n#silentbox-overlay__background {\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(20px);\n  cursor: default;\n  display: block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n#silentbox-overlay__content {\n  cursor: default;\n  display: block;\n  height: 100%;\n  position: relative;\n  width: 100%;\n}\n#silentbox-overlay__embed {\n  bottom: 0;\n  cursor: default;\n  display: block;\n  height: 80%;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: -2.5rem;\n  width: 75%;\n}\n#silentbox-overlay__embed img,\n#silentbox-overlay__embed iframe {\n  background-color: #000;\n  bottom: 0;\n  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.45);\n  cursor: default;\n  display: block;\n  left: 0;\n  margin: auto;\n  max-height: 100%;\n  max-width: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n#silentbox-overlay__container {\n  cursor: default;\n  height: 100%;\n  margin: 0 0 1.5rem 0;\n  position: relative;\n  text-align: center;\n  width: 100%;\n}\n#silentbox-overlay__description {\n  display: block;\n  padding-top: 1rem;\n  text-align: center;\n  color: #fff;\n}\n#silentbox-overlay__close-button {\n  background: rgba(0, 0, 0, 0);\n  border: none;\n  color: #fff;\n  cursor: pointer;\n  height: 2.5rem;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 250ms ease-out;\n  width: 2.5rem;\n}\n#silentbox-overlay__close-button:hover, #silentbox-overlay__close-button:focus {\n  background-color: rgba(0, 0, 0, 0.5);\n  outline: none;\n}\n#silentbox-overlay__close-button .icon {\n  color: #fff;\n  cursor: pointer;\n  height: 1rem;\n  left: 0.7rem;\n  margin: 50% 50% 0 0;\n  position: absolute;\n  right: 0px;\n  top: -0.5rem;\n  transition: 250ms ease;\n  width: 1rem;\n}\n#silentbox-overlay__close-button .icon:before, #silentbox-overlay__close-button .icon:after {\n  background: #fff;\n  content: \"\";\n  height: 2px;\n  left: 5%;\n  position: absolute;\n  top: 50%;\n  transition: 250ms ease;\n  width: 100%;\n}\n#silentbox-overlay__close-button .icon:before {\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__close-button .icon:after {\n  transform: rotate(45deg);\n}\n#silentbox-overlay__close-button .icon:hover:before, #silentbox-overlay__close-button .icon:hover:after, #silentbox-overlay__close-button .icon:focus:before, #silentbox-overlay__close-button .icon:focus:after {\n  background: #58e8d2;\n  left: 25%;\n  width: 50%;\n}\n#silentbox-overlay__arrow-buttons .arrow {\n  border-left: 2px solid #fff;\n  border-top: 2px solid #fff;\n  cursor: pointer;\n  height: 1.5rem;\n  position: absolute;\n  width: 1.5rem;\n}\n#silentbox-overlay__arrow-buttons .arrow:hover, #silentbox-overlay__arrow-buttons .arrow:focus {\n  outline: none;\n  border-color: #58e8d2;\n}\n#silentbox-overlay__arrow-buttons .arrow-previous {\n  left: 2rem;\n  top: 50%;\n  transform: rotate(-45deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-previous:hover, #silentbox-overlay__arrow-buttons .arrow-previous:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingPrevious;\n}\n#silentbox-overlay__arrow-buttons .arrow-next {\n  right: 2rem;\n  top: 50%;\n  transform: rotate(135deg);\n}\n#silentbox-overlay__arrow-buttons .arrow-next:hover, #silentbox-overlay__arrow-buttons .arrow-next:focus {\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-name: pulsingNext;\n}\n#silentbox-overlay .silentbox-video__frame {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n#silentbox-overlay .silentbox-video__embed {\n  outline: none;\n}\n#silentbox-overlay .silentbox-video__embed:active, #silentbox-overlay .silentbox-video__embed:focus, #silentbox-overlay .silentbox-video__embed:hover {\n  outline: none;\n}\n\n@keyframes pulsingNext {\n  0% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    right: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    right: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    right: 2rem;\n  }\n}\n@keyframes pulsingPrevious {\n  0% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n  25% {\n    animation-timing-function: ease-in;\n    left: 1.75rem;\n  }\n  75% {\n    animation-timing-function: ease-in;\n    left: 2.25rem;\n  }\n  100% {\n    animation-timing-function: ease-in;\n    left: 2rem;\n  }\n}\n\n/*# sourceMappingURL=overlay.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
@@ -518,8 +519,8 @@
           return {
             src: '',
             alt: '',
-            width: '200px',
-            height: 'auto',
+            thumbnailWidth: '200px',
+            thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
             controls: true,
@@ -558,8 +559,8 @@
           item: {
             src: '',
             alt: '',
-            width: '200px',
-            height: 'auto',
+            thumbnailWidth: '200px',
+            thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
             controls: true,
@@ -666,8 +667,8 @@
                 attrs: {
                   src: image.thumbnail,
                   alt: image.alt,
-                  width: image.width,
-                  height: image.height
+                  width: image.thumbnailWidth,
+                  height: image.thumbnailHeight
                 }
               })
             ]
@@ -696,7 +697,7 @@
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-26477a4e_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.width\"\r\n        :height=\"image.height\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          width: '200px',\r\n          height: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+      inject("data-v-f065e5fe_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAgKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;AC/JA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0,\r\n        totalItems: this.gallery.length || 1\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/tests/mixins/videoUrlDecoder.test.js b/tests/mixins/videoUrlDecoder.test.js
new file mode 100644
index 0000000..630c483
--- /dev/null
+++ b/tests/mixins/videoUrlDecoder.test.js
@@ -0,0 +1,14 @@
+import videoUrlDecoder from './../../src/mixins/videoUrlDecoder'
+
+describe('mixins/videoUrlDecoder', () => {
+  describe('methods:getYoutubeVideoId', () => {
+    test('it should return YouTube video ID', () => {
+      const mixin = videoUrlDecoder.methods.getYoutubeVideoId('https://www.youtube.com/watch?v=HSsqzzuGTPo')
+      expect(mixin).toEqual('HSsqzzuGTPo')
+    })
+    test('it should return Vimeo video ID', () => {
+      const mixin = videoUrlDecoder.methods.getVimeoVideoId('https://vimeo.com/336812660')
+      expect(mixin).toEqual('336812660')
+    })
+  })
+})