7 | {getItems(tags)}
8 |
9 | ));
10 |
11 | function getItems(tags) {
12 | return Array.from(tags).map(tag => (
13 |
22 | ));
23 | }
24 |
25 | export { GalleriesView };
26 |
--------------------------------------------------------------------------------
/bin/vault/expand-secrets.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const pathPrefix = [__dirname, '..', '..', 'app', 'vault'].join('/');
4 | const variablesPath = path.resolve(pathPrefix, 'variables.json');
5 | const { data: secrets } = require(path.resolve(pathPrefix, 'secrets.json'));
6 | const { variables, files } = Object.keys(secrets).reduce(
7 | (acc, key) => {
8 | const isFile = key.match(/\./);
9 | const value = secrets[key];
10 |
11 | isFile ? acc.files.push([key, value]) : (acc.variables[key] = value);
12 |
13 | return acc;
14 | },
15 | { variables: {}, files: [] }
16 | );
17 |
18 | files.forEach(([key, value]) => {
19 | const filePath = path.resolve(pathPrefix, key);
20 |
21 | fs.writeFileSync(filePath, JSON.stringify(value), 'base64');
22 |
23 | console.log('wrote', filePath);
24 | });
25 |
26 | fs.writeFileSync(variablesPath, JSON.stringify(variables), 'utf8');
27 | console.log('wrote', variablesPath);
28 |
--------------------------------------------------------------------------------
/app/src/observers/images.observer.js:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 |
3 | export function imagesObserver({ environment, lastCreated }) {
4 | return Observable.create(observer => {
5 | const uploads = environment.collections.uploads;
6 | const orderedCollection = window.firebase
7 | .firestore()
8 | .collection(uploads)
9 | .where('environment', '==', environment.environment)
10 | .where('created', '>', lastCreated)
11 | .orderBy('created', 'desc');
12 |
13 | let laggedIds = new Set();
14 | return orderedCollection.onSnapshot(snapshot => {
15 | const results = snapshot.docs
16 | .filter(doc => !laggedIds.has(doc.id))
17 | .map(doc => ({ __id: doc.id, ...doc.data() }));
18 |
19 | results.forEach(({ __id }) => laggedIds.add(__id));
20 |
21 | laggedIds = new Set(snapshot.docs.map(doc => doc.id));
22 |
23 | observer.next(results);
24 | });
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/app/functions/config.json.dist:
--------------------------------------------------------------------------------
1 | {
2 | "apiKeys": {
3 | "googleUrlShortener": "asdfasdfasdfasdfasdf"
4 | },
5 | "algolia": {
6 | "applicationId": "ASDFASDFADSFDSF",
7 | "apiKey": "asdfadsfdsfasfds",
8 | "settings": {
9 | "attributesForFaceting": ["filterOnly(environment)"],
10 | "searchableAttributes": ["filename", "tags"]
11 | }
12 | },
13 | "collections": {
14 | "uploads": "uploads",
15 | "users": "users"
16 | },
17 | "firebase": {
18 | "databaseURL": "https://your-firebase.firebaseio.com",
19 | "storageBucket": "your-firebase.appspot.com",
20 | "apiKey": "asdfsdfdsfasdfadsfsdf",
21 | "authDomain": "your-firebase.firebaseapp.com",
22 | "projectId": "your-firebase",
23 | "serviceAccount": "./service-account.json"
24 | },
25 |
26 | "indexes": {
27 | "uploads": "fogo-uploads"
28 | },
29 | "refs": {
30 | "idTokenRefresh": "notifications/{uid}/idTokenRefresh"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/app/functions/auth/customClaim.onCreate.js:
--------------------------------------------------------------------------------
1 | const { adminUtil, collectionsUtil } = require('../utils');
2 |
3 | module.exports = ({ environment }) => event => {
4 | const user = event.data;
5 | const admin = adminUtil(environment);
6 | const idTokenRefreshPath = environment.refs.idTokenRefresh.replace(/\{uid\}/, user.uid);
7 | const idTokenRefreshRef = admin.database().ref(idTokenRefreshPath);
8 | const collection = admin.firestore().collection(environment.collections.users);
9 | const query = collection.where('isAdmin', '==', true);
10 |
11 | return query
12 | .get()
13 | .then(snapshot => {
14 | const emails = new Set(snapshot.docs.map(doc => doc.data().email));
15 | return (
16 | emails.has(user.email) &&
17 | admin
18 | .auth()
19 | .setCustomUserClaims(user.uid, { admin: true })
20 | .then(() => true)
21 | );
22 | })
23 | .then(isAdmin => idTokenRefreshRef.set(Date.now()).then(() => isAdmin));
24 | };
25 |
--------------------------------------------------------------------------------
/app/src/queries/images.query.js:
--------------------------------------------------------------------------------
1 | export async function imagesQuery({ environment, cursor, images, limit = 10 }) {
2 | const uploads = environment.collections.uploads;
3 | const orderedCollection = window.firebase
4 | .firestore()
5 | .collection(uploads)
6 | .where('environment', '==', environment.environment)
7 | .orderBy('created', 'desc');
8 | const limitedCollection = orderedCollection.limit(+limit);
9 | const query = (cursor && limitedCollection.startAfter(cursor.created)) || limitedCollection;
10 |
11 | const snapshot = await query.get();
12 | const results = snapshot.docs
13 | .map(doc => {
14 | const image = {
15 | __id: doc.id,
16 | ...doc.data(),
17 | };
18 | if (image.tags) {
19 | image.tags = Object.keys(image.tags);
20 | }
21 | return image;
22 | })
23 | .filter(({ deleted }) => !deleted);
24 |
25 | return {
26 | results,
27 | imagesAllLoaded: results.length < +limit,
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/app/src/components/guard/guard.component.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'unistore';
2 | import { store, actions } from '../../datastore';
3 | import { route } from 'preact-router';
4 | import Match from 'preact-router/match';
5 |
6 | function evaluatePath({ path, laggedPath, currentUser }) {
7 | const publicPages = ['embed', 'gallery'];
8 | const parts = new Set(path.split('/'));
9 | const needsToLogIn = !currentUser && !publicPages.find(page => parts.has(page));
10 | const isOAuthRedirect = !laggedPath && currentUser && path == '/login';
11 |
12 | if (needsToLogIn && path != '/login') {
13 | location.pathname = '/login';
14 | } else if (isOAuthRedirect) {
15 | route(laggedPath || '/');
16 | } else if (path == '/') {
17 | route('/images');
18 | }
19 | }
20 |
21 | export default connect('laggedPath,currentUser', actions)(({ laggedPath, currentUser }) => {
22 | return (
23 | 
16 | 
19 |
16 |
24 | 
25 |
26 |
27 | )}
28 |
29 | )
30 | );
31 |
32 | export { ImagesView };
33 |
--------------------------------------------------------------------------------
/app/functions/utils/environment.util.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const admin = require('firebase-admin');
3 | const config = require('../config.json');
4 | const serviceAccountPath = `../${config.firebase.serviceAccount}`;
5 | const { clean } = require('@quiver/firebase-utilities');
6 |
7 | module.exports = functions => {
8 | if (!functions) {
9 | functions = require('firebase-functions');
10 | }
11 | if (!process.env.FIREBASE_CONFIG) {
12 | const serviceAccount = require(serviceAccountPath);
13 | const credential = admin.credential.cert(serviceAccount);
14 | process.env.FIREBASE_CONFIG = JSON.stringify(config.firebase);
15 | }
16 | if (!process.env.GOOGLE_APPLICATION_CREDENTIALS) {
17 | process.env.GOOGLE_APPLICATION_CREDENTIALS = path.resolve(__dirname, serviceAccountPath);
18 | }
19 |
20 | const nodeEnv = process.env.NODE_ENV;
21 | const env = clean({
22 | isProduction: nodeEnv == 'production' || undefined,
23 | isTest: nodeEnv == 'test' || undefined,
24 | isDevelopment: nodeEnv == 'development' || undefined,
25 | });
26 | const nativeConfig = functions.config();
27 | const firebaseConfig = Object.keys(nativeConfig).length ? nativeConfig : config.firebase;
28 |
29 | return Object.assign(config, firebaseConfig, { env, nodeEnv });
30 | };
31 |
--------------------------------------------------------------------------------
/app/src/components/search/search.scss:
--------------------------------------------------------------------------------
1 | .icon {
2 | cursor: pointer;
3 | margin: 0 1rem;
4 | }
5 |
6 | .searchBar {
7 | display: flex;
8 | flex-grow: 1;
9 | }
10 |
11 | .searchInput {
12 | flex-grow: 1;
13 | position: relative;
14 | opacity: 0;
15 |
16 | input {
17 | position: absolute;
18 | top: -20px;
19 | bottom: -20px;
20 | border: 0;
21 | outline: none;
22 | width: calc(100% - 5rem);
23 |
24 | padding: 0.5rem 2rem;
25 | font-size: 2rem;
26 | font-family: 'mr-eaves-modern', arial, sans-serif;
27 | font-weight: 800;
28 | font-style: italic;
29 |
30 | color: var(--mdc-theme-primary);
31 |
32 | &::placeholder {
33 | color: var(--mdc-theme-primary);
34 | }
35 | }
36 | }
37 |
38 | .searchByAlgolia {
39 | position: absolute;
40 | bottom: -20px;
41 | right: 20px;
42 | z-index: 1;
43 | }
44 |
45 | .clear {
46 | position: absolute;
47 | top: 0;
48 | right: 2rem;
49 | z-index: 1;
50 |
51 | cursor: pointer;
52 | }
53 |
54 | .searchBar[searching] {
55 | // position: fixed;
56 | // top: 0;
57 | // right: 0;
58 | // bottom: 0;
59 | // left: 0;
60 |
61 | .searchInput {
62 | opacity: 1;
63 | }
64 |
65 | input {
66 | background: white;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/app/src/queries/imageVersion.query.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { imageQuery } from './image.query';
3 | import { mappedActions } from '../datastore';
4 | const { updateImage } = mappedActions;
5 |
6 | export async function imageVersionQuery({ environment, record, versionName }) {
7 | let imageUrl = `${environment.urls.image}?record=${record}`;
8 |
9 | if (versionName != 'original') {
10 | const isHeight = versionName[0] == 'x';
11 | const versionType = (isHeight && 'height') || 'width';
12 | const versionParam = (isHeight && versionName.slice(1)) || versionName;
13 | imageUrl += `&${versionType}=${versionParam}`;
14 | }
15 |
16 | const { data: url } = await axios.get(imageUrl);
17 | return url;
18 | }
19 |
20 | const loadingQueue = new Set();
21 | export async function loadImageVersionIfNecessary({
22 | environment,
23 | image,
24 | versionName = 'original',
25 | }) {
26 | const { name, __id: id } = image;
27 | if (!loadingQueue.has(name) && (!image.versions || !image.versions[versionName])) {
28 | loadingQueue.add(name);
29 | const url = await imageVersionQuery({ environment, record: id, versionName });
30 | const updatedImage = await imageQuery(environment, id);
31 | updateImage(updatedImage);
32 | loadingQueue.delete(name);
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/app/functions/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "functions",
3 | "description": "Cloud Functions for Firebase",
4 | "scripts": {
5 | "serve": "firebase serve --only functions",
6 | "shell": "firebase experimental:functions:shell",
7 | "start": "npm run shell",
8 | "deploy": "firebase deploy --only functions",
9 | "logs": "firebase functions:log",
10 | "test": "NODE_ENV=test jest",
11 | "test:watch": "NODE_ENV=test jest --watchAll",
12 | "debug": "NODE_ENV=test node --inspect --debug-brk --nolazy ./node_modules/jest/bin/jest.js --runInBand",
13 | "version": "node --version",
14 | "protocol": "legacy"
15 | },
16 | "dependencies": {
17 | "@google-cloud/storage": "^3.3.1",
18 | "@quiver/firebase-utilities": "^0.0.5",
19 | "algoliasearch": "^3.35.1",
20 | "child_process": "^1.0.2",
21 | "cors": "^2.8.5",
22 | "exif-parser": "^0.1.12",
23 | "exif-reader": "^1.0.3",
24 | "firebase-admin": "~8.6.0",
25 | "firebase-functions": "^3.2.0",
26 | "fs": "^0.0.1-security",
27 | "google-url": "^0.0.4",
28 | "path": "^0.12.7",
29 | "request": "^2.88.0"
30 | },
31 | "private": true,
32 | "devDependencies": {
33 | "jest": "^24.9.0",
34 | "node-mocks-http": "^1.8.0"
35 | },
36 | "engines": {
37 | "node": "8"
38 | },
39 | "jest": {
40 | "testEnvironment": "node"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/app/src/components/drawer/drawer.component.js:
--------------------------------------------------------------------------------
1 | import style from './drawer.scss';
2 | import { connect } from 'unistore';
3 | import { actions } from '../../datastore';
4 | import { Link } from 'preact-router/match';
5 |
6 | // Preact Material Components
7 | import Drawer from 'preact-material-components/Drawer';
8 | import List from 'preact-material-components/List';
9 | import 'preact-material-components/Drawer/style.css';
10 | import 'preact-material-components/List/style.css';
11 |
12 | export default connect('showMenu', actions)(({ showMenu, toggleMenu }) => (
13 | 17 | {(searching && 'Search results') || 'All images'} 18 | {searchResults && ` (${searchResults.hits.length}/${searchResults.nbHits})`} 19 |
20 |
14 |
15 |
16 |
28 |
29 |
30 | ));
31 |
--------------------------------------------------------------------------------
/app/src/components/tags/tags.scss:
--------------------------------------------------------------------------------
1 | .form {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .tagsInput {
7 | flex-grow: 1;
8 | }
9 |
10 | .globalTagItems,
11 | .tagItems {
12 | display: flex;
13 | flex-wrap: wrap;
14 | padding: 0 0 5rem;
15 | max-width: calc(100vw - 3rem);
16 | }
17 |
18 | .globalTagItemsTitle {
19 | margin: 4rem 0 0;
20 | }
21 |
22 | .list {
23 | padding: 0;
24 | list-style: none;
25 |
26 | li {
27 | display: flex;
28 | margin-bottom: 1rem;
29 | }
30 | }
31 |
32 | .secondary {
33 | padding: 0 1rem;
34 |
35 | h3 {
36 | margin-top: 0;
37 | }
38 | }
39 |
40 | .image {
41 | height: 200px;
42 | width: 200px;
43 | background-position: center center;
44 | background-repeat: no-repeat;
45 | background-color: #fafafa;
46 | }
47 |
48 | .tagItems {
49 | max-width: 500px;
50 | padding: 0;
51 | }
52 |
53 | .tagItem {
54 | display: flex;
55 | align-items: center;
56 |
57 | font-size: 1.5rem;
58 |
59 | background: #eee;
60 | border-radius: 22px;
61 | float: left;
62 | padding: 5px;
63 | margin: 0.5rem 1rem 0.5rem 0rem;
64 | padding: 0.5rem;
65 |
66 | img {
67 | background: var(--mdc-theme-secondary-dark);
68 | border-radius: 50%;
69 | cursor: pointer;
70 | padding: 4px;
71 | }
72 |
73 | span {
74 | display: inline-block;
75 | margin: 0 .5rem;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/app/src/components/views/gallery.view.scss:
--------------------------------------------------------------------------------
1 | .galleryView {
2 | height: 100vh;
3 | width: 100vw;
4 |
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 |
9 | --color-transparent: rgba(255, 255, 255, .7);
10 | }
11 |
12 | .galleryView[focused] {
13 | i {
14 | visibility: visible;
15 | }
16 | }
17 |
18 | .image {
19 | max-height: calc(100vh - 1rem);
20 | max-width: calc(100vw - 1rem);
21 | }
22 |
23 | .details {
24 | background: var(--color-transparent);
25 | font-family: sans-serif;
26 | min-height: 3rem;
27 |
28 | position: absolute;
29 | bottom: 0rem;
30 | right: 0;
31 | left: 0;
32 |
33 | p {
34 | margin: 0 3rem;
35 | padding: 0.5rem;
36 | }
37 |
38 | i {
39 | position: absolute;
40 | bottom: 5px;
41 | right: 5.5rem;
42 | visibility: hidden;
43 | }
44 |
45 | aside {
46 | float: right;
47 | padding: 0.25rem 1rem;
48 | margin: 0;
49 |
50 | position: absolute;
51 | bottom: 0;
52 | right: 2.5rem;
53 | }
54 |
55 | img {
56 | background: var(--color-transparent);
57 | cursor: pointer;
58 | padding: 0.5rem;
59 |
60 | position: absolute;
61 | height: calc(100% - 1rem);
62 | bottom: 0;
63 | }
64 |
65 | .right {
66 | right: 0rem;
67 | }
68 |
69 | .left {
70 | left: 0rem;
71 | transform: rotate(180deg);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/app/src/utils/batch.util.js:
--------------------------------------------------------------------------------
1 | const methods = new Set(['set', 'update', 'delete']);
2 |
3 | export function batch(method, timeout = 300) {
4 | if (!methods.has(method)) {
5 | throw new Error(`Method not valid: ${method}`);
6 | } else {
7 | let jobs = [];
8 | let timer;
9 |
10 | function execute(jobs) {
11 | const batch = window.firebase.firestore().batch();
12 | const localJobs = pullJobs(jobs);
13 |
14 | localJobs.forEach(({ ref, payload }) => batch[method](ref, payload));
15 | batch
16 | .commit()
17 | .then(() => resolveJobs(localJobs))
18 | .catch(error => {
19 | console.error('batch error', error);
20 | });
21 | }
22 |
23 | function pullJobs(jobs) {
24 | const result = [];
25 | while (jobs.length) {
26 | result.push(jobs.pop());
27 | }
28 | return result;
29 | }
30 |
31 | function resolveJobs(jobs) {
32 | jobs.forEach(({ resolve }) => resolve());
33 | }
34 |
35 | return function addToBatch(ref, payload) {
36 | return new Promise((resolve, reject) => {
37 | jobs.push({ ref, payload, resolve });
38 |
39 | if (timer) {
40 | clearTimeout(timer);
41 | }
42 |
43 | if (jobs.length == 4) {
44 | execute(jobs);
45 | } else {
46 | timer = setTimeout(() => execute(jobs), timeout);
47 | }
48 | });
49 | };
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/app/src/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://use.typekit.net/vjz5ruy.css');
2 |
3 | html,
4 | body {
5 | font-family: 'mr-eaves-modern', arial, sans-serif;
6 | font-size: 16px;
7 | font-weight: 300;
8 | margin: 0;
9 |
10 | --mdc-theme-primary: #29b6f6;
11 | --mdc-theme-primary-light: #73e8ff;
12 | --mdc-theme-primary-dark: #0086c3;
13 | --mdc-theme-secondary: #ec407a;
14 | --mdc-theme-secondary-light: #ff77a9;
15 | --mdc-theme-secondary-dark: #b4004e;
16 | }
17 |
18 | input {
19 | font-family: 'mr-eaves-modern', arial, sans-serif;
20 | }
21 |
22 | a {
23 | text-decoration: none;
24 | }
25 |
26 | a,
27 | a:visited {
28 | color: inherit;
29 | }
30 |
31 | a.active a {
32 | color: white !important;
33 | cursor: default;
34 | background: gray;
35 | }
36 |
37 | h1 {
38 | text-align: center;
39 | }
40 |
41 | .app-wrapper #gallery-view {
42 | background: black;
43 | }
44 |
45 | .router-wrapper {
46 | min-height: calc(100vh - 6rem);
47 |
48 | display: flex;
49 | justify-content: center;
50 | align-items: center;
51 | padding-top: 4rem;
52 | }
53 |
54 | .firebase-authentication {
55 | max-width: calc(100vw - 2rem);
56 | }
57 |
58 | .storage-uploader {
59 | max-width: 43rem;
60 | margin: 2rem;
61 | }
62 |
63 | .storage-uploader .buttons {
64 | margin-bottom: 3rem;
65 | }
66 |
67 | .storage-uploader .mdc-grid-list {
68 | --mdc-theme-primary: rgba(0, 0, 0, 0.8);
69 | --mdc-grid-list-tile-width: 20rem;
70 | }
71 |
72 | .storage-uploader .mdc-grid-tile__primary-content {
73 | height: 156px !important;
74 | }
75 |
--------------------------------------------------------------------------------
/app/data/sample-storage-event.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": {
3 | "bucket": "quiver-four.appspot.com",
4 | "contentDisposition": "inline; filename*=utf-8''gif.gif",
5 | "contentType": "image/gif",
6 | "crc32c": "LdwUxw==",
7 | "etag": "CJTcx9ycjNgCEAE=",
8 | "generation": "1513348026986004",
9 | "id": "quiver-four.appspot.com/development/uploads/gif.gif/1513348026986004",
10 | "kind": "storage#object",
11 | "md5Hash": "NzNkZWI0ZTM2MjU0MmZlNjM0NWU4ZDc1Mjg5MGI4MjI=",
12 | "mediaLink":
13 | "https://www.googleapis.com/download/storage/v1/b/quiver-four.appspot.com/o/development%2Fuploads%2Fgif.gif?generation=1513348026986004&alt=media",
14 | "metadata": { "firebaseStorageDownloadTokens": "3a199f49-0f02-4d17-a3e4-43a50747d833" },
15 | "metageneration": "1",
16 | "name": "development/uploads/gif.gif",
17 | "resourceState": "exists",
18 | "selfLink":
19 | "https://www.googleapis.com/storage/v1/b/quiver-four.appspot.com/o/development%2Fuploads%2Fgif.gif",
20 | "size": "501962",
21 | "storageClass": "STANDARD",
22 | "timeCreated": "2017-12-15T14:27:06.655Z",
23 | "timeStorageClassUpdated": "2017-12-15T14:27:06.655Z",
24 | "updated": "2017-12-15T14:27:06.655Z"
25 | },
26 | "eventId": "10602881481377",
27 | "eventType": "providers/cloud.storage/eventTypes/object.change",
28 | "resource":
29 | "projects/_/buckets/quiver-four.appspot.com/objects/development/uploads/gif.gif#1513348026986004",
30 | "timestamp": "2017-12-15T14:27:07.203Z",
31 | "params": {}
32 | }
33 |
--------------------------------------------------------------------------------
/app/src/components/image-detail/imageDetail.scss:
--------------------------------------------------------------------------------
1 | .overlay {
2 | background: black;
3 | position: fixed;
4 | top: 0;
5 | right: 0;
6 | bottom: 0;
7 | left: 0;
8 |
9 | display: flex;
10 | flex-wrap: wrap;
11 | justify-content: center;
12 | align-items: start;
13 |
14 | z-index: 10;
15 | }
16 |
17 | .clear {
18 | position: fixed;
19 | top: 1rem;
20 | right: 1rem;
21 | background: white;
22 | padding: 1rem;
23 | border-radius: 50%;
24 | z-index: 1;
25 | }
26 |
27 | .image {
28 | max-height: 100vh;
29 | max-width: 100vw;
30 | }
31 |
32 | .description {
33 | background: rgba(0, 0, 0, .9);
34 | color: white;
35 | list-style: none;
36 | font-size: 1.5rem;
37 | padding: 1rem;
38 | margin: 0;
39 |
40 | position: absolute;
41 | bottom: 0;
42 |
43 | li {
44 | margin-bottom: 0.5rem;
45 | overflow: hidden;
46 | max-width: calc(100vw - 5rem);
47 | white-space: nowrap;
48 | text-overflow: ellipsis;
49 | }
50 |
51 | img {
52 | position: relative;
53 | top: 4px;
54 | }
55 |
56 | }
57 |
58 | .dimensions {
59 | display: inline-block;
60 | margin: 0 1rem;
61 | min-width: 8rem;
62 | }
63 |
64 | .copy {
65 | cursor: pointer;
66 | }
67 |
68 | .textarea {
69 | padding-top: 1rem;
70 | position: relative;
71 |
72 | textarea {
73 | width: 100%;
74 | }
75 | aside {
76 | position: absolute;
77 | right: 0;
78 | bottom: 1rem;
79 | z-index: 1;
80 |
81 | color: black;
82 | font-size: 1rem;
83 | }
84 | }
--------------------------------------------------------------------------------
/app/functions/storage/uploads.onChange.spec.js:
--------------------------------------------------------------------------------
1 | const uploadsOnChange = require('./uploads.onChange');
2 | const { adminUtil, collectionsUtil, environmentUtil } = require('../utils');
3 | const environment = environmentUtil();
4 | const admin = adminUtil(environment);
5 | const uploads = collectionsUtil(environment).get('uploads');
6 | const db = admin.firestore();
7 | const collection = db.collection(uploads);
8 |
9 | describe('uploadsOnChange', () => {
10 | let fn;
11 | beforeEach(() => {
12 | fn = uploadsOnChange({ environment });
13 | });
14 |
15 | // afterAll(done => {
16 | // collection
17 | // .where('isTest', '==', true)
18 | // .get()
19 | // .then(snapshot => {
20 | // const batch = db.batch();
21 | // snapshot.docs.forEach(doc => batch.delete(doc.ref));
22 | // return batch.commit();
23 | // });
24 | // });
25 |
26 | it('should ignore files outside an "upload" directory', done => {
27 | fn({ name: 'not-uploads/test.gif', md5Hash: 'not+a+hash/but-with+a+slash' }).then(
28 | ({ skipped }) => {
29 | expect(skipped).toEqual(true);
30 | done();
31 | }
32 | );
33 | });
34 |
35 | it('should process an upload', done => {
36 | const name = 'test-bypass/uploads/exif.jpg';
37 | fn({ name, resourceState: 'exists', md5Hash: 'not+a+hash/but-with+a+slash' }).then(result => {
38 | expect(result.name).toEqual(name);
39 | expect(result.isTest).toEqual(true);
40 | expect(result.environment).toEqual('test-bypass');
41 | done();
42 | });
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/app/src/observers/search.observer.js:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 | import { store } from '../datastore';
3 |
4 | export function searchObserver({ environment }) {
5 | const { applicationId, apiKey } = environment.algolia;
6 | const { algoliasearch } = window;
7 | const client = algoliasearch(applicationId, apiKey);
8 | const index = client.initIndex(environment.indexes.uploads);
9 | const timeout = 500;
10 |
11 | return Observable.create(observer => {
12 | let lastSearched;
13 | let timer;
14 | const unsubscribe = store.subscribe(({ search }) => {
15 | if (timer) {
16 | clearTimeout(timer);
17 | }
18 | if (search && search != lastSearched) {
19 | timer = setTimeout(() => {
20 | lastSearched = search;
21 | index
22 | .search(search, {
23 | facetFilters: `environment:${environment.environment}`,
24 | hitsPerPage: 100,
25 | })
26 | .then(results => {
27 | const hits = results.hits.map(result => ({
28 | __id: result.objectID,
29 | ...result,
30 | }));
31 | observer.next({ ...results, hits });
32 | });
33 | }, timeout);
34 | }
35 | });
36 |
37 | function bustCache() {
38 | client.clearCache();
39 | }
40 | window.addEventListener('search-cache-bust', bustCache);
41 |
42 | return () => {
43 | unsubscribe();
44 | window.removeEventListener('search-cache-bust', bustCache);
45 | };
46 | });
47 | }
48 |
--------------------------------------------------------------------------------
/app/src/assets/svg/three-dots.svg:
--------------------------------------------------------------------------------
1 |
2 |
34 |
--------------------------------------------------------------------------------
/app/src/environment.js.dist:
--------------------------------------------------------------------------------
1 | // Environment Variables
2 | const defaults = {
3 | algolia: {
4 | applicationId: 'ASDFADFASDF',
5 | apiKey: 'asdfasdfasdfadfaf',
6 | },
7 | collections: {
8 | uploads: 'uploads',
9 | },
10 | functionsEnvironment: 'production',
11 | indexes: {
12 | uploads: 'fogo-uploads',
13 | },
14 | refs: {
15 | idTokenRefresh: 'notifications/{uid}/idTokenRefresh',
16 | },
17 | urls: {
18 | image: 'https://your-cloud-functions-instance.cloudfunctions.net/image',
19 | },
20 | };
21 | const production = {
22 | ...defaults,
23 | environment: 'production',
24 | symbol: Symbol('production'),
25 | storage: { path: 'production/uploads' },
26 | };
27 | const howtofirebase = {
28 | ...defaults,
29 | environment: 'howtofirebase',
30 | symbol: Symbol('howtofirebase'),
31 | storage: { path: 'howtofirebase/uploads' },
32 | };
33 | const development = {
34 | ...defaults,
35 | environment: 'development',
36 | symbol: Symbol('development'),
37 | storage: { path: 'development/uploads' },
38 | };
39 |
40 | // Lookup Maps
41 | const environments = new Map([
42 | [production.symbol, production],
43 | [howtofirebase.symbol, howtofirebase],
44 | [development.symbol, development],
45 | ]);
46 | const hosts = new Map([
47 | ['yoursite.com', production.symbol],
48 | ['fogo.howtofirebase.com', howtofirebase.symbol],
49 | ['quiver-four.firebaseapp.com', howtofirebase.symbol],
50 | ['dev.chrisesplin.com', development.symbol],
51 | ['localhost', development.symbol],
52 | ]);
53 |
54 | // Lookup by location.hostname
55 | export default environments.get(hosts.get(location.hostname));
56 |
--------------------------------------------------------------------------------
/app/src/components/search/search.component.js:
--------------------------------------------------------------------------------
1 | import style from './search.scss';
2 | import { connect } from 'unistore';
3 | import { actions, mappedActions, store } from '../../datastore';
4 | import linkState from 'linkstate';
5 | import { searchObserver } from '../../observers';
6 |
7 | // svg
8 | import searchSvg from '../../assets/svg/search.svg';
9 | import clear from '../../assets/svg/clear.svg';
10 |
11 | const { environment } = store.getState();
12 | const { setSearchResults } = mappedActions;
13 | searchObserver({ environment }).subscribe(setSearchResults);
14 |
15 | export default connect('search,searching', actions)(
16 | ({ search, searching, setSearch, setSearching }) => {
17 | let input;
18 | function handleKeyup({ key }) {
19 | if (key == 'Escape') {
20 | if (input.value) {
21 | input.value = '';
22 | } else {
23 | setSearching(false);
24 | input.blur();
25 | }
26 | }
27 | }
28 |
29 | function clearInput() {
30 | input.value = '';
31 | input.focus();
32 | }
33 |
34 | return (
35 | -
17 |
18 |
36 | 
input.focus()} />
51 |
52 | );
53 | }
54 | );
55 |
--------------------------------------------------------------------------------
/app/src/assets/svg/spinner.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dev/workspace/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM ubuntu:18.04
2 |
3 | RUN echo "rerun me"
4 |
5 | RUN apt update
6 |
7 | RUN apt install -y vim curl git-core zsh build-essential libssl-dev imagemagick
8 |
9 | # Install Yarn
10 | RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
11 | RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
12 | RUN apt install apt-transport-https
13 | RUN apt update && apt install --no-install-recommends yarn
14 |
15 | # Dotfiles
16 | RUN git clone https://github.com/deltaepsilon/dotfiles.git ~/dotfiles
17 | RUN git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
18 |
19 | WORKDIR /root
20 |
21 | # Install Oh My ZSH
22 | RUN sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" || true
23 | RUN rm .zshrc
24 |
25 | # Install NVM and set up Node
26 | ENV NVM_DIR /root/.nvm
27 | ENV NODE_VERSION lts/carbon
28 | RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash \
29 | && . $NVM_DIR/nvm.sh \
30 | && nvm install $NODE_VERSION \
31 | && nvm alias default $NODE_VERSION \
32 | && nvm use default
33 |
34 | ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
35 | ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
36 |
37 | # Install gsutil
38 | RUN echo "deb http://packages.cloud.google.com/apt cloud-sdk-stretch main" | tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
39 | RUN curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add -
40 | RUN apt update && apt install -y google-cloud-sdk
41 |
42 | # Set up dotfiles
43 | WORKDIR /root/dotfiles
44 | RUN ./setup.sh
45 |
46 | WORKDIR /root
47 | RUN sed -i 's/\/Users\/quiver/\/root/g' .zshrc
48 |
49 | # Custom ZSH config
50 | COPY .zshrc .append-to-zshrc
51 | RUN sed -i 's/\r//' .append-to-zshrc
52 | RUN cat .append-to-zshrc >> .zshrc
53 |
54 | # Rock and Roll
55 | WORKDIR /app
56 |
57 | CMD [ "tail", "-f", "/dev/null" ]
--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@quiver/fogo",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
7 | "build": "rm -rf build && preact build --template template.html --no-prerender",
8 | "build:windows": "preact build --template template.html --no-prerender",
9 | "serve": "preact build --template template.html --no-prerender && preact serve",
10 | "dev": "preact watch --template template.html",
11 | "test": "NODE_ENV=test jest",
12 | "test:watch": "NODE_ENV=test jest --watch",
13 | "deploy": "yarn build && firebase deploy",
14 | "deploy:database": "firebase deploy --only database",
15 | "deploy:firestore": "firebase deploy --only firestore",
16 | "deploy:functions": "firebase deploy --only functions",
17 | "deploy:hosting": "yarn build && firebase deploy --only hosting",
18 | "deploy:storage": "firebase deploy --only storage",
19 | "lint": "eslint src"
20 | },
21 | "eslintConfig": {
22 | "extends": "eslint-config-synacor"
23 | },
24 | "eslintIgnore": [
25 | "build/*"
26 | ],
27 | "devDependencies": {
28 | "babel-plugin-fast-async": "^6.1.2",
29 | "eslint": "^5.16.0",
30 | "eslint-config-synacor": "^3.0.3",
31 | "firebase-tools": "^7.1.0",
32 | "if-env": "^1.0.0",
33 | "jest": "^24.7.1",
34 | "preact-cli": "^2.0.0",
35 | "uglifyjs-webpack-plugin": "^2.1.2"
36 | },
37 | "dependencies": {
38 | "@quiver/firebase-authentication": "^0.0.2",
39 | "@quiver/storage-uploader": "^0.0.4",
40 | "@reactivex/rxjs": "^5.5.3",
41 | "axios": "^0.18.0",
42 | "linkstate": "^1.1.0",
43 | "node-sass": "^4.11.0",
44 | "preact": "^8.4.2",
45 | "preact-cli-plugin-async": "^2.0.0",
46 | "preact-compat": "^3.18.4",
47 | "preact-material-components": "^1.3.2",
48 | "preact-router": "^2.6.0",
49 | "sass-loader": "^7.1.0",
50 | "unistore": "^3.4.1"
51 | },
52 | "jest": {
53 | "roots": [
54 | "src"
55 | ]
56 | },
57 | "private": true
58 | }
59 |
--------------------------------------------------------------------------------
/app/functions/firestore/algolia.onWrite.spec.js:
--------------------------------------------------------------------------------
1 | const algoliaOnWrite = require('./algolia.onWrite');
2 | const { adminUtil, algoliaUtil, collectionsUtil, environmentUtil } = require('../utils');
3 | const environment = environmentUtil();
4 | const admin = adminUtil(environment);
5 | const uploads = collectionsUtil(environment).get('uploads');
6 | const db = admin.firestore();
7 | const collection = db.collection(uploads);
8 |
9 | describe('algoliaOnWrite', () => {
10 | const setSettings = jest.fn(() => Promise.resolve());
11 | let client, initObject, addObject, deleteObject;
12 | beforeEach(() => {
13 | client = algoliaUtil(environment);
14 | addObject = jest.fn(() => Promise.resolve());
15 | deleteObject = jest.fn(() => Promise.resolve());
16 | addObject = jest.fn(() => Promise.resolve());
17 |
18 | jest
19 | .spyOn(client, 'initIndex')
20 | .mockImplementation(() => ({ addObject, deleteObject, setSettings }));
21 | });
22 |
23 | let fn;
24 | beforeEach(() => {
25 | fn = algoliaOnWrite({ environment });
26 | });
27 |
28 | const id = 'fake-id';
29 | const data = {
30 | environment: 'test env',
31 | filename: 'fake filename',
32 | versions: 'fake versions',
33 | };
34 | let params = { id };
35 | let change;
36 | beforeEach(() => {
37 | change = { after: { data: () => data } };
38 | });
39 |
40 | afterEach(() => client.initIndex.mockRestore());
41 |
42 | it('should call deleteObject', done => {
43 | fn({ after: { data: () => null } }, { params }).then(result => {
44 | expect(deleteObject).toHaveBeenCalledWith(id);
45 | done();
46 | });
47 | });
48 |
49 | it('should call addObject', done => {
50 | fn(change, { params }).then(result => {
51 | const record = Object.assign({ objectID: id }, data);
52 | expect(addObject).toHaveBeenCalledWith(record);
53 | done();
54 | });
55 | });
56 |
57 | it('should call setSettings exactly once', done => {
58 | Promise.all([fn(change, { params }), fn(change, { params })]).then(() => {
59 | expect(setSettings.mock.calls.length).toEqual(1);
60 | expect(setSettings).toHaveBeenCalledWith(environment.algolia.settings);
61 | done();
62 | });
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/app/src/datastore/index.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'unistore';
2 | import * as rawActions from './actions';
3 | import environment from '../environment';
4 |
5 | let startingState = {
6 | currentUser: null,
7 | environment,
8 | images: [],
9 | image: null,
10 | imagesAllLoaded: false,
11 | imagesObserver: null,
12 | laggedPath: null,
13 | laggedCurrentUser: null,
14 | listState: null,
15 | isAdmin: false,
16 | path: null,
17 | search: '',
18 | searching: false,
19 | searchResults: null,
20 | selecting: false,
21 | selection: new Set(),
22 | showMenu: false,
23 | tags: new Set(),
24 | timestamp: Date.now(),
25 | token: null,
26 | };
27 | const serialized = localStorage.getItem('fogo-state');
28 | if (serialized) {
29 | startingState = deserialize(serialized);
30 | const { images } = startingState;
31 | startingState.images = truncateImages(images);
32 | }
33 |
34 | const store = createStore(startingState);
35 |
36 | const actions = store => rawActions;
37 |
38 | const mappedActions = {};
39 | for (let i in rawActions) {
40 | mappedActions[i] = store.action(rawActions[i]);
41 | }
42 |
43 | store.subscribe(state => {
44 | const { laggedCurrentUser, currentUser } = state;
45 |
46 | if (currentUser) {
47 | const serialized = serialize(state);
48 | localStorage.setItem('fogo-state', serialized);
49 | } else if (laggedCurrentUser) {
50 | localStorage.removeItem('fogo-state');
51 | }
52 |
53 | window.state = state;
54 | });
55 |
56 | function serialize(state) {
57 | const { images, selection, selecting, tags } = state;
58 | const serialized = {
59 | images,
60 | selection: Array.from(selection),
61 | selecting,
62 | tags: Array.from(tags),
63 | };
64 | return JSON.stringify(serialized);
65 | }
66 |
67 | function deserialize(serialized) {
68 | const { images, selection: selectionArray, selecting, tags } = JSON.parse(
69 | serialized
70 | );
71 | return {
72 | ...startingState,
73 | images,
74 | selection: new Set(selectionArray),
75 | selecting,
76 | tags: new Set(tags),
77 | };
78 | }
79 |
80 | function truncateImages(images) {
81 | return images.slice(0, 25);
82 | }
83 |
84 | export { actions, mappedActions, store };
85 |
--------------------------------------------------------------------------------
/app/src/components/nav/nav.component.js:
--------------------------------------------------------------------------------
1 | import style from './nav.scss';
2 | import { connect } from 'unistore';
3 | import { actions } from '../../datastore';
4 | import { Link } from 'preact-router/match';
5 |
6 | // Preact Material Components
7 | import Button from 'preact-material-components/Button';
8 | import Toolbar from 'preact-material-components/Toolbar';
9 | import 'preact-material-components/Button/style.css';
10 | import 'preact-material-components/Toolbar/style.css';
11 |
12 | import Search from '../search/search.component';
13 |
14 | // svg
15 | import add from '../../assets/svg/add.svg';
16 | import deleteSvg from '../../assets/svg/delete.svg';
17 | import menu from '../../assets/svg/menu.svg';
18 |
19 | export default connect('isAdmin,path,selection,showMenu,token', actions)(
20 | ({
21 | isAdmin,
22 | path,
23 | selection,
24 | showMenu,
25 | token,
26 | toggleMenu,
27 | deleteSelection,
28 | addSelectionToGallery,
29 | }) => (
30 |
37 | (input = ref)}
39 | type="text"
40 | placeholder="Search"
41 | onFocus={() => setSearching(true)}
42 | onBlur={() => !search && setSearching(false)}
43 | onInput={linkState(store, 'search')}
44 | onKeyup={handleKeyup}
45 | />
46 | 
47 | 
clearInput()} />
48 |
49 |
50 |
47 |
42 | {path == '/images' && [
43 |
65 |
45 | {isAdmin &&
46 | !!selection.size && [
47 |
48 |
54 | ,
55 | 
,
61 | ]}
62 |
,
63 | ]}
64 |
53 | {image && (
54 |
55 | 
60 |
61 | )}
62 |
63 |
85 | );
86 | }
87 |
88 | // Manage state
89 | const LOCALSTORAGE_NAME = 'fogo-gallery';
90 | const savedString = window.localStorage.getItem(LOCALSTORAGE_NAME);
91 | const saved = JSON.parse(savedString);
92 | const now = Date.now();
93 |
94 | function getImages({ environment, images, tag, setImages }) {
95 | if (!images) {
96 | if (isSavedValid({ now, saved, tag })) {
97 | setImages(saved.images);
98 | } else {
99 | imagesByTagQuery({ environment, tag }).then(images => {
100 | setImages(images);
101 | });
102 | }
103 | }
104 | }
105 |
106 | function isSavedValid({ now, saved, tag }) {
107 | const tenMinutes = 1000 * 60 * 10;
108 | return !!saved && saved.tag == tag && saved.timestamp + tenMinutes > now;
109 | }
110 |
111 | function saveToLocalStorage({ images, tag }) {
112 | const payload = {
113 | images,
114 | tag,
115 | timestamp: Date.now(),
116 | };
117 | localStorage.setItem(LOCALSTORAGE_NAME, JSON.stringify(payload));
118 | }
119 |
120 | function ensureOriginal({ environment, image, setImage }) {
121 | if (image && (!image.versions || !image.versions.original)) {
122 | imageVersionQuery({ environment, record: image.__id, versionName: 'original' }).then(url => {
123 | image.versions = {
124 | original: {
125 | url,
126 | },
127 | };
128 | setImage(image);
129 | });
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/app/src/components/image-detail/imageDetail.component.js:
--------------------------------------------------------------------------------
1 | import style from './imageDetail.scss';
2 | import { connect } from 'unistore';
3 | import { updateImageQuery } from '../../queries';
4 | import { mappedActions } from '../../datastore';
5 | const { setImage } = mappedActions;
6 |
7 | // SVG
8 | import spinner from '../../assets/svg/spinner.svg';
9 | import contentCopy from '../../assets/svg/content-copy.svg';
10 |
11 | export default function imageDetail({ environment, image, isAdmin }) {
12 | const version = getVersion(image);
13 | const versionRows = image && getVersionRows(image);
14 |
15 | loadImageIfMissing(image);
16 |
17 | const setDescriptionState = descriptionState => {
18 | this.setState({ descriptionState });
19 | };
20 |
21 | return (
22 | image && (
23 |
64 | {image && [
65 | 
,
76 | ,
82 | ]}
83 |
84 | {image.description}
, 66 | ← →, 67 | , 70 |,
76 | ,
82 | ]}
83 |
24 | 
25 | 
30 |
53 | )
54 | );
55 | }
56 |
57 | function loadImageIfMissing(image) {
58 | if (image && !getVersion(image)) {
59 | setImage({ ...image, versions: { original: 'loading' } });
60 | }
61 | }
62 |
63 | function getVersion(image) {
64 | const versionName = 'original';
65 | const { versions } = image || {};
66 | return versions && versions[versionName];
67 | }
68 |
69 | function getVersionRows({ exifTags, versions }) {
70 | return Object.keys(versions).map(key => {
71 | const version = versions[key];
72 | if (version != 'loading') {
73 | const dimensions = getDimensions({ exifTags, key });
74 | const url = getUrl(version);
75 | const markdown = getMarkdown(version);
76 |
77 | return [
78 |
25 | -
31 |
- {image.name.split('/').pop()} 32 | {image.exifTags && ( 33 |
- 34 | {image.contentType} @ {image.exifTags.ExifImageHeight}x{image.exifTags.ExifImageWidth} 35 | 36 | )} 37 | {image.exifTags &&
- {new Date(image.exifTags.CreateDate).toString()} } 38 | {versionRows} 39 | {isAdmin && ( 40 |
41 |
48 |
49 |
50 | )}
51 |
58 | {(isGallery && {handlePath} ,
60 | (this.snackbar = snackbar)} style="z-index: 1000;" />,
62 | ,
63 |
81 |
65 |
66 |
78 |
,
79 | ]}
80 | 404
77 |
32 |
41 |
42 | {!!globalTagItems.length && (
43 |
52 | );
53 | }
54 | }
55 | );
56 |
57 | // Extract data
58 | function getSelectedImages({ images, searchResults, selection }) {
59 | let result;
60 | if (searchResults) {
61 | result = searchResults.hits.filter(hit => selection.has(hit.objectID));
62 | } else {
63 | result = images.filter(image => selection.has(image.__id));
64 | }
65 | return result;
66 | }
67 |
68 | function getItems({ environment, selectedImages }) {
69 | return selectedImages.map(image => {
70 | const version = (image.versions && image.versions.x200) || { url: spinner };
71 | const tagItems = image.tags && image.tags.map(getTagItem({ environment, image }));
72 |
73 | return (
74 |
44 |
48 | )}
49 |
50 | All Tags
45 | 46 |- {globalTagItems}
- {items}
77 |
80 | {image.filename}
78 |- {tagItems}
108 | #{tag}
109 |
123 | #{tag}
124 |
142 | setSelecting(false)}
147 | />
148 |
161 | );
162 | }
163 | }
164 |
165 | // Lifecycle functions
166 | function getEvaluateLoadingPosition({ environment, pageSize }) {
167 | return debounce(() => {
168 | const { images, imagesAllLoaded, searching } = store.getState();
169 |
170 | if (!imagesAllLoaded && !searching) {
171 | evaluateLoadingPosition({ pageSize, environment, images });
172 | }
173 | }, 500);
174 | }
175 |
176 | function debounce(fn, millis) {
177 | let timer;
178 |
179 | return () => {
180 | if (timer) {
181 | clearTimeout(timer);
182 | }
183 | timer = setTimeout(fn, millis);
184 | };
185 | }
186 |
187 | async function evaluateLoadingPosition({ pageSize: limit, environment, images }) {
188 | const loadingBar = window.document.getElementById('loading-bar');
189 | const scroll = window.document.body.parentElement.scrollTop;
190 | const top = loadingBar.getBoundingClientRect().top;
191 | const viewportHeight = window.innerHeight;
192 |
193 | let imagesToLoad = images;
194 | if (top < viewportHeight) {
195 | const cursor = images[images.length - 1];
196 | const { results, imagesAllLoaded } = await imagesQuery({ cursor, environment, images, limit });
197 | addImages(results);
198 | setImagesAllLoaded(imagesAllLoaded);
199 | imagesToLoad = results;
200 | }
201 |
202 | imagesToLoad.forEach(image =>
203 | loadImageVersionIfNecessary({ environment, image, versionName: VERSION_NAME })
204 | );
205 | }
206 |
207 | function getLastCreated({ images, timestamp }) {
208 | return (
209 | (images.length &&
210 | images.reduce((timestamp, image) => {
211 | return Math.max(timestamp, image.created);
212 | }, 0)) ||
213 | timestamp
214 | );
215 | }
216 |
217 | function handleNewImages({ environment, store }) {
218 | return newImages => {
219 | const { images } = store.getState();
220 | const existingIds = new Set(images.map(x => x.__id));
221 | const differenceIds = new Set(newImages.map(x => x.__id).filter(id => !existingIds.has(id)));
222 | const imagesToAdd = newImages.filter(image => differenceIds.has(image.__id));
223 |
224 | imagesToAdd.forEach(image => {
225 | addImage(image);
226 | loadImageVersionIfNecessary({ environment, image, versionName: VERSION_NAME });
227 | });
228 | };
229 | }
230 |
231 | function handleKeyup({ key }) {
232 | if (key == 'Escape') {
233 | setSelecting(false);
234 | clearSelection();
235 | setImage();
236 | }
237 | }
238 |
239 | // Render event handlers
240 | function getSelectClickHandler({ base, isAdmin, selection }) {
241 | return e => {
242 | e.stopPropagation();
243 | if (isAdmin) {
244 | const id = getId(e.target);
245 | const isSelected = selection.has(id);
246 | if (!isSelected) {
247 | if (e.shiftKey) {
248 | multiSelect({ id, base, addSelection });
249 | } else {
250 | addSelection(id);
251 | }
252 | } else {
253 | if (selection.size <= 1) {
254 | setSelecting(false);
255 | }
256 | removeSelection(id);
257 | }
258 | }
259 | };
260 | }
261 |
262 | function getImageDetailClickHandler({ base, environment, images, selection }) {
263 | return e => {
264 | const id = getId(e.target);
265 | const isSelected = selection.has(id);
266 |
267 | if (e.ctrlKey) {
268 | if (!isSelected) {
269 | addSelection(id);
270 | } else {
271 | removeSelection(id);
272 | }
273 | } else if (e.shiftKey) {
274 | multiSelect({ id, base, addSelection });
275 | } else {
276 | const image = images.find(image => image.__id == id);
277 | setImage(image);
278 | loadImageVersionIfNecessary({ environment, image });
279 | }
280 | };
281 | }
282 |
283 | function getId(el) {
284 | const itemId = el.getAttribute('item-id');
285 | return itemId || (el.parentElement && getId(el.parentElement));
286 | }
287 |
288 | function multiSelect({ id, base, addSelection }) {
289 | const items = Array.from(base.querySelectorAll('li'));
290 | const firstSelectedItemIndex = items.findIndex(item => item.getAttribute('is-selected'));
291 | const clickedItemIndex = items.findIndex(item => item.getAttribute('item-id') == id);
292 | const startIndex = Math.min(firstSelectedItemIndex, clickedItemIndex);
293 | const endIndex = Math.max(firstSelectedItemIndex, clickedItemIndex);
294 | const ids = items.slice(startIndex, endIndex + 1).map(item => item.getAttribute('item-id'));
295 | addSelection((ids.length && ids) || id);
296 | }
297 |
298 | function getCopyClickHandler() {
299 | return e => {
300 | const el = e.target.parentElement.parentElement.querySelector('[copy]');
301 | const selection = window.getSelection();
302 | const range = document.createRange();
303 | range.selectNodeContents(el);
304 | selection.removeAllRanges();
305 | selection.addRange(range);
306 | document.execCommand('copy');
307 |
308 | fireAlert('Copied to clipboard');
309 | };
310 | }
311 |
312 | function fireAlert(detail) {
313 | dispatchEvent(new CustomEvent('alert', { detail, bubbles: true }));
314 | }
315 |
316 | // Render main
317 | function getDecoratedImages({ searching, search, searchResults, images }) {
318 | const imagesToDecorate = (searching && ((searchResults && searchResults.hits) || [])) || images;
319 | return imagesToDecorate
320 | .map(image => addImageWidth({ image }))
321 | .map(image => addImageVersion({ image }));
322 | }
323 |
324 | function addImageWidth({ image }) {
325 | const height = HEIGHT;
326 | let width = DEFAULT_WIDTH;
327 | image = { ...image };
328 | if (image.exifTags) {
329 | const { ImageHeight, ImageWidth } = image.exifTags;
330 | if (ImageHeight && ImageWidth) {
331 | width = height / (ImageHeight / ImageWidth);
332 | }
333 | }
334 | image.width = width;
335 | return image;
336 | }
337 |
338 | function addImageVersion({ image }) {
339 | const version = (image.versions && image.versions[VERSION_NAME]) || {};
340 | image = { ...image };
341 | image.version = version;
342 | return image;
343 | }
344 |
345 | function justifyWidths({ images, gutter, imagesWidth }) {
346 | const rows = images.reduce(
347 | (rows, { ...image }) => {
348 | const lastRow = rows[rows.length - 1];
349 | const cumulativeWidths = sumRowWidths(lastRow);
350 | const lastRowWidth = gutter * lastRow.length + cumulativeWidths;
351 | if (lastRowWidth < imagesWidth) {
352 | lastRow.push(image);
353 | } else {
354 | rows.push([image]);
355 | }
356 | return rows;
357 | },
358 | [[]]
359 | );
360 | const adjustedRows = rows.map(row => {
361 | const goalWidth = imagesWidth - row.length * gutter;
362 | const totalWidth = sumRowWidths(row);
363 | const difference = totalWidth - goalWidth;
364 |
365 | if (difference > 0) {
366 | row.forEach(image => {
367 | const percentageOfRow = image.width / totalWidth;
368 | image.width = image.width - difference * percentageOfRow;
369 | });
370 | } else {
371 | row.push({ isGrower: true, width: -1 * difference });
372 | }
373 |
374 | return row;
375 | });
376 | return adjustedRows.reduce((flat, row) => flat.concat(row), []);
377 | }
378 |
379 | function sumRowWidths(row) {
380 | return row.reduce((sum, image) => sum + image.width, 0);
381 | }
382 |
383 | // Render image rows
384 | function getImageRow({
385 | environment,
386 | image,
387 | isAdmin,
388 | selection,
389 | copyClick,
390 | imageDetailClick,
391 | selectClick,
392 | }) {
393 | let li;
394 | if (image.isGrower) {
395 | li = ;
396 | } else {
397 | const { __id: id, _highlightResult: highlightResult } = image;
398 | const name = image.filename;
399 | const isSelected = selection.has(id);
400 | const markdown = getMarkdown({ environment, image });
401 | const tagItems = getTagsItems(image);
402 | const selectSvg = getSelectSvg({ isAdmin, selectClick });
403 |
404 | li = (
405 | -
149 | {items}
150 | {imagesAllLoaded &&
151 | items.length == 1 &&
- Nothing to show 😪 } 152 |
158 | 
159 |
160 |
409 | 
410 | 
416 |
417 |
424 | - {tagItems}
429 |
434 |
435 |