completed 01-gallery.js/02-video.js

package.json

@@ -18,7 +18,10 @@
     "url": "https://github.com/goitacademy/parcel-project-template/issues"
   },
   "dependencies": {
-    "modern-normalize": "^1.1.0"
+    "@vimeo/player": "^2.20.1",
+    "lodash.throttle": "^4.1.1",
+    "modern-normalize": "^1.1.0",
+    "simplelightbox": "^2.14.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.6.0",

src/css/01-gallery.css

@@ -12,6 +12,7 @@
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
+  list-style: none;
 }
 
 .gallery__item {

src/js/01-gallery.js

@@ -1,5 +1,36 @@
 // Add imports above this line
 import { galleryItems } from './gallery-items';
+import SimpleLightbox from 'simplelightbox';
+import 'simplelightbox/dist/simple-lightbox.min.css';
 // Change code below this line
 
+console.log(SimpleLightbox);
+
 console.log(galleryItems);
+
+const galleryContainer = document.querySelector('.gallery');
+console.log(galleryContainer);
+
+function createGalleryItemsMarkup(arr) {
+  return arr
+    .map(
+      ({ preview, original, description }) =>
+        `<li class="gallery__item">
+   <a class="gallery__link" href="${original}">
+      <img class="gallery__image" src=${preview} alt="${description}" />
+   </a>
+</li>`
+    )
+    .join('');
+}
+
+galleryContainer.insertAdjacentHTML(
+  'beforeend',
+  createGalleryItemsMarkup(galleryItems)
+);
+console.dir(galleryContainer);
+
+let gallery = new SimpleLightbox('.gallery a', {
+  captionsData: 'alt',
+  captionDelay: 250,
+});

src/js/02-video.js

@@ -1 +1,41 @@
+import Player from '@vimeo/player';
+console.log(Player);
 
+const throttle = require('lodash.throttle');
+
+const iframe = document.querySelector('#vimeo-player');
+console.log(iframe);
+
+const player = new Player(iframe);
+
+// player.on('play', function () {
+//   console.log('played the video!');
+// });
+
+const LS_KEY = 'videoplayer-current-time';
+
+const onPlay = function (data) {
+  // data is an object containing properties specific to that event
+  localStorage.setItem(LS_KEY, JSON.stringify(data.seconds));
+};
+
+player.on('timeupdate', throttle(onPlay, 1000));
+
+const LSTime = Number(localStorage.getItem(LS_KEY));
+
+player
+  .setCurrentTime(LSTime)
+  .then(function (seconds) {
+    // seconds = the actual time that the player seeked to
+  })
+  .catch(function (error) {
+    switch (error.name) {
+      case 'RangeError':
+        // the time was less than 0 or greater than the video’s duration
+        break;
+
+      default:
+        // some other error occurred
+        break;
+    }
+  });