diff --git a/dist/vue-stories-instagram.esm.js b/dist/vue-stories-instagram.esm.js
index 003e2b4..112457b 100644
--- a/dist/vue-stories-instagram.esm.js
+++ b/dist/vue-stories-instagram.esm.js
@@ -651,11 +651,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-1dac044a_0", { source: "@charset \"UTF-8\";\n*[data-v-1dac044a] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-1dac044a] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-1dac044a] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-1dac044a] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-1dac044a] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-1dac044a] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-1dac044a],\n.story__source video[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header[data-v-1dac044a] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-1dac044a] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-1dac044a] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-1dac044a] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-1dac044a] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-1dac044a] {\n  display: none;\n}\n.story__body .user__image[data-v-1dac044a] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-1dac044a] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-1dac044a] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-1dac044a]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-1dac044a] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-1dac044a] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-1dac044a] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-1dac044a] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-1dac044a] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-1dac044a] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-1dac044a] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-1dac044a] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-1dac044a]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-1dac044a] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-1dac044a] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-1dac044a]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-66e23120_0", { source: "@charset \"UTF-8\";\n*[data-v-66e23120] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-66e23120] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-66e23120] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-66e23120] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-66e23120] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-66e23120] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-66e23120] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-66e23120] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-66e23120],\n.story__source video[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header[data-v-66e23120] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-66e23120] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-66e23120] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-66e23120] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-66e23120] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-66e23120] {\n  display: none;\n}\n.story__body .user__image[data-v-66e23120] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-66e23120] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-66e23120] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-66e23120]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-66e23120] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-66e23120] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-66e23120] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-66e23120] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-66e23120] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-66e23120] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-66e23120] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-66e23120] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-66e23120]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-66e23120] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-66e23120] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-66e23120]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: fill;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-1dac044a";
+  var __vue_scope_id__ = "data-v-66e23120";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-stories-instagram.min.js b/dist/vue-stories-instagram.min.js
index 4dfce10..18d15a8 100644
--- a/dist/vue-stories-instagram.min.js
+++ b/dist/vue-stories-instagram.min.js
@@ -654,11 +654,11 @@ var Stories = (function (exports) {
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-1dac044a_0", { source: "@charset \"UTF-8\";\n*[data-v-1dac044a] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-1dac044a] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-1dac044a] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-1dac044a] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-1dac044a] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-1dac044a] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-1dac044a],\n.story__source video[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header[data-v-1dac044a] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-1dac044a] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-1dac044a] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-1dac044a] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-1dac044a] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-1dac044a] {\n  display: none;\n}\n.story__body .user__image[data-v-1dac044a] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-1dac044a] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-1dac044a] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-1dac044a]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-1dac044a] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-1dac044a] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-1dac044a] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-1dac044a] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-1dac044a] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-1dac044a] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-1dac044a] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-1dac044a] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-1dac044a]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-1dac044a] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-1dac044a] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-1dac044a]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-66e23120_0", { source: "@charset \"UTF-8\";\n*[data-v-66e23120] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-66e23120] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-66e23120] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-66e23120] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-66e23120] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-66e23120] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-66e23120] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-66e23120] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-66e23120],\n.story__source video[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header[data-v-66e23120] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-66e23120] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-66e23120] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-66e23120] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-66e23120] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-66e23120] {\n  display: none;\n}\n.story__body .user__image[data-v-66e23120] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-66e23120] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-66e23120] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-66e23120]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-66e23120] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-66e23120] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-66e23120] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-66e23120] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-66e23120] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-66e23120] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-66e23120] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-66e23120] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-66e23120]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-66e23120] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-66e23120] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-66e23120]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: fill;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-1dac044a";
+    var __vue_scope_id__ = "data-v-66e23120";
     /* module identifier */
     var __vue_module_identifier__ = undefined;
     /* functional template */
diff --git a/dist/vue-stories-instagram.umd.js b/dist/vue-stories-instagram.umd.js
index 65a5ca9..0960574 100644
--- a/dist/vue-stories-instagram.umd.js
+++ b/dist/vue-stories-instagram.umd.js
@@ -657,11 +657,11 @@
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-1dac044a_0", { source: "@charset \"UTF-8\";\n*[data-v-1dac044a] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-1dac044a] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-1dac044a] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-1dac044a] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-1dac044a] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-1dac044a] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-1dac044a] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-1dac044a],\n.story__source video[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header[data-v-1dac044a] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-1dac044a] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-1dac044a] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-1dac044a] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-1dac044a] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-1dac044a] {\n  display: none;\n}\n.story__body .user__image[data-v-1dac044a] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-1dac044a] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-1dac044a] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-1dac044a]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-1dac044a]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-1dac044a] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-1dac044a] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-1dac044a] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-1dac044a] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-1dac044a] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-1dac044a] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-1dac044a] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-1dac044a] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-1dac044a] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-1dac044a] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-1dac044a]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-1dac044a] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-1dac044a] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-1dac044a]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-1dac044a] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-66e23120_0", { source: "@charset \"UTF-8\";\n*[data-v-66e23120] {\n  box-sizing: border-box;\n}\n.stories-wrapper[data-v-66e23120] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n.stories[data-v-66e23120] {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.story[data-v-66e23120] {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n.story[data-v-66e23120] {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n}\n.story__source[data-v-66e23120] {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-66e23120] {\n    width: 50vh;\n    height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-66e23120] {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n}\n}\n.story__source img[data-v-66e23120],\n.story__source video[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header[data-v-66e23120] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time[data-v-66e23120] {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.story__body[data-v-66e23120] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user[data-v-66e23120] {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n.story__body .user[data-v-66e23120] {\n    display: none;\n}\n}\n.story__body .user__name[data-v-66e23120] {\n  display: none;\n}\n.story__body .user__image[data-v-66e23120] {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img[data-v-66e23120] {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon[data-v-66e23120] {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120] {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n}\n}\n.story__icon[data-v-66e23120]:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n.story__icon[data-v-66e23120]:before {\n    content: none;\n}\n}\n.story__icon--prev[data-v-66e23120] {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-66e23120] {\n    left: 0;\n}\n}\n.story__icon--next[data-v-66e23120] {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-66e23120] {\n    right: 0;\n    transform: none;\n}\n}\n.user[data-v-66e23120] {\n  display: flex;\n  align-items: center;\n}\n.user__image[data-v-66e23120] {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img[data-v-66e23120] {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name[data-v-66e23120] {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n.time[data-v-66e23120] {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item[data-v-66e23120] {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item[data-v-66e23120]:last-child {\n  margin-right: 0;\n}\n.time__fill[data-v-66e23120] {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n.close[data-v-66e23120] {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close[data-v-66e23120]:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n@media screen and (min-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 60vh;\n}\n}\n@media screen and (max-width: 768px) {\n.img-style[data-v-66e23120] {\n    max-height: 70vh;\n}\n}\n\n/*# sourceMappingURL=Stories.vue.map */", map: {"version":3,"sources":["Stories.vue","/Users/mehmet/Desktop/a/vue-stories-instagram/src/components/Stories.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACuUhB;EACA,sBAAA;ADrUA;ACwUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADrUA;ACwUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADrUA;ACwUA;EACA,kBAAA;EACA,qDAAA;ADrUA;ACuUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;ADpUE;AACF;ACsUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;ADpUA;ACsUA;AATA;IAUA,WAAA;IACA,YAAA;ADnUE;AACF;ACqUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;ADlUE;AACF;ACoUA;;EAEA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;ADlUA;ACsUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADpUA;ACuUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADrUA;ACwUA;EACA,aAAA;EACA,mBAAA;ADtUA;ACyUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADvUA;ACyUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADvUA;ACyUA;AANA;IAOA,aAAA;ADtUE;AACF;ACyUA;EACA,aAAA;ADvUA;AC0UA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADxUA;AC0UA;EACA,yBAAA;EACA,mBAAA;ADxUA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;AD3UA;AC6UA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;AD1UE;AACF;AC4UA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;AD1UA;AC4UA;AAZA;IAaA,aAAA;ADzUE;AACF;AC4UA;EACA,WAAA;AD1UA;AC4UA;AAHA;IAIA,OAAA;ADzUE;AACF;AC4UA;EACA,YAAA;EACA,0CAAA;AD1UA;AC4UA;AAJA;IAKA,QAAA;IACA,eAAA;ADzUE;AACF;AC8UA;EACA,aAAA;EACA,mBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;AD3UA;AC6UA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;AD3UA;AC+UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;AD7UA;ACiVA;EACA,aAAA;EACA,mBAAA;AD9UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD9UA;ACgVA;EACA,eAAA;AD9UA;ACkVA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;ADhVA;ACoVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADjVA;ACmVA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;ADjVA;ACoVA;AACA;IACA,gBAAA;ADjVE;AACF;ACmVA;AACA;IACA,gBAAA;ADjVE;AACF;;AAEA,sCAAsC","file":"Stories.vue","sourcesContent":["@charset \"UTF-8\";\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n}\n@media screen and (max-width: 768px) {\n  .story {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n}\n.story__source {\n  position: relative;\n  border-radius: 16px;\n  background: #000000;\n  width: 414px;\n  height: 751px;\n  background-size: contain;\n  padding-top: 80px;\n}\n@media screen and (max-height: 768px) {\n  .story__source {\n    width: 50vh;\n    height: 90vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .story__source {\n    width: 100%;\n    height: auto;\n    flex: 1 1 auto;\n  }\n}\n.story__source img,\n.story__source video {\n  width: 100%;\n  height: 100%;\n  object-fit: fill;\n  display: block;\n}\n.story__header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 8px 11px;\n}\n.story__time {\n  font-size: 16px;\n  line-height: 20px;\n  color: #ffffff;\n}\n.story__top {\n  display: flex;\n  align-items: center;\n}\n.story__body {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.story__body .user {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n@media screen and (max-width: 768px) {\n  .story__body .user {\n    display: none;\n  }\n}\n.story__body .user__name {\n  display: none;\n}\n.story__body .user__image {\n  width: 140px;\n  height: 140px;\n  background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n  margin: 0;\n  padding: 5px;\n}\n.story__body .user__image img {\n  border: 5px solid #ffffff;\n  border-radius: 100%;\n}\n.story__icon {\n  width: 24px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 50px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n@media screen and (max-width: 768px) {\n  .story__icon {\n    top: 0;\n    bottom: 0;\n    transform: none;\n    width: 100px;\n    height: auto;\n    background: none;\n  }\n}\n.story__icon:before {\n  content: \"\";\n  position: absolute;\n  top: 8px;\n  left: 9px;\n  border: solid #323232;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transform: rotate(135deg);\n  border-radius: 1px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon:before {\n    content: none;\n  }\n}\n.story__icon--prev {\n  left: -35px;\n}\n@media screen and (max-width: 768px) {\n  .story__icon--prev {\n    left: 0;\n  }\n}\n.story__icon--next {\n  right: -35px;\n  transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n  .story__icon--next {\n    right: 0;\n    transform: none;\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n}\n.user__image {\n  width: 32px;\n  height: 32px;\n  border-radius: 100px;\n  overflow: hidden;\n  margin-right: 8px;\n}\n.user__image img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n}\n.user__name {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 18px;\n  color: #ffffff;\n  margin-right: 5px;\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n}\n.time__item {\n  position: relative;\n  width: 100%;\n  height: 2px;\n  margin-right: 4px;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n}\n.time__item:last-child {\n  margin-right: 0;\n}\n.time__fill {\n  position: absolute;\n  width: 100%;\n  background: #ffffff;\n  height: 2px;\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.close:after {\n  content: \"×\";\n  color: #ffffff;\n  font-weight: 100;\n  font-size: 35px;\n}\n\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n\n/*# sourceMappingURL=Stories.vue.map */","<template>\n  <div class=\"stories-wrapper\" id=\"storiesTemplateID\">\n    <div @click=\"closeStories\" class=\"close\"></div>\n    <div class=\"stories\" @click.self=\"closeStories\">\n      <div\n        v-for=\"(story, index) in stories\"\n        :key=\"index\"\n        class=\"story\"\n        :style=\"\n          index === indexSelected\n            ? `transform: translate(0px)`\n            : `transform: translate(${calculateTransform(\n                index\n              )}px) scale(0.3);cursor:pointer;`\n        \"\n        @click=\"index !== indexSelected ? selectSlide(index) : ''\"\n      >\n        <div\n          class=\"story__source\"\n          @mouseenter=\"!isPaused ? pauseStory($event) : null\"\n          @mouseleave=\"isPaused ? playStory($event) : null\"\n          @click=\"isPaused ? playStory($event) : pauseStory($event)\"\n        >\n          <video\n            :id=\"getSrc(story, index).url\"\n            v-if=\"getSrc(story, index).type === 'video'\"\n            :src=\"getSrc(story, index).url\"\n            autoplay\n          ></video>\n          <img\n            v-else\n            :src=\"getSrc(story, index).url\"\n            alt=\"\"\n            class=\"img-style\"\n          />\n          <div class=\"story__header\" v-if=\"index === indexSelected\">\n            <div class=\"time\">\n              <div\n                class=\"time__item\"\n                v-for=\"(elm, index) in story.images.length\"\n                :key=\"index\"\n              >\n                <div\n                  class=\"time__fill\"\n                  :style=\"\n                    index === key\n                      ? `width: ${percent}%`\n                      : key > index\n                      ? `width:100%`\n                      : `width:0%`\n                  \"\n                ></div>\n              </div>\n            </div>\n            <div class=\"story__top\">\n              <div class=\"user\">\n                <div class=\"user__image\">\n                  <img :src=\"story.picture\" alt=\"\" />\n                </div>\n                <div class=\"user__name\">\n                  {{ story.username }}\n                </div>\n              </div>\n              <div class=\"story__time\">{{ story.time }}</div>\n            </div>\n          </div>\n          <div class=\"story__body\">\n            <div class=\"user\" v-if=\"index !== indexSelected\">\n              <div\n                class=\"user__image\"\n                :style=\"\n                  getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''\n                \"\n              >\n                <img :src=\"story.picture\" alt=\"\" />\n              </div>\n              <div class=\"user__name\">\n                {{ story.username }}\n              </div>\n            </div>\n            <slot\n              v-if=\"showInnerContent && index === indexSelected\"\n              name=\"innerContent\"\n              :story=\"story\"\n            ></slot>\n          </div>\n        </div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--prev\"\n          @click=\"prev(index)\"\n        ></div>\n        <div\n          v-if=\"index === indexSelected\"\n          class=\"story__icon story__icon--next\"\n          @click=\"next(index)\"\n        ></div>\n        <slot\n          v-if=\"showOuterContent && index === indexSelected\"\n          name=\"outerContent\"\n          :story=\"story\"\n        ></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Stories\",\n  props: {\n    stories: {\n      type: Array,\n      required: true,\n    },\n    duration: {\n      type: Number,\n      default: 3000,\n    },\n    currentIndex: {\n      type: Number,\n      default: 0,\n    },\n    showInnerContent: {\n      type: Boolean,\n      default: false,\n    },\n    showOuterContent: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: () => ({\n    indexSelected: 0,\n    difference: 0,\n    key: 0,\n    percent: 0,\n    timer: 0,\n    progress: 0,\n    interval: 0,\n    isPaused: false,\n    newDur: 0,\n    pausePer: 0,\n  }),\n  computed: {\n    isAllStoriesEnd() {\n      return (\n        this.indexSelected >= this.stories.length - 1 &&\n        this.isCurrentAllImagesEnd\n      );\n    },\n    isCurrentAllImagesEnd() {\n      return this.key >= this.stories[this.indexSelected].images.length - 1;\n    },\n  },\n  methods: {\n    getSrc(story, index) {\n      const viewedIndex = this.getLastViewedIndex(story);\n      return index === this.indexSelected\n        ? {\n            url: story.images[this.key].url,\n            type: story.images[this.key].type,\n          }\n        : {\n            url: story.images[viewedIndex].url,\n            type: story.images[viewedIndex].type,\n          };\n    },\n    getNotViewedIndex(story) {\n      return story.images.findIndex((item) => !item.viewed);\n    },\n    getLastViewedIndex(story) {\n      const keyIndex = this.getNotViewedIndex(story);\n      const index = story.images.length - 1;\n      return keyIndex === -1 ? index : keyIndex;\n    },\n    selectSlide(index) {\n      this.isPaused = false;\n      this.difference += this.indexSelected - index;\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.indexSelected = index;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.reset();\n    },\n    onAllStoriesEnd() {\n      this.difference = 0;\n      this.indexSelected = 0;\n      this.key = 0;\n      this.$emit(\"allStoriesEnd\");\n    },\n    onCurrentAllImagesEnd(index) {\n      this.difference += index - (index + 1);\n      this.stopVideo(this.stories[this.indexSelected].images[this.key].url);\n      this.stories[index].images[this.key].viewed = true;\n      this.indexSelected++;\n      this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n      this.$emit(\"сurrentAllImagesEnd\", index);\n    },\n    onCurrentImageEnd(index) {\n      this.stories[index].images[this.key].viewed = true;\n      this.$emit(\"сurrentImageEnd\", this.key);\n      this.key++;\n    },\n    next(index) {\n      this.isPaused = false;\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        setTimeout(() => {\n          this.onCurrentAllImagesEnd(index);\n        });\n      } else {\n        this.stories[this.indexSelected].images[this.key].viewed = true;\n        this.key++;\n      }\n      this.reset();\n    },\n    prev(index) {\n      this.isPaused = false;\n      if (this.indexSelected <= 0 && this.key <= 0) {\n        this.key = 0;\n      } else if (this.key <= 0) {\n        // Without delay\n        setTimeout(() => {\n          this.difference += index - (index - 1);\n          this.indexSelected--;\n          this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);\n        });\n      } else {\n        this.key--;\n        this.stories[this.indexSelected].images[this.key].viewed = false;\n      }\n      this.reset();\n    },\n    autoPlay() {\n      if (this.isAllStoriesEnd) {\n        this.onAllStoriesEnd();\n      } else if (this.isCurrentAllImagesEnd) {\n        this.onCurrentAllImagesEnd(this.indexSelected);\n      } else {\n        this.onCurrentImageEnd(this.indexSelected);\n      }\n      this.reset();\n    },\n    play() {\n      this.timer = new Date().getTime();\n      this.progress = setInterval(() => {\n        // forward\n        let time = new Date().getTime();\n        if (this.newDur > 0) {\n          this.percent =\n            this.pausePer +\n            Math.floor((100 * (time - this.timer)) / this.duration);\n        } else {\n          this.percent = Math.floor(\n            (100 * (time - this.timer)) / this.duration\n          );\n        }\n      }, this.duration / 100);\n      if (this.newDur > 0) {\n        this.interval = setInterval(this.autoPlay, this.newDur);\n      } else {\n        this.interval = setInterval(this.autoPlay, this.duration);\n      }\n    },\n    reset() {\n      this.percent = 0;\n      clearInterval(this.interval);\n      clearInterval(this.progress);\n      this.newDur = 0;\n      this.play();\n    },\n    pauseStory(event) {\n      if (event) {\n        this.toggleVideo(\"pause\", event);\n      }\n      this.isPaused = true;\n      this.pausePer = this.percent;\n      clearInterval(this.progress);\n      clearInterval(this.interval);\n      this.newDur = this.duration - (this.pausePer * this.duration) / 100;\n    },\n    playStory(event) {\n      if (event) {\n        this.toggleVideo(\"play\", event);\n      }\n      this.isPaused = false;\n      this.play();\n    },\n    toggleVideo(type, event) {\n      const video = document.getElementById(event.target.id);\n      if (video) {\n        video[type]();\n      }\n    },\n    stopVideo(id) {\n      const video = document.getElementById(id);\n      if (video) {\n        video.pause();\n        video.currentTime = 0;\n      }\n    },\n    calculateTransform(index) {\n      if (\n        this.indexSelected - index === -1 ||\n        this.indexSelected - index === 1\n      ) {\n        return 315 * (index + this.difference);\n      }\n      if (index > this.indexSelected) {\n        return (315 + 315 * (index + this.difference)) * 0.5;\n      } else {\n        return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;\n      }\n    },\n    closeStories() {\n      this.$emit(\"closeStories\");\n    },\n  },\n  mounted() {\n    this.play();\n    this.selectSlide(this.currentIndex);\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n* {\n  box-sizing: border-box;\n}\n\n.stories-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(16, 16, 16, 0.98);\n  font-family: sans-serif;\n}\n\n.stories {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.story {\n  position: absolute;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__source {\n    position: relative;\n    border-radius: 16px;\n    background: #000000;\n    width: 414px;\n    height: 751px;\n    background-size: contain;\n    padding-top: 80px;\n\n    @media screen and (max-height: 768px) {\n      width: 50vh;\n      height: 90vh;\n    }\n\n    @media screen and (max-width: 768px) {\n      width: 100%;\n      height: auto;\n      flex: 1 1 auto;\n    }\n\n    img,\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: fill;\n      display: block;\n    }\n  }\n\n  &__header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding: 8px 11px;\n  }\n\n  &__time {\n    font-size: 16px;\n    line-height: 20px;\n    color: #ffffff;\n  }\n\n  &__top {\n    display: flex;\n    align-items: center;\n  }\n\n  &__body {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    .user {\n      position: absolute;\n      bottom: 30px;\n      left: 50%;\n      transform: translateX(-50%);\n\n      @media screen and (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    .user__name {\n      display: none;\n    }\n\n    .user__image {\n      width: 140px;\n      height: 140px;\n      background: linear-gradient(180deg, #4c7cf6 0%, #6200c3 100%);\n      margin: 0;\n      padding: 5px;\n\n      img {\n        border: 5px solid #ffffff;\n        border-radius: 100%;\n      }\n    }\n  }\n\n  &__icon {\n    width: 24px;\n    height: 24px;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 50px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n\n    @media screen and (max-width: 768px) {\n      top: 0;\n      bottom: 0;\n      transform: none;\n      width: 100px;\n      height: auto;\n      background: none;\n    }\n\n    &:before {\n      content: \"\";\n      position: absolute;\n      top: 8px;\n      left: 9px;\n      border: solid #323232;\n      border-width: 0 2px 2px 0;\n      display: inline-block;\n      padding: 3px;\n      transform: rotate(135deg);\n      border-radius: 1px;\n\n      @media screen and (max-width: 768px) {\n        content: none;\n      }\n    }\n\n    &--prev {\n      left: -35px;\n\n      @media screen and (max-width: 768px) {\n        left: 0;\n      }\n    }\n\n    &--next {\n      right: -35px;\n      transform: translateY(-50%) rotate(180deg);\n\n      @media screen and (max-width: 768px) {\n        right: 0;\n        transform: none;\n      }\n    }\n  }\n}\n\n.user {\n  display: flex;\n  align-items: center;\n\n  &__image {\n    width: 32px;\n    height: 32px;\n    border-radius: 100px;\n    overflow: hidden;\n    margin-right: 8px;\n\n    img {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n  }\n\n  &__name {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 18px;\n    color: #ffffff;\n    margin-right: 5px;\n  }\n}\n\n.time {\n  display: flex;\n  margin-bottom: 10px;\n\n  &__item {\n    position: relative;\n    width: 100%;\n    height: 2px;\n    margin-right: 4px;\n    background: rgba(255, 255, 255, 0.5);\n    border-radius: 4px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  &__fill {\n    position: absolute;\n    width: 100%;\n    background: #ffffff;\n    height: 2px;\n  }\n}\n\n.close {\n  position: absolute;\n  width: 50px;\n  height: 50px;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &:after {\n    content: \"\\00d7\";\n    color: #ffffff;\n    font-weight: 100;\n    font-size: 35px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .img-style {\n    max-height: 60vh;\n  }\n}\n@media screen and (max-width: 768px) {\n  .img-style {\n    max-height: 70vh;\n  }\n}\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-1dac044a";
+    var __vue_scope_id__ = "data-v-66e23120";
     /* module identifier */
     var __vue_module_identifier__ = undefined;
     /* functional template */
diff --git a/src/components/Stories.vue b/src/components/Stories.vue
index a9df8b1..c38ab17 100644
--- a/src/components/Stories.vue
+++ b/src/components/Stories.vue
@@ -381,7 +381,7 @@ export default {
     video {
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: fill;
       display: block;
     }
   }