add some backend code for photopage

apiGo/api/ApiBase.go

@@ -7,6 +7,7 @@ import (
 	"gopkg.in/oauth2.v3"
 	"net/http"
 	"openmediacenter/apiGo/api/oauth"
+	"openmediacenter/apiGo/database/settings"
 )
 
 const APIPREFIX = "/api"
@@ -17,6 +18,7 @@ const (
 	SettingsNode = iota
 	ActorNode    = iota
 	TVShowNode   = iota
+	PhotoNode    = iota
 )
 
 type HandlerInfo struct {
@@ -47,7 +49,13 @@ func ServerInit() {
 	http.Handle(APIPREFIX+"/tags", oauth.ValidateToken(handlefunc, TagNode))
 	http.Handle(APIPREFIX+"/settings", oauth.ValidateToken(handlefunc, SettingsNode))
 	http.Handle(APIPREFIX+"/actor", oauth.ValidateToken(handlefunc, ActorNode))
-	http.Handle(APIPREFIX+"/tvshow", oauth.ValidateToken(handlefunc, TVShowNode))
+
+	// add tvshow endpoint only if tvshows enabled
+	if settings.TVShowsEnabled() {
+		http.Handle(APIPREFIX+"/tvshow", oauth.ValidateToken(handlefunc, TVShowNode))
+	}
+
+	http.Handle(APIPREFIX+"/photos", oauth.ValidateToken(handlefunc, PhotoNode))
 
 	// initialize oauth service and add corresponding auth routes
 	oauth.InitOAuth()

apiGo/api/Photos.go

@@ -0,0 +1,15 @@
+package api
+
+func AddPhotoHandlers() {
+	/**
+	 * @api {post} /api/photos [getPhotos]
+	 * @apiDescription get all available pictures
+	 * @apiName getPhotos
+	 * @apiGroup Photos
+	 *
+	 * @apiSuccess {string} result 'success' if successfully or error message if not
+	 */
+	AddHandler("getPhotos", PhotoNode, func(info *HandlerInfo) []byte {
+		return nil
+	})
+}

apiGo/main.go

@@ -33,6 +33,7 @@ func main() {
 	api.AddTagHandlers()
 	api.AddActorsHandlers()
 	api.AddTvshowHandlers()
+	api.AddPhotoHandlers()
 
 	videoparser.SetupSettingsWebsocket()
 

declaration.d.ts

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

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

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> {
                     </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>

src/pages/PhotoPage/PhotoPage.tsx

@@ -0,0 +1,76 @@
+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'
+                }
+            }
+        }
+    ];
+
+    // 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});
+
+    return (
+        <ExpandableProGallery
+            items={items}
+            options={options}
+            container={container}
+            eventsListener={eventsListener}
+            scrollingElement={window}
+            viewMode={1}
+        />
+    );
+}
+
+// Enjoy using your new gallery!
+// For more options, visit https://github.com/wix/pro-gallery

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 (
+            <>
+                <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>}
+            </>
+        );
+    }
+}

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}) => (
+    <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 */

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"