From 3d5840fa44cf8ec6986a6522619580cd1cfad90c Mon Sep 17 00:00:00 2001 From: shalzuth Date: Tue, 9 Jul 2024 14:57:45 -0700 Subject: [PATCH 1/2] update fancybox to latest updated fancybox to 5.0, pushed fancybox config to the base config file, made fancybox background opaque. req.logout updated to use callback. --- REST/PhotoFrame/app.js | 13 +++++++++---- REST/PhotoFrame/config.js | 7 +++++++ REST/PhotoFrame/package-lock.json | 22 +++++++++------------- REST/PhotoFrame/package.json | 2 +- REST/PhotoFrame/static/css/frame.css | 4 ++++ REST/PhotoFrame/static/js/frame.js | 22 +++++----------------- REST/PhotoFrame/views/pages/frame.ejs | 3 ++- REST/PhotoFrame/views/partials/head.ejs | 3 ++- 8 files changed, 39 insertions(+), 37 deletions(-) diff --git a/REST/PhotoFrame/app.js b/REST/PhotoFrame/app.js index fa20f08..cb2c84d 100644 --- a/REST/PhotoFrame/app.js +++ b/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 diff --git a/REST/PhotoFrame/config.js b/REST/PhotoFrame/config.js index 84ca5e2..ba7bcce 100644 --- a/REST/PhotoFrame/config.js +++ b/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, +}; \ No newline at end of file diff --git a/REST/PhotoFrame/package-lock.json b/REST/PhotoFrame/package-lock.json index ae1b460..172a1fb 100644 --- a/REST/PhotoFrame/package-lock.json +++ b/REST/PhotoFrame/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "Apache-2.0", "dependencies": { - "@fancyapps/fancybox": "^3.5.7", + "@fancyapps/ui": "^5.0.36", "body-parser": "^1.19.1", "ejs": "^3.1.7", "express": "^4.18.1", @@ -44,13 +44,10 @@ "kuler": "^2.0.0" } }, - "node_modules/@fancyapps/fancybox": { - "version": "3.5.7", - "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.5.7.tgz", - "integrity": "sha512-rcEtu8t+WnmqIDV/Wfm1yvy/nDdwc7YV25j9HLxGC2/WOsUhk9rcWg2nB8g1BrjRt9zaoADdjHTU6ILYTJzBBg==", - "peerDependencies": { - "jquery": ">=1.9.0" - } + "node_modules/@fancyapps/ui": { + "version": "5.0.36", + "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.36.tgz", + "integrity": "sha512-GMygQzp1MBTFNTT6AzpbL6pXTD6bTxwjmmpI1fe8Ozmmiseu8/g82Sudl1YhcbZmS4bJgaBOF5THDFGpXQ1fDw==" }, "node_modules/accepts": { "version": "1.3.8", @@ -1448,11 +1445,10 @@ "kuler": "^2.0.0" } }, - "@fancyapps/fancybox": { - "version": "3.5.7", - "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.5.7.tgz", - "integrity": "sha512-rcEtu8t+WnmqIDV/Wfm1yvy/nDdwc7YV25j9HLxGC2/WOsUhk9rcWg2nB8g1BrjRt9zaoADdjHTU6ILYTJzBBg==", - "requires": {} + "@fancyapps/ui": { + "version": "5.0.36", + "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.36.tgz", + "integrity": "sha512-GMygQzp1MBTFNTT6AzpbL6pXTD6bTxwjmmpI1fe8Ozmmiseu8/g82Sudl1YhcbZmS4bJgaBOF5THDFGpXQ1fDw==" }, "accepts": { "version": "1.3.8", diff --git a/REST/PhotoFrame/package.json b/REST/PhotoFrame/package.json index 9ab390d..89ebbb4 100644 --- a/REST/PhotoFrame/package.json +++ b/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", diff --git a/REST/PhotoFrame/static/css/frame.css b/REST/PhotoFrame/static/css/frame.css index 900f8df..400b323 100644 --- a/REST/PhotoFrame/static/css/frame.css +++ b/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; diff --git a/REST/PhotoFrame/static/js/frame.js b/REST/PhotoFrame/static/js/frame.js index 0948461..7ef2947 100644 --- a/REST/PhotoFrame/static/js/frame.js +++ b/REST/PhotoFrame/static/js/frame.js @@ -126,28 +126,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) => { diff --git a/REST/PhotoFrame/views/pages/frame.ejs b/REST/PhotoFrame/views/pages/frame.ejs index 179f4a2..3547941 100644 --- a/REST/PhotoFrame/views/pages/frame.ejs +++ b/REST/PhotoFrame/views/pages/frame.ejs @@ -32,7 +32,8 @@ <%- include('../partials/dialogs') %> <%- include('../partials/js') %> - + + <%- include('../partials/footer') %> \ No newline at end of file diff --git a/REST/PhotoFrame/views/partials/head.ejs b/REST/PhotoFrame/views/partials/head.ejs index d64c3d5..e6e5f63 100644 --- a/REST/PhotoFrame/views/partials/head.ejs +++ b/REST/PhotoFrame/views/partials/head.ejs @@ -10,7 +10,8 @@ - + + From 9a854b389c55b721a656225fbcc991660d674c57 Mon Sep 17 00:00:00 2001 From: shalzuth Date: Tue, 9 Jul 2024 16:03:15 -0700 Subject: [PATCH 2/2] shuffle images, don't show preview thumbnails --- REST/PhotoFrame/static/js/frame.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/REST/PhotoFrame/static/js/frame.js b/REST/PhotoFrame/static/js/frame.js index 7ef2947..d40b1e9 100644 --- a/REST/PhotoFrame/static/js/frame.js +++ b/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 = $('') - .attr('src', thumbnailUrl) - .attr('alt', captionText) + // .attr('src', thumbnailUrl) + // .attr('alt', captionText) .addClass('img-fluid rounded thumbnail'); linkToFullImage.append(thumbnailImage);