update fancybox to latest

REST/PhotoFrame/app.js

@@ -142,7 +142,7 @@ app.use(
   '/fancybox',
   express.static(
     fileURLToPath(
-      new URL('./node_modules/@fancyapps/fancybox/dist/', import.meta.url)
+      new URL('./node_modules/@fancyapps/ui/dist/', import.meta.url)
     ),
   )
 );
@@ -201,9 +201,11 @@ app.get('/', (req, res) => {
 // GET request to log out the user.
 // Destroy the current session and redirect back to the log in screen.
 app.get('/logout', (req, res) => {
-  req.logout();
-  req.session.destroy();
-  res.redirect('/');
+  req.logout(function(err) {
+    if (err) { return next(err); }
+    req.session.destroy();
+    res.redirect('/');
+  });
 });
 
 // Star the OAuth login process for Google.
@@ -238,6 +240,9 @@ app.get('/album', (req, res) => {
   renderIfAuthenticated(req, res, 'pages/album');
 });
 
+app.get('/fancyboxcfg', (req, res) => {
+    res.json( config.fancybox );
+});
 
 // Handles form submissions from the search page.
 // The user has made a selection and wants to load photos into the photo frame

REST/PhotoFrame/config.js

@@ -47,3 +47,10 @@ config.albumPageSize = 50;
 
 // The API end point to use. Do not change.
 config.apiEndpoint = 'https://photoslibrary.googleapis.com';
+
+config.fancybox = {
+  Slideshow: { playOnStart: true, timeout:20e3 },
+  Thumbs: { showOnStart: false },
+  Fullscreen: { autoStart: true },
+  hideScrollbar: true,
+};

REST/PhotoFrame/package.json

@@ -12,7 +12,7 @@
   "main": "app.js",
   "type": "module",
   "dependencies": {
-    "@fancyapps/fancybox": "^3.5.7",
+    "@fancyapps/ui": "^5.0.36",
     "body-parser": "^1.19.1",
     "ejs": "^3.1.7",
     "express": "^4.18.1",

REST/PhotoFrame/static/css/frame.css

@@ -87,6 +87,10 @@ pre {
   opacity: 1 !important;
 }
 
+.fancybox__container {
+  background-color: rgba(24, 24, 27, 1.0)
+}
+
 .loading-dialog {
   position: fixed;
   margin: 0;

REST/PhotoFrame/static/js/frame.js

@@ -47,6 +47,13 @@ function showPreview(source, mediaItems) {
     $('startSlideshow').removeClass('disabled');
   }
 
+  function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+  }
+  shuffleArray(mediaItems);
   // Loop over each media item and render it.
   $.each(mediaItems, (i, item) => {
     // Construct a thumbnail URL from the item's base URL at a small pixel size.
@@ -78,8 +85,8 @@ function showPreview(source, mediaItems) {
                                 .attr('data-height', item.mediaMetadata.height);
     // Add the thumbnail image to the link to the full image for fancybox.
     const thumbnailImage = $('<img />')
-                               .attr('src', thumbnailUrl)
-                               .attr('alt', captionText)
+                              // .attr('src', thumbnailUrl)
+                              // .attr('alt', captionText)
                                .addClass('img-fluid rounded thumbnail');
     linkToFullImage.append(thumbnailImage);
 
@@ -126,28 +133,16 @@ function loadQueue() {
 $(document).ready(() => {
   // Load the queue of photos selected by the user for the photo
   loadQueue();
-
-  // Set up the fancybox image gallery.
-  $().fancybox({
-    selector: '[data-fancybox="gallery"]',
-    loop: true,
-    buttons: ['slideShow', 'fullScreen', 'close'],
-    image: {preload: true},
-    transitionEffect: 'fade',
-    transitionDuration: 1000,
-    fullScreen: {autoStart: false},
-    // Automatically advance after 3s to next photo.
-    slideShow: {autoStart: true, speed: 3000},
-    // Display the contents figcaption element as the caption of an image
-    caption: function(instance, item) {
-      return $(this).find('figcaption').html();
-    }
+
+  $.get( "/fancyboxcfg", function( data ) {
+    // Set up the fancybox image gallery.
+    Fancybox.bind('[data-fancybox="gallery"]', data);
   });
 
   // Clicking the 'view fullscreen' button opens the gallery from the first
   // image.
   $('#startSlideshow')
-      .on('click', (e) => $('#images-container a').first().click());
+    .on('click', (e) => Fancybox.fromSelector('[data-fancybox="gallery"]') )
 
   // Clicking log out opens the log out screen.
   $('#logout').on('click', (e) => {

REST/PhotoFrame/views/pages/frame.ejs

@@ -32,7 +32,8 @@
 <%- include('../partials/dialogs') %>
 
 <%- include('../partials/js') %>
-<script src="/fancybox/jquery.fancybox.min.js"></script>
+<script src="/fancybox/fancybox/fancybox.umd.js"></script>
+<script src="/fancybox/carousel/carousel.autoplay.umd.js"></script>
 <script src="/js/frame.js"></script>
 
 <%- include('../partials/footer') %>

REST/PhotoFrame/views/partials/head.ejs

@@ -10,7 +10,8 @@
 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
 
 	<!-- Fancybox Gallery CSS -->
-	<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.min.css">
+	<link rel="stylesheet" href="/fancybox/fancybox/fancybox.css"/>
+	<link rel="stylesheet" href="/fancybox/carousel/carousel.autoplay.css"/>
 
 	<!-- Material design icon-->
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">