Start work on a browser. Thumbnail aspect ratios correct.

6 years ago · 99b0a4ef4c
parent fd20bc9e14
commit 99b0a4ef4c
7 changed files with 210 additions and 16 deletions
--- 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",
--- a/src/browser.js
+++ 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<all_db_albums.length; i++) {
+        var album = all_db_albums[i];
+        if (album.state.relative_path != "/") { // we already made the base
+            var item = new AlbumTreeItem(
+                album.state.name,
+                album.state.relative_path,
+                []
+            );
+            insert_into_album_tree(tree, item);
+        }
+    };
+    return tree;
+}
+
+export class Browser extends React.Component {
+    state = {
+    }
+
+    render() {
+        console.log("whole tree:", build_albums_tree(this.props.albums));
+        return (
+            <>
+                <p>Browser</p>
+            </>
+        );
+    }
+}
--- 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) => {
@ -14,3 +18,22 @@ const photo_to_gallery_photo = (photo) => {
 }

 export const GridGallery = ({ photos }) => <Gallery photos={photos.map(x => 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 }) => <Gallery enableImageSelection={false} images={photos.map(x => photo_to_gallery_photo(x))}/>
--- 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 (
            <>
                 <SearchBar onSubmit={this.onSearchHandler}/>
-                 {this.state.photos && <GridGallery photos={this.state.photos}/>}
+                 {this.state.albums && <div><Browser albums={this.state.albums}/></div>}
+                 {this.state.photos && <div><GridGallery photos={this.state.photos}/></div>}
            </>
        );
    }
--- 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;
--- 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);
--- 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"