From 9190246531657fc9e1edb75771bd48f0c0d469d6 Mon Sep 17 00:00:00 2001 From: Mehmet Dilmen Date: Fri, 12 Aug 2022 16:02:27 +0300 Subject: [PATCH 01/48] added hover --- src/components/Stories.vue | 179 +++-- yarn.lock | 1447 ++++++++++++++++++++++++++++++++++++ 2 files changed, 1553 insertions(+), 73 deletions(-) create mode 100644 yarn.lock diff --git a/src/components/Stories.vue b/src/components/Stories.vue index 4056488..9d1af15 100644 --- a/src/components/Stories.vue +++ b/src/components/Stories.vue @@ -1,36 +1,43 @@ \n"]}, media: undefined }); + + }; + /* scoped */ + var __vue_scope_id__ = "data-v-144b57ff"; + /* module identifier */ + var __vue_module_identifier__ = undefined; + /* functional template */ + var __vue_is_functional_template__ = false; + /* style inject SSR */ + + /* style inject shadow dom */ + + + + var __vue_component__ = /*#__PURE__*/normalizeComponent( + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, + __vue_inject_styles__, + __vue_script__, + __vue_scope_id__, + __vue_is_functional_template__, + __vue_module_identifier__, + false, + createInjector, + undefined, + undefined + ); + +function install(Vue) { + if (install.installed) { return; } + install.installed = true; + Vue.component('Stories', __vue_component__); +} + +var plugin = { + install: install +}; + + +var GlobalVue = null; +if (typeof window !== 'undefined') { + GlobalVue = window.Vue; +} else if (typeof global !== 'undefined') { + GlobalVue = global.Vue; +} +if (GlobalVue) { + GlobalVue.use(plugin); +} + +export default __vue_component__; +export { install }; diff --git a/dist/vue-stories-instagram.min.js b/dist/vue-stories-instagram.min.js new file mode 100644 index 0000000..aabfae2 --- /dev/null +++ b/dist/vue-stories-instagram.min.js @@ -0,0 +1,709 @@ +var Stories = (function (exports) { + 'use strict'; + + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + + var script = { + name: "Stories", + props: { + stories: { + type: Array, + required: true, + }, + duration: { + type: Number, + default: 3000, + }, + currentIndex: { + type: Number, + default: 0, + }, + showInnerContent: { + type: Boolean, + default: false, + }, + showOuterContent: { + type: Boolean, + default: false, + }, + }, + data: function () { return ({ + indexSelected: 0, + difference: 0, + key: 0, + percent: 0, + timer: 0, + progress: 0, + interval: 0, + isPaused: false, + newDur: 0, + pausePer: 0, + }); }, + computed: { + isAllStoriesEnd: function isAllStoriesEnd() { + return ( + this.indexSelected >= this.stories.length - 1 && + this.isCurrentAllImagesEnd + ); + }, + isCurrentAllImagesEnd: function isCurrentAllImagesEnd() { + return this.key >= this.stories[this.indexSelected].images.length - 1; + }, + }, + methods: { + getSrc: function getSrc(story, index) { + var viewedIndex = this.getLastViewedIndex(story); + return index === this.indexSelected + ? { + url: story.images[this.key].url, + type: story.images[this.key].type, + } + : { + url: story.images[viewedIndex].url, + type: story.images[viewedIndex].type, + }; + }, + getNotViewedIndex: function getNotViewedIndex(story) { + return story.images.findIndex(function (item) { return !item.viewed; }); + }, + getLastViewedIndex: function getLastViewedIndex(story) { + var keyIndex = this.getNotViewedIndex(story); + var index = story.images.length - 1; + return keyIndex === -1 ? index : keyIndex; + }, + selectSlide: function selectSlide(index) { + this.isPaused = false; + this.difference += this.indexSelected - index; + this.stopVideo(this.stories[this.indexSelected].images[this.key].url); + this.indexSelected = index; + this.key = this.getLastViewedIndex(this.stories[this.indexSelected]); + this.reset(); + }, + onAllStoriesEnd: function onAllStoriesEnd() { + this.difference = 0; + this.indexSelected = 0; + this.key = 0; + this.$emit("allStoriesEnd"); + }, + onCurrentAllImagesEnd: function onCurrentAllImagesEnd(index) { + this.difference += index - (index + 1); + this.stopVideo(this.stories[this.indexSelected].images[this.key].url); + this.stories[index].images[this.key].viewed = true; + this.indexSelected++; + this.key = this.getLastViewedIndex(this.stories[this.indexSelected]); + this.$emit("сurrentAllImagesEnd", index); + }, + onCurrentImageEnd: function onCurrentImageEnd(index) { + this.stories[index].images[this.key].viewed = true; + this.$emit("сurrentImageEnd", this.key); + this.key++; + }, + next: function next(index) { + var this$1 = this; + + this.isPaused = false; + if (this.isAllStoriesEnd) { + this.onAllStoriesEnd(); + } else if (this.isCurrentAllImagesEnd) { + setTimeout(function () { + this$1.onCurrentAllImagesEnd(index); + }); + } else { + this.stories[this.indexSelected].images[this.key].viewed = true; + this.key++; + } + this.reset(); + }, + prev: function prev(index) { + var this$1 = this; + + this.isPaused = false; + if (this.indexSelected <= 0 && this.key <= 0) { + this.key = 0; + } else if (this.key <= 0) { + // Without delay + setTimeout(function () { + this$1.difference += index - (index - 1); + this$1.indexSelected--; + this$1.key = this$1.getLastViewedIndex(this$1.stories[this$1.indexSelected]); + }); + } else { + this.key--; + this.stories[this.indexSelected].images[this.key].viewed = false; + } + this.reset(); + }, + autoPlay: function autoPlay() { + if (this.isAllStoriesEnd) { + this.onAllStoriesEnd(); + } else if (this.isCurrentAllImagesEnd) { + this.onCurrentAllImagesEnd(this.indexSelected); + } else { + this.onCurrentImageEnd(this.indexSelected); + } + this.reset(); + }, + play: function play() { + var this$1 = this; + + this.timer = new Date().getTime(); + this.progress = setInterval(function () { + // forward + var time = new Date().getTime(); + if (this$1.newDur > 0) { + this$1.percent = + this$1.pausePer + + Math.floor((100 * (time - this$1.timer)) / this$1.duration); + } else { + this$1.percent = Math.floor( + (100 * (time - this$1.timer)) / this$1.duration + ); + } + }, this.duration / 100); + if (this.newDur > 0) { + this.interval = setInterval(this.autoPlay, this.newDur); + } else { + this.interval = setInterval(this.autoPlay, this.duration); + } + }, + reset: function reset() { + this.percent = 0; + clearInterval(this.interval); + clearInterval(this.progress); + this.newDur = 0; + this.play(); + }, + pauseStory: function pauseStory(event) { + if (event) { + this.toggleVideo("pause", event); + } + this.isPaused = true; + this.pausePer = this.percent; + clearInterval(this.progress); + clearInterval(this.interval); + this.newDur = this.duration - (this.pausePer * this.duration) / 100; + }, + playStory: function playStory(event) { + if (event) { + this.toggleVideo("play", event); + } + this.isPaused = false; + this.play(); + }, + toggleVideo: function toggleVideo(type, event) { + var video = document.getElementById(event.target.id); + if (video) { + video[type](); + } + }, + stopVideo: function stopVideo(id) { + var video = document.getElementById(id); + if (video) { + video.pause(); + video.currentTime = 0; + } + }, + calculateTransform: function calculateTransform(index) { + if ( + this.indexSelected - index === -1 || + this.indexSelected - index === 1 + ) { + return 315 * (index + this.difference); + } + if (index > this.indexSelected) { + return (315 + 315 * (index + this.difference)) * 0.5; + } else { + return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1; + } + }, + closeStories: function closeStories() { + this.$emit("closeStories"); + }, + }, + mounted: function mounted() { + this.play(); + this.selectSlide(this.currentIndex); + }, + }; + + function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { + if (typeof shadowMode !== 'boolean') { + createInjectorSSR = createInjector; + createInjector = shadowMode; + shadowMode = false; + } + // Vue.extend constructor export interop. + var options = typeof script === 'function' ? script.options : script; + // render functions + if (template && template.render) { + options.render = template.render; + options.staticRenderFns = template.staticRenderFns; + options._compiled = true; + // functional template + if (isFunctionalTemplate) { + options.functional = true; + } + } + // scopedId + if (scopeId) { + options._scopeId = scopeId; + } + var hook; + if (moduleIdentifier) { + // server build + hook = function (context) { + // 2.3 injection + context = + context || // cached call + (this.$vnode && this.$vnode.ssrContext) || // stateful + (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional + // 2.2 with runInNewContext: true + if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { + context = __VUE_SSR_CONTEXT__; + } + // inject component styles + if (style) { + style.call(this, createInjectorSSR(context)); + } + // register component module identifier for async chunk inference + if (context && context._registeredComponents) { + context._registeredComponents.add(moduleIdentifier); + } + }; + // used by ssr in case component is cached and beforeCreate + // never gets called + options._ssrRegister = hook; + } + else if (style) { + hook = shadowMode + ? function (context) { + style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); + } + : function (context) { + style.call(this, createInjector(context)); + }; + } + if (hook) { + if (options.functional) { + // register for functional component in vue file + var originalRender = options.render; + options.render = function renderWithStyleInjection(h, context) { + hook.call(context); + return originalRender(h, context); + }; + } + else { + // inject component registration as beforeCreate hook + var existing = options.beforeCreate; + options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; + } + } + return script; + } + + var isOldIE = typeof navigator !== 'undefined' && + /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); + function createInjector(context) { + return function (id, style) { return addStyle(id, style); }; + } + var HEAD; + var styles = {}; + function addStyle(id, css) { + var group = isOldIE ? css.media || 'default' : id; + var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); + if (!style.ids.has(id)) { + style.ids.add(id); + var code = css.source; + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; + // http://stackoverflow.com/a/26603875 + code += + '\n/*# sourceMappingURL=data:application/json;base64,' + + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + + ' */'; + } + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) + { style.element.setAttribute('media', css.media); } + if (HEAD === undefined) { + HEAD = document.head || document.getElementsByTagName('head')[0]; + } + HEAD.appendChild(style.element); + } + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles + .filter(Boolean) + .join('\n'); + } + else { + var index = style.ids.size - 1; + var textNode = document.createTextNode(code); + var nodes = style.element.childNodes; + if (nodes[index]) + { style.element.removeChild(nodes[index]); } + if (nodes.length) + { style.element.insertBefore(textNode, nodes[index]); } + else + { style.element.appendChild(textNode); } + } + } + } + + /* script */ + var __vue_script__ = script; + + /* template */ + var __vue_render__ = function () { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { staticClass: "stories-wrapper", attrs: { id: "storiesTemplateID" } }, + [ + _c("div", { staticClass: "close", on: { click: _vm.closeStories } }), + _vm._v(" "), + _c( + "div", + { + staticClass: "stories", + on: { + click: function ($event) { + if ($event.target !== $event.currentTarget) { + return null + } + return _vm.closeStories.apply(null, arguments) + }, + }, + }, + _vm._l(_vm.stories, function (story, index) { + return _c( + "div", + { + key: index, + staticClass: "story", + style: + index === _vm.indexSelected + ? "transform: translate(0px)" + : "transform: translate(" + + _vm.calculateTransform(index) + + "px) scale(0.3);cursor:pointer;", + on: { + click: function ($event) { + index !== _vm.indexSelected ? _vm.selectSlide(index) : ""; + }, + }, + }, + [ + _c( + "div", + { + staticClass: "story__source", + on: { + mouseenter: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + mouseleave: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + click: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + }, + }, + [ + _vm.getSrc(story, index).type === "video" + ? _c("video", { + attrs: { + id: _vm.getSrc(story, index).url, + src: _vm.getSrc(story, index).url, + autoplay: "", + }, + }) + : _c("img", { + attrs: { src: _vm.getSrc(story, index).url, alt: "" }, + }), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { staticClass: "story__header" }, [ + _c( + "div", + { staticClass: "time" }, + _vm._l(story.images.length, function (elm, index) { + return _c( + "div", + { key: index, staticClass: "time__item" }, + [ + _c("div", { + staticClass: "time__fill", + style: + index === _vm.key + ? "width: " + _vm.percent + "%" + : _vm.key > index + ? "width:100%" + : "width:0%", + }) ] + ) + }), + 0 + ), + _vm._v(" "), + _c("div", { staticClass: "story__top" }, [ + _c("div", { staticClass: "user" }, [ + _c("div", { staticClass: "user__image" }, [ + _c("img", { + attrs: { src: story.picture, alt: "" }, + }) ]), + _vm._v(" "), + _c("div", { staticClass: "user__name" }, [ + _vm._v( + "\n " + + _vm._s(story.username) + + "\n " + ) ]) ]), + _vm._v(" "), + _c("div", { staticClass: "story__time" }, [ + _vm._v(_vm._s(story.time)) ]) ]) ]) + : _vm._e(), + _vm._v(" "), + _c( + "div", + { staticClass: "story__body" }, + [ + index !== _vm.indexSelected + ? _c("div", { staticClass: "user" }, [ + _c( + "div", + { + staticClass: "user__image", + style: + _vm.getNotViewedIndex(story) === -1 + ? "background: #FFFFFF" + : "", + }, + [ + _c("img", { + attrs: { src: story.picture, alt: "" }, + }) ] + ), + _vm._v(" "), + _c("div", { staticClass: "user__name" }, [ + _vm._v( + "\n " + + _vm._s(story.username) + + "\n " + ) ]) ]) + : _vm._e(), + _vm._v(" "), + _vm.showInnerContent && index === _vm.indexSelected + ? _vm._t("innerContent", null, { story: story }) + : _vm._e() ], + 2 + ) ] + ), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { + staticClass: "story__icon story__icon--prev", + on: { + click: function ($event) { + return _vm.prev(index) + }, + }, + }) + : _vm._e(), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { + staticClass: "story__icon story__icon--next", + on: { + click: function ($event) { + return _vm.next(index) + }, + }, + }) + : _vm._e(), + _vm._v(" "), + _vm.showOuterContent && index === _vm.indexSelected + ? _vm._t("outerContent", null, { story: story }) + : _vm._e() ], + 2 + ) + }), + 0 + ) ] + ) + }; + var __vue_staticRenderFns__ = []; + __vue_render__._withStripped = true; + + /* style */ + var __vue_inject_styles__ = function (inject) { + if (!inject) { return } + inject("data-v-144b57ff_0", { source: "@charset \"UTF-8\";\n*[data-v-144b57ff] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-144b57ff] {\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-144b57ff] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-144b57ff] {\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-144b57ff] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-144b57ff] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 50vh;\n height: 90vh;\n background-size: contain;\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-144b57ff] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-144b57ff],\n.story__source video[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-144b57ff] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-144b57ff] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-144b57ff] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-144b57ff] {\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-144b57ff] {\n display: none;\n}\n}\n.story__body .user__name[data-v-144b57ff] {\n display: none;\n}\n.story__body .user__image[data-v-144b57ff] {\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-144b57ff] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-144b57ff] {\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-144b57ff] {\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-144b57ff]: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-144b57ff]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-144b57ff] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-144b57ff] {\n left: 0;\n}\n}\n.story__icon--next[data-v-144b57ff] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-144b57ff] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-144b57ff] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-144b57ff] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-144b57ff] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-144b57ff] {\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-144b57ff]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-144b57ff] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-144b57ff] {\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-144b57ff]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AD/TA;ACiUA;AARA;IASA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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: 50vh;\n height: 90vh;\n background-size: contain;\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + + }; + /* scoped */ + var __vue_scope_id__ = "data-v-144b57ff"; + /* module identifier */ + var __vue_module_identifier__ = undefined; + /* functional template */ + var __vue_is_functional_template__ = false; + /* style inject SSR */ + + /* style inject shadow dom */ + + + + var __vue_component__ = /*#__PURE__*/normalizeComponent( + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, + __vue_inject_styles__, + __vue_script__, + __vue_scope_id__, + __vue_is_functional_template__, + __vue_module_identifier__, + false, + createInjector, + undefined, + undefined + ); + + function install(Vue) { + if (install.installed) { return; } + install.installed = true; + Vue.component('Stories', __vue_component__); + } + + var plugin = { + install: install + }; + + + var GlobalVue = null; + if (typeof window !== 'undefined') { + GlobalVue = window.Vue; + } else if (typeof global !== 'undefined') { + GlobalVue = global.Vue; + } + if (GlobalVue) { + GlobalVue.use(plugin); + } + + exports.default = __vue_component__; + exports.install = install; + + return exports; + +}({})); diff --git a/dist/vue-stories-instagram.umd.js b/dist/vue-stories-instagram.umd.js new file mode 100644 index 0000000..5ebe796 --- /dev/null +++ b/dist/vue-stories-instagram.umd.js @@ -0,0 +1,712 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (global = global || self, factory(global.Stories = {})); +}(this, (function (exports) { 'use strict'; + + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + + var script = { + name: "Stories", + props: { + stories: { + type: Array, + required: true, + }, + duration: { + type: Number, + default: 3000, + }, + currentIndex: { + type: Number, + default: 0, + }, + showInnerContent: { + type: Boolean, + default: false, + }, + showOuterContent: { + type: Boolean, + default: false, + }, + }, + data: function () { return ({ + indexSelected: 0, + difference: 0, + key: 0, + percent: 0, + timer: 0, + progress: 0, + interval: 0, + isPaused: false, + newDur: 0, + pausePer: 0, + }); }, + computed: { + isAllStoriesEnd: function isAllStoriesEnd() { + return ( + this.indexSelected >= this.stories.length - 1 && + this.isCurrentAllImagesEnd + ); + }, + isCurrentAllImagesEnd: function isCurrentAllImagesEnd() { + return this.key >= this.stories[this.indexSelected].images.length - 1; + }, + }, + methods: { + getSrc: function getSrc(story, index) { + var viewedIndex = this.getLastViewedIndex(story); + return index === this.indexSelected + ? { + url: story.images[this.key].url, + type: story.images[this.key].type, + } + : { + url: story.images[viewedIndex].url, + type: story.images[viewedIndex].type, + }; + }, + getNotViewedIndex: function getNotViewedIndex(story) { + return story.images.findIndex(function (item) { return !item.viewed; }); + }, + getLastViewedIndex: function getLastViewedIndex(story) { + var keyIndex = this.getNotViewedIndex(story); + var index = story.images.length - 1; + return keyIndex === -1 ? index : keyIndex; + }, + selectSlide: function selectSlide(index) { + this.isPaused = false; + this.difference += this.indexSelected - index; + this.stopVideo(this.stories[this.indexSelected].images[this.key].url); + this.indexSelected = index; + this.key = this.getLastViewedIndex(this.stories[this.indexSelected]); + this.reset(); + }, + onAllStoriesEnd: function onAllStoriesEnd() { + this.difference = 0; + this.indexSelected = 0; + this.key = 0; + this.$emit("allStoriesEnd"); + }, + onCurrentAllImagesEnd: function onCurrentAllImagesEnd(index) { + this.difference += index - (index + 1); + this.stopVideo(this.stories[this.indexSelected].images[this.key].url); + this.stories[index].images[this.key].viewed = true; + this.indexSelected++; + this.key = this.getLastViewedIndex(this.stories[this.indexSelected]); + this.$emit("сurrentAllImagesEnd", index); + }, + onCurrentImageEnd: function onCurrentImageEnd(index) { + this.stories[index].images[this.key].viewed = true; + this.$emit("сurrentImageEnd", this.key); + this.key++; + }, + next: function next(index) { + var this$1 = this; + + this.isPaused = false; + if (this.isAllStoriesEnd) { + this.onAllStoriesEnd(); + } else if (this.isCurrentAllImagesEnd) { + setTimeout(function () { + this$1.onCurrentAllImagesEnd(index); + }); + } else { + this.stories[this.indexSelected].images[this.key].viewed = true; + this.key++; + } + this.reset(); + }, + prev: function prev(index) { + var this$1 = this; + + this.isPaused = false; + if (this.indexSelected <= 0 && this.key <= 0) { + this.key = 0; + } else if (this.key <= 0) { + // Without delay + setTimeout(function () { + this$1.difference += index - (index - 1); + this$1.indexSelected--; + this$1.key = this$1.getLastViewedIndex(this$1.stories[this$1.indexSelected]); + }); + } else { + this.key--; + this.stories[this.indexSelected].images[this.key].viewed = false; + } + this.reset(); + }, + autoPlay: function autoPlay() { + if (this.isAllStoriesEnd) { + this.onAllStoriesEnd(); + } else if (this.isCurrentAllImagesEnd) { + this.onCurrentAllImagesEnd(this.indexSelected); + } else { + this.onCurrentImageEnd(this.indexSelected); + } + this.reset(); + }, + play: function play() { + var this$1 = this; + + this.timer = new Date().getTime(); + this.progress = setInterval(function () { + // forward + var time = new Date().getTime(); + if (this$1.newDur > 0) { + this$1.percent = + this$1.pausePer + + Math.floor((100 * (time - this$1.timer)) / this$1.duration); + } else { + this$1.percent = Math.floor( + (100 * (time - this$1.timer)) / this$1.duration + ); + } + }, this.duration / 100); + if (this.newDur > 0) { + this.interval = setInterval(this.autoPlay, this.newDur); + } else { + this.interval = setInterval(this.autoPlay, this.duration); + } + }, + reset: function reset() { + this.percent = 0; + clearInterval(this.interval); + clearInterval(this.progress); + this.newDur = 0; + this.play(); + }, + pauseStory: function pauseStory(event) { + if (event) { + this.toggleVideo("pause", event); + } + this.isPaused = true; + this.pausePer = this.percent; + clearInterval(this.progress); + clearInterval(this.interval); + this.newDur = this.duration - (this.pausePer * this.duration) / 100; + }, + playStory: function playStory(event) { + if (event) { + this.toggleVideo("play", event); + } + this.isPaused = false; + this.play(); + }, + toggleVideo: function toggleVideo(type, event) { + var video = document.getElementById(event.target.id); + if (video) { + video[type](); + } + }, + stopVideo: function stopVideo(id) { + var video = document.getElementById(id); + if (video) { + video.pause(); + video.currentTime = 0; + } + }, + calculateTransform: function calculateTransform(index) { + if ( + this.indexSelected - index === -1 || + this.indexSelected - index === 1 + ) { + return 315 * (index + this.difference); + } + if (index > this.indexSelected) { + return (315 + 315 * (index + this.difference)) * 0.5; + } else { + return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1; + } + }, + closeStories: function closeStories() { + this.$emit("closeStories"); + }, + }, + mounted: function mounted() { + this.play(); + this.selectSlide(this.currentIndex); + }, + }; + + function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { + if (typeof shadowMode !== 'boolean') { + createInjectorSSR = createInjector; + createInjector = shadowMode; + shadowMode = false; + } + // Vue.extend constructor export interop. + var options = typeof script === 'function' ? script.options : script; + // render functions + if (template && template.render) { + options.render = template.render; + options.staticRenderFns = template.staticRenderFns; + options._compiled = true; + // functional template + if (isFunctionalTemplate) { + options.functional = true; + } + } + // scopedId + if (scopeId) { + options._scopeId = scopeId; + } + var hook; + if (moduleIdentifier) { + // server build + hook = function (context) { + // 2.3 injection + context = + context || // cached call + (this.$vnode && this.$vnode.ssrContext) || // stateful + (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional + // 2.2 with runInNewContext: true + if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { + context = __VUE_SSR_CONTEXT__; + } + // inject component styles + if (style) { + style.call(this, createInjectorSSR(context)); + } + // register component module identifier for async chunk inference + if (context && context._registeredComponents) { + context._registeredComponents.add(moduleIdentifier); + } + }; + // used by ssr in case component is cached and beforeCreate + // never gets called + options._ssrRegister = hook; + } + else if (style) { + hook = shadowMode + ? function (context) { + style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); + } + : function (context) { + style.call(this, createInjector(context)); + }; + } + if (hook) { + if (options.functional) { + // register for functional component in vue file + var originalRender = options.render; + options.render = function renderWithStyleInjection(h, context) { + hook.call(context); + return originalRender(h, context); + }; + } + else { + // inject component registration as beforeCreate hook + var existing = options.beforeCreate; + options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; + } + } + return script; + } + + var isOldIE = typeof navigator !== 'undefined' && + /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); + function createInjector(context) { + return function (id, style) { return addStyle(id, style); }; + } + var HEAD; + var styles = {}; + function addStyle(id, css) { + var group = isOldIE ? css.media || 'default' : id; + var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); + if (!style.ids.has(id)) { + style.ids.add(id); + var code = css.source; + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; + // http://stackoverflow.com/a/26603875 + code += + '\n/*# sourceMappingURL=data:application/json;base64,' + + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + + ' */'; + } + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) + { style.element.setAttribute('media', css.media); } + if (HEAD === undefined) { + HEAD = document.head || document.getElementsByTagName('head')[0]; + } + HEAD.appendChild(style.element); + } + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles + .filter(Boolean) + .join('\n'); + } + else { + var index = style.ids.size - 1; + var textNode = document.createTextNode(code); + var nodes = style.element.childNodes; + if (nodes[index]) + { style.element.removeChild(nodes[index]); } + if (nodes.length) + { style.element.insertBefore(textNode, nodes[index]); } + else + { style.element.appendChild(textNode); } + } + } + } + + /* script */ + var __vue_script__ = script; + + /* template */ + var __vue_render__ = function () { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { staticClass: "stories-wrapper", attrs: { id: "storiesTemplateID" } }, + [ + _c("div", { staticClass: "close", on: { click: _vm.closeStories } }), + _vm._v(" "), + _c( + "div", + { + staticClass: "stories", + on: { + click: function ($event) { + if ($event.target !== $event.currentTarget) { + return null + } + return _vm.closeStories.apply(null, arguments) + }, + }, + }, + _vm._l(_vm.stories, function (story, index) { + return _c( + "div", + { + key: index, + staticClass: "story", + style: + index === _vm.indexSelected + ? "transform: translate(0px)" + : "transform: translate(" + + _vm.calculateTransform(index) + + "px) scale(0.3);cursor:pointer;", + on: { + click: function ($event) { + index !== _vm.indexSelected ? _vm.selectSlide(index) : ""; + }, + }, + }, + [ + _c( + "div", + { + staticClass: "story__source", + on: { + mouseenter: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + mouseleave: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + click: function ($event) { + _vm.isPaused + ? _vm.playStory($event) + : _vm.pauseStory($event); + }, + }, + }, + [ + _vm.getSrc(story, index).type === "video" + ? _c("video", { + attrs: { + id: _vm.getSrc(story, index).url, + src: _vm.getSrc(story, index).url, + autoplay: "", + }, + }) + : _c("img", { + attrs: { src: _vm.getSrc(story, index).url, alt: "" }, + }), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { staticClass: "story__header" }, [ + _c( + "div", + { staticClass: "time" }, + _vm._l(story.images.length, function (elm, index) { + return _c( + "div", + { key: index, staticClass: "time__item" }, + [ + _c("div", { + staticClass: "time__fill", + style: + index === _vm.key + ? "width: " + _vm.percent + "%" + : _vm.key > index + ? "width:100%" + : "width:0%", + }) ] + ) + }), + 0 + ), + _vm._v(" "), + _c("div", { staticClass: "story__top" }, [ + _c("div", { staticClass: "user" }, [ + _c("div", { staticClass: "user__image" }, [ + _c("img", { + attrs: { src: story.picture, alt: "" }, + }) ]), + _vm._v(" "), + _c("div", { staticClass: "user__name" }, [ + _vm._v( + "\n " + + _vm._s(story.username) + + "\n " + ) ]) ]), + _vm._v(" "), + _c("div", { staticClass: "story__time" }, [ + _vm._v(_vm._s(story.time)) ]) ]) ]) + : _vm._e(), + _vm._v(" "), + _c( + "div", + { staticClass: "story__body" }, + [ + index !== _vm.indexSelected + ? _c("div", { staticClass: "user" }, [ + _c( + "div", + { + staticClass: "user__image", + style: + _vm.getNotViewedIndex(story) === -1 + ? "background: #FFFFFF" + : "", + }, + [ + _c("img", { + attrs: { src: story.picture, alt: "" }, + }) ] + ), + _vm._v(" "), + _c("div", { staticClass: "user__name" }, [ + _vm._v( + "\n " + + _vm._s(story.username) + + "\n " + ) ]) ]) + : _vm._e(), + _vm._v(" "), + _vm.showInnerContent && index === _vm.indexSelected + ? _vm._t("innerContent", null, { story: story }) + : _vm._e() ], + 2 + ) ] + ), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { + staticClass: "story__icon story__icon--prev", + on: { + click: function ($event) { + return _vm.prev(index) + }, + }, + }) + : _vm._e(), + _vm._v(" "), + index === _vm.indexSelected + ? _c("div", { + staticClass: "story__icon story__icon--next", + on: { + click: function ($event) { + return _vm.next(index) + }, + }, + }) + : _vm._e(), + _vm._v(" "), + _vm.showOuterContent && index === _vm.indexSelected + ? _vm._t("outerContent", null, { story: story }) + : _vm._e() ], + 2 + ) + }), + 0 + ) ] + ) + }; + var __vue_staticRenderFns__ = []; + __vue_render__._withStripped = true; + + /* style */ + var __vue_inject_styles__ = function (inject) { + if (!inject) { return } + inject("data-v-144b57ff_0", { source: "@charset \"UTF-8\";\n*[data-v-144b57ff] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-144b57ff] {\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-144b57ff] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-144b57ff] {\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-144b57ff] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-144b57ff] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 50vh;\n height: 90vh;\n background-size: contain;\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-144b57ff] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-144b57ff],\n.story__source video[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-144b57ff] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-144b57ff] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-144b57ff] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-144b57ff] {\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-144b57ff] {\n display: none;\n}\n}\n.story__body .user__name[data-v-144b57ff] {\n display: none;\n}\n.story__body .user__image[data-v-144b57ff] {\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-144b57ff] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-144b57ff] {\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-144b57ff] {\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-144b57ff]: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-144b57ff]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-144b57ff] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-144b57ff] {\n left: 0;\n}\n}\n.story__icon--next[data-v-144b57ff] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-144b57ff] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-144b57ff] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-144b57ff] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-144b57ff] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-144b57ff] {\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-144b57ff]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-144b57ff] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-144b57ff] {\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-144b57ff]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AD/TA;ACiUA;AARA;IASA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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: 50vh;\n height: 90vh;\n background-size: contain;\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + + }; + /* scoped */ + var __vue_scope_id__ = "data-v-144b57ff"; + /* module identifier */ + var __vue_module_identifier__ = undefined; + /* functional template */ + var __vue_is_functional_template__ = false; + /* style inject SSR */ + + /* style inject shadow dom */ + + + + var __vue_component__ = /*#__PURE__*/normalizeComponent( + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, + __vue_inject_styles__, + __vue_script__, + __vue_scope_id__, + __vue_is_functional_template__, + __vue_module_identifier__, + false, + createInjector, + undefined, + undefined + ); + + function install(Vue) { + if (install.installed) { return; } + install.installed = true; + Vue.component('Stories', __vue_component__); + } + + var plugin = { + install: install + }; + + + var GlobalVue = null; + if (typeof window !== 'undefined') { + GlobalVue = window.Vue; + } else if (typeof global !== 'undefined') { + GlobalVue = global.Vue; + } + if (GlobalVue) { + GlobalVue.use(plugin); + } + + exports.default = __vue_component__; + exports.install = install; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); From 551ca4c50f7d1967094eb74edd7e5a0617777d44 Mon Sep 17 00:00:00 2001 From: Mehmet Dilmen Date: Mon, 15 Aug 2022 09:25:59 +0300 Subject: [PATCH 03/48] responsive fix --- dist/vue-stories-instagram.esm.js | 4 ++-- dist/vue-stories-instagram.min.js | 4 ++-- dist/vue-stories-instagram.umd.js | 4 ++-- src/components/Stories.vue | 10 ++++++++-- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/dist/vue-stories-instagram.esm.js b/dist/vue-stories-instagram.esm.js index f707fe2..e39b5a0 100644 --- a/dist/vue-stories-instagram.esm.js +++ b/dist/vue-stories-instagram.esm.js @@ -649,11 +649,11 @@ __vue_render__._withStripped = true; /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-144b57ff_0", { source: "@charset \"UTF-8\";\n*[data-v-144b57ff] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-144b57ff] {\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-144b57ff] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-144b57ff] {\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-144b57ff] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-144b57ff] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 50vh;\n height: 90vh;\n background-size: contain;\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-144b57ff] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-144b57ff],\n.story__source video[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-144b57ff] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-144b57ff] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-144b57ff] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-144b57ff] {\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-144b57ff] {\n display: none;\n}\n}\n.story__body .user__name[data-v-144b57ff] {\n display: none;\n}\n.story__body .user__image[data-v-144b57ff] {\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-144b57ff] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-144b57ff] {\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-144b57ff] {\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-144b57ff]: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-144b57ff]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-144b57ff] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-144b57ff] {\n left: 0;\n}\n}\n.story__icon--next[data-v-144b57ff] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-144b57ff] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-144b57ff] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-144b57ff] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-144b57ff] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-144b57ff] {\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-144b57ff]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-144b57ff] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-144b57ff] {\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-144b57ff]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AD/TA;ACiUA;AARA;IASA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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: 50vh;\n height: 90vh;\n background-size: contain;\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-144b57ff"; + var __vue_scope_id__ = "data-v-f989b256"; /* 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 aabfae2..480092e 100644 --- a/dist/vue-stories-instagram.min.js +++ b/dist/vue-stories-instagram.min.js @@ -652,11 +652,11 @@ var Stories = (function (exports) { /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-144b57ff_0", { source: "@charset \"UTF-8\";\n*[data-v-144b57ff] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-144b57ff] {\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-144b57ff] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-144b57ff] {\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-144b57ff] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-144b57ff] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 50vh;\n height: 90vh;\n background-size: contain;\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-144b57ff] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-144b57ff],\n.story__source video[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-144b57ff] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-144b57ff] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-144b57ff] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-144b57ff] {\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-144b57ff] {\n display: none;\n}\n}\n.story__body .user__name[data-v-144b57ff] {\n display: none;\n}\n.story__body .user__image[data-v-144b57ff] {\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-144b57ff] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-144b57ff] {\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-144b57ff] {\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-144b57ff]: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-144b57ff]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-144b57ff] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-144b57ff] {\n left: 0;\n}\n}\n.story__icon--next[data-v-144b57ff] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-144b57ff] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-144b57ff] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-144b57ff] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-144b57ff] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-144b57ff] {\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-144b57ff]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-144b57ff] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-144b57ff] {\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-144b57ff]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AD/TA;ACiUA;AARA;IASA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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: 50vh;\n height: 90vh;\n background-size: contain;\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-144b57ff"; + var __vue_scope_id__ = "data-v-f989b256"; /* 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 5ebe796..91cf0f8 100644 --- a/dist/vue-stories-instagram.umd.js +++ b/dist/vue-stories-instagram.umd.js @@ -655,11 +655,11 @@ /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-144b57ff_0", { source: "@charset \"UTF-8\";\n*[data-v-144b57ff] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-144b57ff] {\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-144b57ff] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-144b57ff] {\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-144b57ff] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-144b57ff] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 50vh;\n height: 90vh;\n background-size: contain;\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-144b57ff] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-144b57ff],\n.story__source video[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-144b57ff] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-144b57ff] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-144b57ff] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-144b57ff] {\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-144b57ff] {\n display: none;\n}\n}\n.story__body .user__name[data-v-144b57ff] {\n display: none;\n}\n.story__body .user__image[data-v-144b57ff] {\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-144b57ff] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-144b57ff] {\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-144b57ff] {\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-144b57ff]: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-144b57ff]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-144b57ff] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-144b57ff] {\n left: 0;\n}\n}\n.story__icon--next[data-v-144b57ff] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-144b57ff] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-144b57ff] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-144b57ff] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-144b57ff] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-144b57ff] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-144b57ff] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-144b57ff] {\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-144b57ff]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-144b57ff] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-144b57ff] {\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-144b57ff]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AD/TA;ACiUA;AARA;IASA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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: 50vh;\n height: 90vh;\n background-size: contain;\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-144b57ff"; + var __vue_scope_id__ = "data-v-f989b256"; /* module identifier */ var __vue_module_identifier__ = undefined; /* functional template */ diff --git a/src/components/Stories.vue b/src/components/Stories.vue index 9d1af15..01365b7 100644 --- a/src/components/Stories.vue +++ b/src/components/Stories.vue @@ -356,10 +356,16 @@ export default { position: relative; border-radius: 16px; background: #000000; - width: 50vh; - height: 90vh; + width: 414px; + height: 751px; background-size: contain; + + @media screen and (max-height: 768px) { + width: 50vh; + height: 90vh; + } + @media screen and (max-width: 768px) { width: 100%; height: auto; From 48589f398ba69da951fc304fb8875cde991fe54c Mon Sep 17 00:00:00 2001 From: Mehmet Dilmen Date: Mon, 15 Aug 2022 09:47:01 +0300 Subject: [PATCH 04/48] some bugs fix --- dist/vue-stories-instagram.esm.js | 12 ++++-------- dist/vue-stories-instagram.min.js | 12 ++++-------- dist/vue-stories-instagram.umd.js | 12 ++++-------- src/components/Stories.vue | 4 ++-- 4 files changed, 14 insertions(+), 26 deletions(-) diff --git a/dist/vue-stories-instagram.esm.js b/dist/vue-stories-instagram.esm.js index e39b5a0..796b33e 100644 --- a/dist/vue-stories-instagram.esm.js +++ b/dist/vue-stories-instagram.esm.js @@ -504,14 +504,10 @@ var __vue_render__ = function () { staticClass: "story__source", on: { mouseenter: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.pauseStory($event) }, mouseleave: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.playStory($event) }, click: function ($event) { _vm.isPaused @@ -649,11 +645,11 @@ __vue_render__._withStripped = true; /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-34edc665_0", { source: "@charset \"UTF-8\";\n*[data-v-34edc665] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-34edc665] {\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-34edc665] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-34edc665] {\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-34edc665] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-34edc665] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-34edc665] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-34edc665] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-34edc665],\n.story__source video[data-v-34edc665] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-34edc665] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-34edc665] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-34edc665] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-34edc665] {\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-34edc665] {\n display: none;\n}\n}\n.story__body .user__name[data-v-34edc665] {\n display: none;\n}\n.story__body .user__image[data-v-34edc665] {\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-34edc665] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-34edc665] {\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-34edc665] {\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-34edc665]: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-34edc665]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-34edc665] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-34edc665] {\n left: 0;\n}\n}\n.story__icon--next[data-v-34edc665] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-34edc665] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-34edc665] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-34edc665] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-34edc665] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-34edc665] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-34edc665] {\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-34edc665]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-34edc665] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-34edc665] {\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-34edc665]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-f989b256"; + var __vue_scope_id__ = "data-v-34edc665"; /* 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 480092e..f3f93e4 100644 --- a/dist/vue-stories-instagram.min.js +++ b/dist/vue-stories-instagram.min.js @@ -507,14 +507,10 @@ var Stories = (function (exports) { staticClass: "story__source", on: { mouseenter: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.pauseStory($event) }, mouseleave: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.playStory($event) }, click: function ($event) { _vm.isPaused @@ -652,11 +648,11 @@ var Stories = (function (exports) { /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-34edc665_0", { source: "@charset \"UTF-8\";\n*[data-v-34edc665] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-34edc665] {\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-34edc665] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-34edc665] {\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-34edc665] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-34edc665] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-34edc665] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-34edc665] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-34edc665],\n.story__source video[data-v-34edc665] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-34edc665] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-34edc665] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-34edc665] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-34edc665] {\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-34edc665] {\n display: none;\n}\n}\n.story__body .user__name[data-v-34edc665] {\n display: none;\n}\n.story__body .user__image[data-v-34edc665] {\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-34edc665] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-34edc665] {\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-34edc665] {\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-34edc665]: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-34edc665]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-34edc665] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-34edc665] {\n left: 0;\n}\n}\n.story__icon--next[data-v-34edc665] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-34edc665] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-34edc665] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-34edc665] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-34edc665] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-34edc665] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-34edc665] {\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-34edc665]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-34edc665] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-34edc665] {\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-34edc665]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-f989b256"; + var __vue_scope_id__ = "data-v-34edc665"; /* 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 91cf0f8..3f60ea8 100644 --- a/dist/vue-stories-instagram.umd.js +++ b/dist/vue-stories-instagram.umd.js @@ -510,14 +510,10 @@ staticClass: "story__source", on: { mouseenter: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.pauseStory($event) }, mouseleave: function ($event) { - _vm.isPaused - ? _vm.playStory($event) - : _vm.pauseStory($event); + return _vm.playStory($event) }, click: function ($event) { _vm.isPaused @@ -655,11 +651,11 @@ /* style */ var __vue_inject_styles__ = function (inject) { if (!inject) { return } - inject("data-v-f989b256_0", { source: "@charset \"UTF-8\";\n*[data-v-f989b256] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-f989b256] {\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-f989b256] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-f989b256] {\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-f989b256] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-f989b256] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-f989b256] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-f989b256] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-f989b256],\n.story__source video[data-v-f989b256] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-f989b256] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-f989b256] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-f989b256] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-f989b256] {\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-f989b256] {\n display: none;\n}\n}\n.story__body .user__name[data-v-f989b256] {\n display: none;\n}\n.story__body .user__image[data-v-f989b256] {\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-f989b256] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-f989b256] {\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-f989b256] {\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-f989b256]: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-f989b256]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-f989b256] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-f989b256] {\n left: 0;\n}\n}\n.story__icon--next[data-v-f989b256] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-f989b256] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-f989b256] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-f989b256] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-f989b256] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-f989b256] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-f989b256] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-f989b256] {\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-f989b256]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-f989b256] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-f989b256] {\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-f989b256]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); + inject("data-v-34edc665_0", { source: "@charset \"UTF-8\";\n*[data-v-34edc665] {\n box-sizing: border-box;\n}\n.stories-wrapper[data-v-34edc665] {\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-34edc665] {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.story[data-v-34edc665] {\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-34edc665] {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n}\n.story__source[data-v-34edc665] {\n position: relative;\n border-radius: 16px;\n background: #000000;\n width: 414px;\n height: 751px;\n background-size: contain;\n}\n@media screen and (max-height: 768px) {\n.story__source[data-v-34edc665] {\n width: 50vh;\n height: 90vh;\n}\n}\n@media screen and (max-width: 768px) {\n.story__source[data-v-34edc665] {\n width: 100%;\n height: auto;\n flex: 1 1 auto;\n}\n}\n.story__source img[data-v-34edc665],\n.story__source video[data-v-34edc665] {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n}\n.story__header[data-v-34edc665] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 8px 11px;\n}\n.story__time[data-v-34edc665] {\n font-size: 16px;\n line-height: 20px;\n color: #ffffff;\n}\n.story__top[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.story__body[data-v-34edc665] {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.story__body .user[data-v-34edc665] {\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-34edc665] {\n display: none;\n}\n}\n.story__body .user__name[data-v-34edc665] {\n display: none;\n}\n.story__body .user__image[data-v-34edc665] {\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-34edc665] {\n border: 5px solid #ffffff;\n border-radius: 100%;\n}\n.story__icon[data-v-34edc665] {\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-34edc665] {\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-34edc665]: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-34edc665]:before {\n content: none;\n}\n}\n.story__icon--prev[data-v-34edc665] {\n left: -35px;\n}\n@media screen and (max-width: 768px) {\n.story__icon--prev[data-v-34edc665] {\n left: 0;\n}\n}\n.story__icon--next[data-v-34edc665] {\n right: -35px;\n transform: translateY(-50%) rotate(180deg);\n}\n@media screen and (max-width: 768px) {\n.story__icon--next[data-v-34edc665] {\n right: 0;\n transform: none;\n}\n}\n.user[data-v-34edc665] {\n display: flex;\n align-items: center;\n}\n.user__image[data-v-34edc665] {\n width: 32px;\n height: 32px;\n border-radius: 100px;\n overflow: hidden;\n margin-right: 8px;\n}\n.user__image img[data-v-34edc665] {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n}\n.user__name[data-v-34edc665] {\n font-weight: 600;\n font-size: 16px;\n line-height: 18px;\n color: #ffffff;\n margin-right: 5px;\n}\n.time[data-v-34edc665] {\n display: flex;\n margin-bottom: 10px;\n}\n.time__item[data-v-34edc665] {\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-34edc665]:last-child {\n margin-right: 0;\n}\n.time__fill[data-v-34edc665] {\n position: absolute;\n width: 100%;\n background: #ffffff;\n height: 2px;\n}\n.close[data-v-34edc665] {\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-34edc665]:after {\n content: \"×\";\n color: #ffffff;\n font-weight: 100;\n font-size: 35px;\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;ACkUhB;EACA,sBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,kCAAA;EACA,uBAAA;ADhUA;ACmUA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ADhUA;ACmUA;EACA,kBAAA;EACA,qDAAA;ADhUA;ACkUA;AAJA;IAKA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;AD/TE;AACF;ACiUA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;AD/TA;ACkUA;AATA;IAUA,WAAA;IACA,YAAA;AD/TE;AACF;ACiUA;AAdA;IAeA,WAAA;IACA,YAAA;IACA,cAAA;AD9TE;AACF;ACgUA;;EAEA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;AD9TA;ACkUA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,iBAAA;ADhUA;ACmUA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;ADjUA;ACoUA;EACA,aAAA;EACA,mBAAA;ADlUA;ACqUA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;ADnUA;ACqUA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;ADnUA;ACqUA;AANA;IAOA,aAAA;ADlUE;AACF;ACqUA;EACA,aAAA;ADnUA;ACsUA;EACA,YAAA;EACA,aAAA;EACA,6DAAA;EACA,SAAA;EACA,YAAA;ADpUA;ACsUA;EACA,yBAAA;EACA,mBAAA;ADpUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,mBAAA;EACA,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;ADvUA;ACyUA;AAVA;IAWA,MAAA;IACA,SAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;IACA,gBAAA;ADtUE;AACF;ACwUA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,qBAAA;EACA,yBAAA;EACA,qBAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ADtUA;ACwUA;AAZA;IAaA,aAAA;ADrUE;AACF;ACwUA;EACA,WAAA;ADtUA;ACwUA;AAHA;IAIA,OAAA;ADrUE;AACF;ACwUA;EACA,YAAA;EACA,0CAAA;ADtUA;ACwUA;AAJA;IAKA,QAAA;IACA,eAAA;ADrUE;AACF;AC0UA;EACA,aAAA;EACA,mBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,gBAAA;EACA,iBAAA;ADvUA;ACyUA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;ADvUA;AC2UA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ADzUA;AC6UA;EACA,aAAA;EACA,mBAAA;AD1UA;AC4UA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AD1UA;AC4UA;EACA,eAAA;AD1UA;AC8UA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;AD5UA;ACgVA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;AD7UA;AC+UA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,eAAA;AD7UA;;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}\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/*# sourceMappingURL=Stories.vue.map */","\n\n\n\n\n"]}, media: undefined }); }; /* scoped */ - var __vue_scope_id__ = "data-v-f989b256"; + var __vue_scope_id__ = "data-v-34edc665"; /* module identifier */ var __vue_module_identifier__ = undefined; /* functional template */ diff --git a/src/components/Stories.vue b/src/components/Stories.vue index 01365b7..34676a0 100644 --- a/src/components/Stories.vue +++ b/src/components/Stories.vue @@ -17,8 +17,8 @@ >