From 99b0a4ef4c9108a71b44ea343c9e211b5e77ad37 Mon Sep 17 00:00:00 2001 From: Sander Vocke Date: Tue, 21 Jan 2020 20:37:46 +0100 Subject: [PATCH] Start work on a browser. Thumbnail aspect ratios correct. --- package.json | 1 + src/browser.js | 73 ++++++++++++++++++++++++++++++++++++++ src/gridgallery.js | 25 ++++++++++++- src/main.js | 36 ++++++++++++++----- src/media.js | 2 -- src/queries.js | 2 +- yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++++--- 7 files changed, 210 insertions(+), 16 deletions(-) create mode 100644 src/browser.js diff --git a/package.json b/package.json index 26a5870..ebba36a 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "alasql": "^0.5.4", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-grid-gallery": "^0.5.5", "react-photo-gallery": "^8.0.0", "react-scripts": "3.3.0", "search-string": "^3.1.0", diff --git a/src/browser.js b/src/browser.js new file mode 100644 index 0000000..0bd0efb --- /dev/null +++ b/src/browser.js @@ -0,0 +1,73 @@ +import React from 'react'; + +class AlbumTreeItem { + name = false; + relative_path = false; + children = []; + + constructor(name, relative_path, children) { + this.name = name; + this.relative_path = relative_path; + this.children = children; + } +} + +export function split_tree_item_location(treeitem) { + var r = treeitem.relative_path.split("/"); + return r; +} + +export function insert_into_album_tree(treebaseitem, treeitem) { + var parts = split_tree_item_location(treeitem); + var current_item = treebaseitem; + for (var i = 0; i < parts.length; i++) { + var part = parts[i]; + var subitem = false; + for (var j = 0; j < current_item.children.length; j++) { + var child = current_item.children[j]; + if (child.name == part) { + subitem = child; + break; + } + } + if (!subitem) { + var new_sub = new AlbumTreeItem( + part, + current_item.relative_path + "/" + part, + [] + ); + current_item.children.push(new_sub); + current_item = new_sub; + } + }; +} + +export function build_albums_tree(all_db_albums) { + var tree = new AlbumTreeItem("", "/", []); + for(var i=0; i +

Browser

+ + ); + } +} \ No newline at end of file diff --git a/src/gridgallery.js b/src/gridgallery.js index ca5217f..8e59d26 100644 --- a/src/gridgallery.js +++ b/src/gridgallery.js @@ -1,4 +1,8 @@ import React from 'react'; + +/* +LEGACY: react-photo-gallery version + import Gallery from "react-photo-gallery"; const photo_to_gallery_photo = (photo) => { @@ -13,4 +17,23 @@ const photo_to_gallery_photo = (photo) => { } } -export const GridGallery = ({ photos }) => photo_to_gallery_photo(x))}/> \ No newline at end of file +export const GridGallery = ({ photos }) => photo_to_gallery_photo(x))}/> +*/ + +import Gallery from 'react-grid-gallery'; + +const photo_to_gallery_photo = (photo) => { + console.log("Gallery photo", photo); + if(!photo.state.thumbnailsize) { + throw new Error("Photo for gallery does not have a thumbnail size."); + } + return { + src: photo.state.path, + thumbnail: photo.state.thumbnailpath, + thumbnailWidth: photo.state.thumbnailsize[0], + thumbnailHeight: photo.state.thumbnailsize[1], + caption: photo.state.name, + } +} + +export const GridGallery = ({ photos }) => photo_to_gallery_photo(x))}/> \ No newline at end of file diff --git a/src/main.js b/src/main.js index f3512a8..df5b14b 100644 --- a/src/main.js +++ b/src/main.js @@ -5,20 +5,32 @@ import { InternalErrorPage } from './error.js'; import { LoadingPage } from './loading.js'; import { ProvideDB, DBTypeEnum, DBSourceEnum } from './database.js'; import { GridGallery } from './gridgallery.js'; -import { user_query_from_search_string, maybe_image_query, do_image_query } from './queries.js'; - +import { UserQuery, user_query_from_search_string, maybe_image_query, do_image_query, maybe_album_query, do_album_query } from './queries.js'; +import { Browser } from './browser.js'; export class LoadedMainPage extends React.Component { state = { - text_query: false, + gallery_user_query: false, + album_browser_tree: false, photos: false, + albums: false, } - onSearchHandler = (q) => { + componentDidMount() { + // Start retrieving the albums list. + var self = this; + var blank_user_query = new UserQuery; + var sql_album_query = maybe_album_query(blank_user_query); + do_album_query(sql_album_query, this.props.database) + .then(albums => { + self.setState({ albums: albums }); + }); + } + + onGalleryUserQueryChangeHandler = gallery_user_query => { var self = this; - var user_query = user_query_from_search_string(q); - var sql_image_query = maybe_image_query(user_query); - this.setState({ text_query: q, photos: false }); + var sql_image_query = maybe_image_query(gallery_user_query); + this.setState({ photos: false }); do_image_query(sql_image_query, this.props.database, this.props.photos_dir, this.props.thumbs_dir) .then(photos => { // Make each photo fetch its thumbnail size before proceeding @@ -34,11 +46,19 @@ export class LoadedMainPage extends React.Component { }); } + onSearchHandler = (q) => { + var self = this; + var query = user_query_from_search_string(q); + this.setState({gallery_user_query: query}); + this.onGalleryUserQueryChangeHandler(query); + } + render() { return ( <> - {this.state.photos && } + {this.state.albums &&
} + {this.state.photos &&
} ); } diff --git a/src/media.js b/src/media.js index 28880d8..caebc73 100644 --- a/src/media.js +++ b/src/media.js @@ -19,9 +19,7 @@ export class Photo extends Media { if(self.state.thumbnailpath) { var img = new Image(); img.onload = function() { - console.log(this); self.state.thumbnailsize = [ this.width, this.height ]; - console.log(self); resolve(); } img.src = self.state.thumbnailpath; diff --git a/src/queries.js b/src/queries.js index da76f67..0786f7c 100644 --- a/src/queries.js +++ b/src/queries.js @@ -23,7 +23,7 @@ export function do_image_query(query, database, collection_path, collection_thum }); } -export function do_album_query(query, database, collection_path, collection_thumbs_path) { +export function do_album_query(query, database) { return new Promise(function (resolve, reject) { var queries = []; queries.push(query); diff --git a/yarn.lock b/yarn.lock index edab6f6..dae918d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -996,7 +996,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1" integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w== @@ -2018,6 +2018,14 @@ anymatch@^2.0.0: micromatch "^3.1.4" normalize-path "^2.1.1" +aphrodite@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-0.5.0.tgz#a4b9a8902662395d2702e70ac7a2b4ca66f25703" + integrity sha1-pLmokCZiOV0nAucKx6K0ymbyVwM= + dependencies: + asap "^2.0.3" + inline-style-prefixer "^2.0.0" + aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -2104,7 +2112,7 @@ arrify@^1.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= -asap@~2.0.6: +asap@^2.0.3, asap@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -2466,6 +2474,11 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bowser@^1.0.0: + version "1.9.4" + resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a" + integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -3756,6 +3769,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-helpers@^5.0.1: version "5.1.3" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821" @@ -4274,6 +4294,11 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exit-on-epipe@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692" @@ -5178,7 +5203,7 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= -hyphenate-style-name@^1.0.3: +hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== @@ -5315,6 +5340,14 @@ ini@^1.3.5: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== +inline-style-prefixer@^2.0.0: + version "2.0.5" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7" + integrity sha1-wVPH6I/YT+9cYC6VqBaLJ3BnH+c= + dependencies: + bowser "^1.0.0" + hyphenate-style-name "^1.0.1" + inquirer@6.5.0: version "6.5.0" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42" @@ -8448,7 +8481,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8659,11 +8692,34 @@ react-error-overlay@^6.0.4: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a" integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA== +react-grid-gallery@^0.5.5: + version "0.5.5" + resolved "https://registry.yarnpkg.com/react-grid-gallery/-/react-grid-gallery-0.5.5.tgz#1b3f3c23a190834e587ab613c96d53ec3af4f0a2" + integrity sha512-DkKg2/Am+VZPDG39fazelTcsZSQrfM/YllnIcWToyUEfOZcrzHxUoqCziCkuTPmCuMbHnrjidBFuDbAFgvSnvQ== + dependencies: + prop-types "^15.5.8" + react-images "^0.5.16" + +react-images@^0.5.16: + version "0.5.19" + resolved "https://registry.yarnpkg.com/react-images/-/react-images-0.5.19.tgz#9339570029e065f9f28a19f03fdb5d9d5aa109d3" + integrity sha512-B3d4W1uFJj+m17K8S65iAyEJShKGBjPk7n7N1YsPiAydEm8mIq9a6CoeQFMY1d7N2QMs6FBCjT9vELyc5jP5JA== + dependencies: + aphrodite "^0.5.0" + prop-types "^15.6.0" + react-scrolllock "^2.0.1" + react-transition-group "2" + react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-photo-gallery@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/react-photo-gallery/-/react-photo-gallery-8.0.0.tgz#04ff9f902a2342660e63e6817b4f010488db02b8" @@ -8672,6 +8728,11 @@ react-photo-gallery@^8.0.0: prop-types "~15.7.2" resize-observer-polyfill "^1.5.0" +react-prop-toggle@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e" + integrity sha512-JmerjAXs7qJ959+d0Ygt7Cb2+4fG+n3I2VXO6JO0AcAY1vkRN/JpZKAN67CMXY889xEJcfylmMPhzvf6nWO68Q== + react-scripts@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.3.0.tgz#f26a21f208f20bd04770f43e50b5bbc151920c2a" @@ -8732,6 +8793,24 @@ react-scripts@3.3.0: optionalDependencies: fsevents "2.1.2" +react-scrolllock@^2.0.1: + version "2.0.7" + resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-2.0.7.tgz#3b879e1fe308fc900ab76e226e9be594c41226fd" + integrity sha512-Gzpu8+ulxdYcybAgJOFTXc70xs7SBZDQbZNpKzchZUgLCJKjz6lrgESx6LHHZgfELx1xYL4yHu3kYQGQPFas/g== + dependencies: + exenv "^1.2.2" + react-prop-toggle "^1.0.2" + +react-transition-group@2: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" + integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== + dependencies: + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-lifecycles-compat "^3.0.4" + react-transition-group@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"