From f480df1e1bb76530237397950a54afb90787885a Mon Sep 17 00:00:00 2001 From: lukas Date: Sat, 17 Jul 2021 23:20:19 +0200 Subject: [PATCH] implement basic gallery with preview --- declaration.d.ts | 1 + package.json | 1 + src/App.tsx | 9 ++ src/pages/PhotoPage/PhotoPage.tsx | 92 ++++++++++++++++++++ src/pages/PhotoPage/expandableGallery.js | 106 +++++++++++++++++++++++ src/pages/PhotoPage/x.js | 16 ++++ yarn.lock | 84 +++++++++++++++++- 7 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 src/pages/PhotoPage/PhotoPage.tsx create mode 100644 src/pages/PhotoPage/expandableGallery.js create mode 100644 src/pages/PhotoPage/x.js diff --git a/declaration.d.ts b/declaration.d.ts index 35306c6..c95cdb9 100644 --- a/declaration.d.ts +++ b/declaration.d.ts @@ -1 +1,2 @@ declare module '*.css'; +declare module 'pro-gallery'; diff --git a/package.json b/package.json index d60199e..705976c 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@fortawesome/react-fontawesome": "^0.1.13", "bootstrap": "^5.0.1", "plyr-react": "^3.0.7", + "pro-gallery": "^4.0.4", "react": "^17.0.1", "react-bootstrap": "^1.4.0", "react-dom": "^17.0.1", diff --git a/src/App.tsx b/src/App.tsx index db339d0..601de00 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,6 +21,7 @@ import TVShowPage from './pages/TVShowPage/TVShowPage'; import TVPlayer from './pages/TVShowPage/TVPlayer'; import {CookieTokenStore} from './utils/TokenStore/CookieTokenStore'; import {token} from './utils/TokenHandler'; +import {PhotoPage} from './pages/PhotoPage/PhotoPage'; interface state { password: boolean | null; // null if uninitialized - true if pwd needed false if not needed @@ -155,6 +156,10 @@ class App extends React.Component<{}, state> { ) : null} + + Photos + + Settings @@ -199,6 +204,10 @@ class App extends React.Component<{}, state> { ) : null} + + + + diff --git a/src/pages/PhotoPage/PhotoPage.tsx b/src/pages/PhotoPage/PhotoPage.tsx new file mode 100644 index 0000000..3ffedbe --- /dev/null +++ b/src/pages/PhotoPage/PhotoPage.tsx @@ -0,0 +1,92 @@ +import 'pro-gallery/dist/statics/main.css'; +import React from 'react'; +import ExpandableProGallery from './expandableGallery'; + +export function PhotoPage(): JSX.Element { + // Add your images here... + const items = [ + { + // Image item: + itemId: 'sample-id', + mediaUrl: 'https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY', + metaData: { + type: 'image', + height: 200, + width: 100, + title: 'sample-title', + description: 'sample-description', + focalPoint: [0, 0], + link: { + url: 'http://example.com', + target: '_blank' + } + } + }, + { + // Another Image item: + itemId: 'differentItem', + mediaUrl: 'https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk', + metaData: { + type: 'image', + height: 200, + width: 100, + title: 'sample-title', + description: 'sample-description', + focalPoint: [0, 0], + link: { + url: 'http://example.com', + target: '_blank' + } + } + }, + { + // HTML item: + itemId: 'htmlItem', + html: "
I am a text block
", + metadata: { + type: 'text', + height: 200, + width: 300, + title: 'sample-title', + description: 'sample-description', + backgroundColor: 'pink' + } + } + ]; + + // The options of the gallery (from the playground current state) + const options = { + galleryLayout: -1, + hoveringBehaviour: 'NEVER_SHOW', + scrollAnimation: 'MAIN_COLOR', + imageHoverAnimation: 'ZOOM_IN', + itemBorderRadius: 5, + allowContextMenu: true + }; + + // The size of the gallery container. The images will fit themselves in it + const container = { + width: window.innerWidth, + height: window.innerHeight + }; + + // The eventsListener will notify you anytime something has happened in the gallery. + const eventsListener = (eventName: unknown, eventData: unknown): void => console.log({eventName, eventData}); + + // The scrollingElement is usually the window, if you are scrolling inside another element, suplly it here + const scrollingElement = window; + + return ( + + ); +} + +// Enjoy using your new gallery! +// For more options, visit https://github.com/wix/pro-gallery diff --git a/src/pages/PhotoPage/expandableGallery.js b/src/pages/PhotoPage/expandableGallery.js new file mode 100644 index 0000000..05ad898 --- /dev/null +++ b/src/pages/PhotoPage/expandableGallery.js @@ -0,0 +1,106 @@ +import React from 'react'; +import {GALLERY_CONSTS, ProGallery, ProGalleryRenderer} from 'pro-gallery'; +import {utils} from 'pro-gallery-lib'; +// import CLICK_ACTIONS from '../../../common/constants/itemClick'; +import CloseButton from './x'; + +const styles = { + gallery: { + + }, + fullscreen: { + position: 'fixed', + top: 0, + left: 0, + width: '100vw', + height: '100vh', + zIndex: 9999, + background: 'white', + opacity: 0, + transition: 'opacity 2s ease', + visibility: 'hidden' + }, + shown: { + visibility: 'visible', + opacity: 1 + }, + close: { + boxSizing: 'content-box', + zIndex: 10, + padding: 10, + position: 'fixed', + right: 20, + top: 20, + background: 'rgba(255,255,255,0.8)', + borderRadius: 4, + width: 25, + height: 25, + fill: 'black', + cursor: 'pointer' + } +} + +const GALLERY_EVENTS = GALLERY_CONSTS.events; + +export default class ExpandableProGallery extends React.Component { + + constructor(props) { + super(props) + this.eventListener = this.eventListener.bind(this); + this.state = { + fullscreenIdx: -1 + } + } + + eventListener(eventName, eventData) { + switch (eventName) { + case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED: + this.setState({ fullscreenIdx: eventData.idx }); + break; + default: + console.log({eventName, eventData}); + break; + } + if (typeof this.props.eventsListener === 'function') { + this.props.eventsListener(eventName, eventData); + } + } + + render() { + const Gallery = this.props.useBlueprints ? ProGalleryRenderer : ProGallery; + return ( + <> +
+ +
+ {this.state.fullscreenIdx < 0 ? null :
= 0 && styles.shown) }}> + this.setState({fullscreenIdx: -1})} /> + +
} + + ); + } +} diff --git a/src/pages/PhotoPage/x.js b/src/pages/PhotoPage/x.js new file mode 100644 index 0000000..64505e5 --- /dev/null +++ b/src/pages/PhotoPage/x.js @@ -0,0 +1,16 @@ +/* eslint-disable */ +/* tslint:disable */ +import PropTypes from 'prop-types'; +import React from 'react'; +const x = ({size, ...props}) => ( + + + +); +x.displayName = 'x'; +x.propTypes = { + size: PropTypes.string +} +export default x; +/* tslint:enable */ +/* eslint-enable */ diff --git a/yarn.lock b/yarn.lock index 914934b..e0964da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2151,6 +2151,14 @@ "@typescript-eslint/types" "4.26.1" eslint-visitor-keys "^2.0.0" +"@vimeo/player@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@vimeo/player/-/player-2.8.2.tgz#0e69e34ad9c9da4805a6dfa04ac833949de8be23" + integrity sha512-OVD+WLW7mP9R7h+QZ5qeVJsTa3uvQ83nQE2rLFQkhhJ2zl5CnSWr3ctFedn4ggZrykyve6zbovZ8f6Xc0EIJHw== + dependencies: + native-promise-only "0.8.1" + weakmap-polyfill "2.0.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -4316,7 +4324,7 @@ deep-is@^0.1.3, deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= -deepmerge@^4.2.2: +deepmerge@^4.0.0, deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== @@ -5183,7 +5191,7 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= -eventemitter3@^4.0.0: +eventemitter3@^4.0.0, eventemitter3@^4.0.3: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== @@ -5986,6 +5994,14 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" +hls.js@^0.14.12: + version "0.14.17" + resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-0.14.17.tgz#0127cff2ec2f994a54eb955fe669ef6153a8e317" + integrity sha512-25A7+m6qqp6UVkuzUQ//VVh2EEOPYlOBg32ypr34bcPO7liBMOkKFvbjbCBfiPAOTA/7BSx1Dujft3Th57WyFg== + dependencies: + eventemitter3 "^4.0.3" + url-toolkit "^2.1.6" + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -7530,6 +7546,11 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ= + loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" @@ -7805,6 +7826,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -8107,6 +8133,11 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" +native-promise-only@0.8.1: + version "0.8.1" + resolved "https://registry.yarnpkg.com/native-promise-only/-/native-promise-only-0.8.1.tgz#20a318c30cb45f71fe7adfbf7b21c99c1472ef11" + integrity sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE= + native-url@^0.2.6: version "0.2.6" resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae" @@ -9625,6 +9656,29 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pro-gallery-lib@4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/pro-gallery-lib/-/pro-gallery-lib-4.0.4.tgz#7c7957342541ca13a7ad5bea3899a5207b30541c" + integrity sha512-XOkgaRnn/nfxC26ixEcOlIiiBfxR551Wfa6gJrru/BPnGHs8rGDU5XpJ38L2AFc2FewW+PaOJS2kTr0xrnjL1Q== + dependencies: + pro-layouts "4.0.4" + +pro-gallery@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/pro-gallery/-/pro-gallery-4.0.4.tgz#16ce8a7914b51e8dcdaeb7220659b72a0b1b7d68" + integrity sha512-beDh0BIz9K3LZ+Zf2HoxMnZZ7/tC55Hwdm4PYRemEHtSp0ap4dEiKwU+L2cTUmUg2UXgxTaZtAdt0J8jIAZWmg== + dependencies: + "@vimeo/player" "2.8.2" + hls.js "^0.14.12" + pro-gallery-lib "4.0.4" + pro-layouts "4.0.4" + react-player "^2.6.2" + +pro-layouts@4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/pro-layouts/-/pro-layouts-4.0.4.tgz#41809f5a1112be20436784ead5bb4875b95c808a" + integrity sha512-+oDhHV7/LF9TTG7+7RAMjDGVwbHF4NmCbLCe/zG7xKDHVrPuOYiSRTeLVhqpwQbIdve8P7IjNar9YmFkIHem8A== + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -9963,6 +10017,11 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -9992,6 +10051,17 @@ react-overlays@^5.0.1: uncontrollable "^7.2.1" warning "^4.0.3" +react-player@^2.6.2: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.9.0.tgz#ef7fe7073434087565f00ff219824e1e02c4b046" + integrity sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + memoize-one "^5.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.0.1" + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -11959,6 +12029,11 @@ url-polyfill@^1.1.12: resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331" integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A== +url-toolkit@^2.1.6: + version "2.2.3" + resolved "https://registry.yarnpkg.com/url-toolkit/-/url-toolkit-2.2.3.tgz#78fa901215abbac34182066932220279b804522b" + integrity sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ== + url@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" @@ -12124,6 +12199,11 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" +weakmap-polyfill@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/weakmap-polyfill/-/weakmap-polyfill-2.0.0.tgz#8f28f935e3853896ad40747e5258db578d9dc8de" + integrity sha1-jyj5NeOFOJatQHR+UljbV42dyN4= + webidl-conversions@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"