├── babel.config.js
├── public
    └── example.png
├── .gitignore
├── src
    ├── install.js
    └── components
    │   └── Stories.vue
├── LICENSE
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stfalcon-studio/vue-stories-instagram/HEAD/public/example.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/install.js:
--------------------------------------------------------------------------------
 1 | import component from "./components/Stories.vue";
 2 | 
 3 | export function install(Vue) {
 4 |   if (install.installed) return;
 5 |   install.installed = true;
 6 |   Vue.component('Stories', component);
 7 | }
 8 | 
 9 | const plugin = {
10 |   install
11 | };
12 | 
13 | 
14 | let GlobalVue = null;
15 | if (typeof window !== 'undefined') {
16 |   GlobalVue = window.Vue;
17 | } else if (typeof global !== 'undefined') {
18 |   GlobalVue = global.Vue;
19 | }
20 | if (GlobalVue) {
21 |   GlobalVue.use(plugin);
22 | }
23 | 
24 | export default component;


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 andriyliashok
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-stories-instagram",
 3 |   "description": "A simple vuejs plugin to view stories like in Instagram",
 4 |   "version": "0.2.1",
 5 |   "private": false,
 6 |   "repository": "https://github.com/stfalcon-studio/vue-stories-instagram",
 7 |   "bugs": "https://github.com/stfalcon-studio/vue-stories-instagram/issues",
 8 |   "main": "dist/vue-stories-instagram.umd.js",
 9 |   "module": "dist/vue-stories-instagram.esm.js",
10 |   "unpkg": "dist/vue-stories-instagram.min.js",
11 |   "browser": {
12 |     "./sfc": "src/components/Stories.vue"
13 |   },
14 |   "scripts": {
15 |     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
16 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-stories-instagram.umd.js",
17 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-stories-instagram.esm.js",
18 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-stories-instagram.min.js"
19 |   },
20 |   "devDependencies": {
21 |     "rollup": "^1.17.0",
22 |     "@rollup/plugin-buble": "^0.21.3",
23 |     "@rollup/plugin-commonjs": "^11.1.0",
24 |     "rollup-plugin-vue": "^5.0.1",
25 |     "vue": "^2.6.10",
26 |     "vue-template-compiler": "^2.6.10",
27 |     "sass": "^1.43.4",
28 |     "sass-loader": "^10.2.0"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     },
42 |     "rules": {}
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions",
47 |     "not dead"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-stories-instagram
  2 | 
  3 | <br>
  4 | 
  5 | <img width="100%" src="./public/example.png" alt="Demo"/>
  6 | 
  7 | 
  8 | ## Simple usage
  9 | ```vue
 10 | <template>
 11 |   <Stories :stories="items" />
 12 | </template>
 13 | 
 14 | <script>
 15 | import Stories from "vue-stories-instagram";
 16 | 
 17 | export default {
 18 |   components: { Stories },
 19 |   data: () => ({
 20 |     items: [
 21 |       {
 22 |         username: "Jessica Valentine",
 23 |         picture: "https://randomuser.me/api/portraits/men/61.jpg",
 24 |         time: "12h",
 25 |         images: [
 26 |           {
 27 |             url: "https://randomwordgenerator.com/img/picture-generator/57e7d4414d51a814f1dc8460962e33791c3ad6e04e50744172287cd09e49cd_640.jpg",
 28 |             viewed: true,
 29 |           },
 30 |           {
 31 |             url: "https://randomwordgenerator.com/img/picture-generator/55e4d5474350b10ff3d8992cc12c30771037dbf852547849712a73d5954d_640.jpg",
 32 |             viewed: true,
 33 |           },
 34 |           {
 35 |             url: "https://randomwordgenerator.com/img/picture-generator/54e2d3414950a914f1dc8460962e33791c3ad6e04e5074417d2e72d29e4ecd_640.jpg",
 36 |             viewed: false,
 37 |           },
 38 |           {
 39 |             url: "https://cdn.videvo.net/videvo_files/video/free/2014-12/large_watermarked/Metal_Wind_Chimes_at_Sunset_preview.mp4",
 40 |             viewed: false,
 41 |             type: 'video',
 42 |           },
 43 |         ],
 44 |       },
 45 |     ]
 46 |   })
 47 | };
 48 | </script>
 49 | ```
 50 | 
 51 | ### Props
 52 | | Property             | Type             | Default  | Description                                                        |
 53 | |----------------------|------------------|----------|--------------------------------------------------------------------|
 54 | | `stories`            | [Array]          | required | An array of story objects                                          |
 55 | | `duration`           | Number           | 3000     | Story duration in milliseconds                                     |
 56 | | `currentIndex`       | Number           | 0        | Select story by index                                              |
 57 | | `showInnerContent`   | Boolean          | false    | Inner story content (scoped-slot)                                  |
 58 | | `showOuterContent`   | Boolean          | false    | Outer story content (scoped-slot)                                  |
 59 | | **Events**           |                  |          |                                                                    |
 60 | | `allStoriesEnd`      | Function()       | -        | Callback when all stories ends                                     |
 61 | | `сurrentImageEnd`    | Function(index)  | -        | Callback when a current story image ends                           |
 62 | | `сurrentAllImagesEnd`| Function(index)  | -        | Callback when a current story all images ends                      |
 63 | | `closeStories`       | Function()       | -        | Callback when click on close icon                                  |
 64 | 
 65 | ### Story Object
 66 | | Property   | Description                                                          |
 67 | |------------|----------------------------------------------------------------------|
 68 | | `username` | The user name.                                                       |
 69 | | `picture`  | The user pisture.                                                    |
 70 | | `time`     | The time when the story was added.                                   |
 71 | | `images`   | The array of images or video.                                        |
 72 | | `url`      | The url of the resource, image or video.                             |
 73 | | `viewed`   | Optional. marked story images as viewed                              |
 74 | | `type`     | Optional. Type of the story. `'image' \| 'video'`                    |
 75 | 
 76 | 
 77 | ## With custom slot
 78 | ```vue
 79 | <template>
 80 |   <Stories :stories="items"
 81 |            :showInnerContent="true"
 82 |            :showOuterContent="true" >
 83 | 
 84 |     <template v-slot:innerContent="{ story }">
 85 |       <div class="property" v-if="story.property">
 86 |         <div class="property__image">
 87 |           <img :src="story.property.picture" alt=""/>
 88 |         </div>
 89 |         <div class="property__description">
 90 |           <div class="property__price">{{ story.property.price }}</div>
 91 |           <div class="property__location">{{ story.property.location }}</div>
 92 |         </div>
 93 |       </div>
 94 |     </template>
 95 | 
 96 |     <template v-slot:outerContent="{ story }">
 97 |       <div v-if="story.info" class="story-info">
 98 |         <div class="story-info__description">
 99 |           <div class="story-info__price">{{ story.info.price }}</div>
100 |           <div class="story-info__location">{{ story.info.location }}</div>
101 |         </div>
102 |         <ul class="actions">
103 |           <li class="actions__item">
104 |             <img width="28" height="28" src="~/assets/images/icons/ic_comment.svg" alt="" class="actions__icon">
105 |             <div class="actions__text">{{ story.info.comment }}</div>
106 |           </li>
107 |           <li class="actions__item">
108 |             <img width="28" height="28" src="~/assets/images/icons/ic_favorite.svg" alt="" class="actions__icon">
109 |             <div class="actions__text">{{ story.info.like }}</div>
110 |           </li>
111 |         </ul>
112 |       </div>
113 |     </template>
114 |   </Stories>
115 | </template>
116 | 
117 | <script>
118 | import Stories from "vue-insta-stories";
119 | export default {
120 |   components: { Stories },
121 |   data: () => ({
122 |     items: [  {
123 |       username: "Jessica Valentine",
124 |       picture: "https://randomuser.me/api/portraits/men/61.jpg",
125 |       time: "12h",
126 |       images: [
127 |         {
128 |           url: "https://randomwordgenerator.com/img/picture-generator/57e7d4414d51a814f1dc8460962e33791c3ad6e04e50744172287cd09e49cd_640.jpg",
129 |           viewed: true,
130 |         },
131 |         {
132 |           url: "https://randomwordgenerator.com/img/picture-generator/55e4d5474350b10ff3d8992cc12c30771037dbf852547849712a73d5954d_640.jpg",
133 |           viewed: true,
134 |         },
135 |         {
136 |           url: "https://randomwordgenerator.com/img/picture-generator/54e2d3414950a914f1dc8460962e33791c3ad6e04e5074417d2e72d29e4ecd_640.jpg",
137 |           viewed: false,
138 |         },
139 |         {
140 |           url: "https://cdn.videvo.net/videvo_files/video/free/2014-12/large_watermarked/Metal_Wind_Chimes_at_Sunset_preview.mp4",
141 |           viewed: false,
142 |           type: 'video',
143 |         },
144 |       ],
145 |       property: {
146 |         picture: 'https://randomwordgenerator.com/img/picture-generator/57e7d4414d51a814f1dc8460962e33791c3ad6e04e50744172287cd09e49cd_640.jpg',
147 |         price: '$599,000',
148 |         location: '415 SW 30th Rd, Miami, FL',
149 |       },
150 |       info: {
151 |         price: '$599,000',
152 |         location: '415 SW 30th Rd, Miami, FL',
153 |         comment: '125',
154 |         like: '400',
155 |       },
156 |     }]
157 |   })
158 | };
159 | </script>
160 | ```


--------------------------------------------------------------------------------
/src/components/Stories.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="stories-wrapper">
  3 |     <div @click="closeStories" class="close"></div>
  4 |     <div class="stories">
  5 |       <div
  6 |           v-for="(story, index) in stories"
  7 |           :key="index"
  8 |           class="story"
  9 |           :style="
 10 |           index === indexSelected
 11 |             ? `transform: translate(0px)`
 12 |             : `transform: translate(${calculateTransform(index)}px) scale(0.3);cursor:pointer;`
 13 |         "
 14 |           @click="index !== indexSelected ? selectSlide(index) : ''"
 15 |       >
 16 |         <div class="story__source" @click="isPaused ? playStory($event) : pauseStory($event)">
 17 |           <video :id="getSrc(story, index).url" v-if="getSrc(story, index).type === 'video'"
 18 |                  :src="getSrc(story, index).url" autoplay></video>
 19 |           <img
 20 |               v-else
 21 |               :src="getSrc(story, index).url"
 22 |               alt=""
 23 |           />
 24 |           <div class="story__header" v-if="index === indexSelected">
 25 |             <div class="time">
 26 |               <div
 27 |                   class="time__item"
 28 |                   v-for="(elm, index) in story.images.length"
 29 |                   :key="index"
 30 |               >
 31 |                 <div
 32 |                     class="time__fill"
 33 |                     :style="
 34 |                     index === key
 35 |                       ? `width: ${percent}%`
 36 |                       : key > index
 37 |                       ? `width:100%`
 38 |                       : `width:0%`
 39 |                   "
 40 |                 ></div>
 41 |               </div>
 42 |             </div>
 43 |             <div class="story__top">
 44 |               <div class="user">
 45 |                 <div class="user__image">
 46 |                   <img :src="story.picture" alt=""/>
 47 |                 </div>
 48 |                 <div class="user__name">
 49 |                   {{ story.username }}
 50 |                 </div>
 51 |               </div>
 52 |               <div class="story__time">{{ story.time }}</div>
 53 |             </div>
 54 |           </div>
 55 |           <div class="story__body">
 56 |             <div class="user" v-if="index !== indexSelected">
 57 |               <div class="user__image" :style="getNotViewedIndex(story) === -1 ? `background: #FFFFFF` : ''">
 58 |                 <img :src="story.picture" alt=""/>
 59 |               </div>
 60 |               <div class="user__name">
 61 |                 {{ story.username }}
 62 |               </div>
 63 |             </div>
 64 |             <slot v-if="showInnerContent && index === indexSelected" name="innerContent" :story="story"></slot>
 65 |           </div>
 66 |         </div>
 67 |         <div v-if="index === indexSelected" class="story__icon story__icon--prev" @click="prev(index)"></div>
 68 |         <div v-if="index === indexSelected" class="story__icon story__icon--next" @click="next(index)"></div>
 69 |         <slot v-if="showOuterContent && index === indexSelected" name="outerContent" :story="story"></slot>
 70 |       </div>
 71 |     </div>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | 
 77 | export default {
 78 |   name: 'Stories',
 79 |   props: {
 80 |     stories: {
 81 |       type: Array,
 82 |       required: true,
 83 |     },
 84 |     duration: {
 85 |       type: Number,
 86 |       default: 3000,
 87 |     },
 88 |     currentIndex: {
 89 |       type: Number,
 90 |       default: 0,
 91 |     },
 92 |     showInnerContent: {
 93 |       type: Boolean,
 94 |       default: false,
 95 |     },
 96 |     showOuterContent: {
 97 |       type: Boolean,
 98 |       default: false,
 99 |     },
100 |   },
101 |   data: () => ({
102 |     indexSelected: 0,
103 |     difference: 0,
104 |     key: 0,
105 |     percent: 0,
106 |     timer: 0,
107 |     progress: 0,
108 |     interval: 0,
109 |     isPaused: false,
110 |     newDur: 0,
111 |     pausePer: 0,
112 |   }),
113 |   computed: {
114 |     isAllStoriesEnd() {
115 |       return this.indexSelected >= this.stories.length - 1 && this.isCurrentAllImagesEnd;
116 |     },
117 |     isCurrentAllImagesEnd() {
118 |       return this.key >= this.stories[this.indexSelected].images.length - 1;
119 |     }
120 |   },
121 |   methods: {
122 |     getSrc(story, index) {
123 |       const viewedIndex = this.getLastViewedIndex(story);
124 |       return index === this.indexSelected
125 |           ? {
126 |             url: story.images[this.key].url,
127 |             type: story.images[this.key].type,
128 |           }
129 |           : {
130 |             url: story.images[viewedIndex].url,
131 |             type: story.images[viewedIndex].type,
132 |           }
133 |     },
134 |     getNotViewedIndex(story) {
135 |       return story.images.findIndex(item => !item.viewed);
136 |     },
137 |     getLastViewedIndex(story) {
138 |       const keyIndex = this.getNotViewedIndex(story);
139 |       const index = story.images.length - 1;
140 |       return keyIndex === -1 ? index : keyIndex;
141 |     },
142 |     selectSlide(index) {
143 |       this.isPaused = false;
144 |       this.difference += this.indexSelected - index;
145 |       this.stopVideo(this.stories[this.indexSelected].images[this.key].url);
146 |       this.indexSelected = index;
147 |       this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);
148 |       this.reset()
149 |     },
150 |     onAllStoriesEnd() {
151 |       this.difference = 0;
152 |       this.indexSelected = 0;
153 |       this.key = 0;
154 |       this.$emit('allStoriesEnd');
155 |     },
156 |     onCurrentAllImagesEnd(index) {
157 |       this.difference += index - (index + 1);
158 |       this.stopVideo(this.stories[this.indexSelected].images[this.key].url);
159 |       this.stories[index].images[this.key].viewed = true;
160 |       this.indexSelected++;
161 |       this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);
162 |       this.$emit('сurrentAllImagesEnd', index);
163 |     },
164 |     onCurrentImageEnd(index) {
165 |       this.stories[index].images[this.key].viewed = true;
166 |       this.$emit('сurrentImageEnd', this.key);
167 |       this.key++;
168 |     },
169 |     next(index) {
170 |       this.isPaused = false;
171 |       if (this.isAllStoriesEnd) {
172 |         this.onAllStoriesEnd();
173 |       } else if (this.isCurrentAllImagesEnd) {
174 |         setTimeout(() => {
175 |           this.onCurrentAllImagesEnd(index);
176 |         })
177 |       } else {
178 |         this.stories[this.indexSelected].images[this.key].viewed = true;
179 |         this.key++
180 |       }
181 |       this.reset()
182 |     },
183 |     prev(index) {
184 |       this.isPaused = false;
185 |       if (this.indexSelected <= 0 && this.key <= 0) {
186 |         this.key = 0
187 |       } else if (this.key <= 0) {
188 |         // Without delay
189 |         setTimeout(() => {
190 |           this.difference += index - (index - 1);
191 |           this.indexSelected--;
192 |           this.key = this.getLastViewedIndex(this.stories[this.indexSelected]);
193 |         })
194 |       } else {
195 |         this.key--;
196 |         this.stories[this.indexSelected].images[this.key].viewed = false;
197 |       }
198 |       this.reset()
199 |     },
200 |     autoPlay() {
201 |       if (this.isAllStoriesEnd) {
202 |         this.onAllStoriesEnd();
203 |       } else if (this.isCurrentAllImagesEnd) {
204 |         this.onCurrentAllImagesEnd(this.indexSelected);
205 |       } else {
206 |         this.onCurrentImageEnd(this.indexSelected);
207 |       }
208 |       this.reset();
209 | 
210 |     },
211 |     play() {
212 |       this.timer = new Date().getTime();
213 |       this.progress = setInterval(() => {
214 |         // forward
215 |         let time = new Date().getTime()
216 |         if (this.newDur > 0) {
217 |           this.percent =
218 |               this.pausePer +
219 |               Math.floor((100 * (time - this.timer)) / this.duration);
220 |         } else {
221 |           this.percent = Math.floor((100 * (time - this.timer)) / this.duration);
222 |         }
223 |       }, this.duration / 100)
224 |       if (this.newDur > 0) {
225 |         this.interval = setInterval(this.autoPlay, this.newDur)
226 |       } else {
227 |         this.interval = setInterval(this.autoPlay, this.duration)
228 |       }
229 |     },
230 |     reset() {
231 |       this.percent = 0;
232 |       clearInterval(this.interval);
233 |       clearInterval(this.progress);
234 |       this.newDur = 0;
235 |       this.play();
236 |     },
237 |     pauseStory(event) {
238 |       if (event) {
239 |         this.toggleVideo('pause', event);
240 |       }
241 |       this.isPaused = true;
242 |       this.pausePer = this.percent;
243 |       clearInterval(this.progress);
244 |       clearInterval(this.interval);
245 |       this.newDur = this.duration - (this.pausePer * this.duration) / 100;
246 |     },
247 |     playStory(event) {
248 |       if (event) {
249 |         this.toggleVideo('play', event);
250 |       }
251 |       this.isPaused = false;
252 |       this.play();
253 |     },
254 |     toggleVideo(type, event) {
255 |       const video = document.getElementById(event.target.id);
256 |       if (video) {
257 |         video[type]();
258 |       }
259 |     },
260 |     stopVideo(id) {
261 |       const video = document.getElementById(id);
262 |       if (video) {
263 |         video.pause();
264 |         video.currentTime = 0;
265 |       }
266 |     },
267 |     calculateTransform(index) {
268 |       if (this.indexSelected - index === -1 || this.indexSelected - index === 1) {
269 |         return 315 * (index + this.difference);
270 |       }
271 |       if (index > this.indexSelected) {
272 |         return (315 + 315 * (index + this.difference)) * 0.5;
273 |       } else {
274 |         return Math.abs((315 - 315 * (index + this.difference)) * 0.5) * -1;
275 |       }
276 |     },
277 |     closeStories(){
278 |       this.$emit('closeStories');
279 |     },
280 |   },
281 |   mounted() {
282 |     this.play();
283 |     this.selectSlide(this.currentIndex);
284 |   }
285 | }
286 | 
287 | </script>
288 | 
289 | <style lang="scss" scoped>
290 | 
291 | * {
292 |   box-sizing: border-box;
293 | }
294 | 
295 | .stories-wrapper {
296 |   position: fixed;
297 |   top: 0;
298 |   right: 0;
299 |   bottom: 0;
300 |   left: 0;
301 |   background: rgba(16, 16, 16, 0.98);
302 |   font-family: sans-serif;
303 | }
304 | 
305 | .stories {
306 |   height: 100%;
307 |   display: flex;
308 |   justify-content: center;
309 |   align-items: center;
310 | }
311 | 
312 | .story {
313 |   position: absolute;
314 |   transition: transform .2s cubic-bezier(0.4, 0, 1, 1);
315 | 
316 |   @media screen and (max-width: 768px) {
317 |     width: 100%;
318 |     height: 100%;
319 |     display: flex;
320 |     flex-direction: column;
321 |   }
322 | 
323 |   &__source {
324 |     position: relative;
325 |     border-radius: 16px;
326 |     background: #000000;
327 |     width: 414px;
328 |     height: 751px;
329 |     background-size: contain;
330 | 
331 |     @media screen and (max-width: 768px) {
332 |       width: 100%;
333 |       height: auto;
334 |       flex: 1 1 auto;
335 |     }
336 | 
337 |     img, video {
338 |       width: 100%;
339 |       height: 100%;
340 |       object-fit: contain;
341 |       display: block;
342 |     }
343 |   }
344 | 
345 |   &__header {
346 |     position: absolute;
347 |     top: 0;
348 |     left: 0;
349 |     right: 0;
350 |     padding: 8px 11px;
351 |   }
352 | 
353 |   &__time {
354 |     font-size: 16px;
355 |     line-height: 20px;
356 |     color: #FFFFFF;
357 |   }
358 | 
359 |   &__top {
360 |     display: flex;
361 |     align-items: center;
362 |   }
363 | 
364 |   &__body {
365 |     position: absolute;
366 |     bottom: 0;
367 |     left: 0;
368 |     right: 0;
369 | 
370 |     .user {
371 |       position: absolute;
372 |       bottom: 30px;
373 |       left: 50%;
374 |       transform: translateX(-50%);
375 | 
376 |       @media screen and (max-width: 768px) {
377 |         display: none;
378 |       }
379 |     }
380 | 
381 |     .user__name {
382 |       display: none;
383 |     }
384 | 
385 |     .user__image {
386 |       width: 140px;
387 |       height: 140px;
388 |       background: linear-gradient(180deg, #4C7CF6 0%, #6200C3 100%);
389 |       margin: 0;
390 |       padding: 5px;
391 | 
392 |       img {
393 |         border: 5px solid #FFFFFF;
394 |         border-radius: 100%;
395 |       }
396 |     }
397 |   }
398 | 
399 |   &__icon {
400 |     width: 24px;
401 |     height: 24px;
402 |     background: rgba(255, 255, 255, 0.8);
403 |     border-radius: 50px;
404 |     position: absolute;
405 |     top: 50%;
406 |     transform: translateY(-50%);
407 |     cursor: pointer;
408 | 
409 |     @media screen and (max-width: 768px) {
410 |       top: 0;
411 |       bottom: 0;
412 |       transform: none;
413 |       width: 100px;
414 |       height: auto;
415 |       background: none;
416 |     }
417 | 
418 |     &:before {
419 |       content: "";
420 |       position: absolute;
421 |       top: 8px;
422 |       left: 9px;
423 |       border: solid #323232;
424 |       border-width: 0 2px 2px 0;
425 |       display: inline-block;
426 |       padding: 3px;
427 |       transform: rotate(135deg);
428 |       border-radius: 1px;
429 | 
430 |       @media screen and (max-width: 768px) {
431 |         content: none;
432 |       }
433 |     }
434 | 
435 |     &--prev {
436 |       left: -35px;
437 | 
438 |       @media screen and (max-width: 768px) {
439 |         left: 0;
440 |       }
441 |     }
442 | 
443 |     &--next {
444 |       right: -35px;
445 |       transform: translateY(-50%) rotate(180deg);
446 | 
447 |       @media screen and (max-width: 768px) {
448 |         right: 0;
449 |         transform: none;
450 |       }
451 |     }
452 |   }
453 | }
454 | 
455 | .user {
456 |   display: flex;
457 |   align-items: center;
458 | 
459 |   &__image {
460 |     width: 32px;
461 |     height: 32px;
462 |     border-radius: 100px;
463 |     overflow: hidden;
464 |     margin-right: 8px;
465 | 
466 |     img {
467 |       width: 100%;
468 |       height: 100%;
469 |       display: block;
470 |       object-fit: cover;
471 |     }
472 |   }
473 | 
474 |   &__name {
475 |     font-weight: 600;
476 |     font-size: 16px;
477 |     line-height: 18px;
478 |     color: #FFFFFF;
479 |     margin-right: 5px;
480 |   }
481 | }
482 | 
483 | .time {
484 |   display: flex;
485 |   margin-bottom: 10px;
486 | 
487 |   &__item {
488 |     position: relative;
489 |     width: 100%;
490 |     height: 2px;
491 |     margin-right: 4px;
492 |     background: rgba(255, 255, 255, 0.5);
493 |     border-radius: 4px;
494 | 
495 |     &:last-child {
496 |       margin-right: 0;
497 |     }
498 |   }
499 | 
500 |   &__fill {
501 |     position: absolute;
502 |     width: 100%;
503 |     background: #ffffff;
504 |     height: 2px;
505 |   }
506 | }
507 | 
508 | .close {
509 |   position: absolute;
510 |   width: 50px;
511 |   height: 50px;
512 |   top: 20px;
513 |   right: 20px;
514 |   display: flex;
515 |   align-items: center;
516 |   justify-content: center;
517 |   cursor: pointer;
518 | 
519 |   &:after{
520 |     content: "\00d7";
521 |     color: #FFFFFF;
522 |     font-weight: 100;
523 |     font-size: 35px;
524 |   }
525 | }
526 | </style>
527 | 


--------------------------------------------------------------------------------