lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

implement basic gallery with preview

Browse Source
This commit is contained in:
lukas 2021-07-17 23:20:19 +02:00
parent ebb55eb0dc
commit f480df1e1b
7 changed files with 307 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
declaration.d.ts vendored
View File

@ -1 +1,2 @@
declare module '*.css';
declare module 'pro-gallery';

1
package.json
View File

@ -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",

9
src/App.tsx
View File

@ -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> {
</NavLink>
) : null}
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/photos'} activeStyle={{opacity: '0.85'}}>
Photos
</NavLink>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>
Settings
</NavLink>
@ -199,6 +204,10 @@ class App extends React.Component<{}, state> {
</Route>
) : null}
<Route exact path='/photos'>
<PhotoPage />
</Route>
<Route path='/'>
<HomePage />
</Route>

92
src/pages/PhotoPage/PhotoPage.tsx Normal file
View File

@ -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: "<div style='width: 300px; height: 200px; background:pink;'>I am a text block</div>",
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 (
<ExpandableProGallery
items={items}
options={options}
container={container}
eventsListener={eventsListener}
scrollingElement={scrollingElement}
viewMode={1}
/>
);
}
// Enjoy using your new gallery!
// For more options, visit https://github.com/wix/pro-gallery

106
src/pages/PhotoPage/expandableGallery.js Normal file
View File

@ -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 (
<>
<section style={{...styles.gallery, display: (this.state.fullscreenIdx < 0 ? 'block' : 'none')}}>
<Gallery
{...this.props}
key={`pro-gallery-${this.props.domId}`}
domId={`pro-gallery-${this.props.domId}`}
eventsListener={this.eventListener}
/>
</section>
{this.state.fullscreenIdx < 0 ? null : <section style={{ ...styles.fullscreen, ...(this.state.fullscreenIdx >= 0 && styles.shown) }}>
<CloseButton style={styles.close} onClick={() => this.setState({fullscreenIdx: -1})} />
<Gallery
{...this.props}
key={`pro-fullscreen-${this.props.domId}`}
domId={`pro-fullscreen-${this.props.domId}`}
currentIdx={this.state.fullscreenIdx}
container= {{
width: window.innerWidth,
height: window.innerHeight
}}
styles={{
...(this.props.options || this.props.styles),
galleryLayout: 5,
slideshowInfoSize: 80,
slideAnimation: utils.isMobile() ? 'SCROLL' : 'FADE',
cubeType:'fit',
scrollSnap: true,
showArrows: !utils.isMobile()
}}
/>
</section>}
</>
);
}
}

16
src/pages/PhotoPage/x.js Normal file
View File

@ -0,0 +1,16 @@
/* eslint-disable */
/* tslint:disable */
import PropTypes from 'prop-types';
import React from 'react';
const x = ({size, ...props}) => (
<svg viewBox="0 0 15 15" fill="currentColor" width={ size || "15" } height={ size || "15" } {...props}>
<path d="M15 0.6L14.4 0 7.5 6.9 0.6 0 0 0.6 6.9 7.5 0 14.4 0.6 15 7.5 8.1 14.4 15 15 14.4 8.1 7.5z" fillRule="evenodd" clipRule="evenodd" />
</svg>
);
x.displayName = 'x';
x.propTypes = {
size: PropTypes.string
}
export default x;
/* tslint:enable */
/* eslint-enable */

84
yarn.lock
View File

@ -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"