Refactor image handling in preparation of multi-image slides.

Version bump target so newer features can be used.
This allows usage of #private members.
2020-02-26 21:17:38 -08:00 · 2020-02-26 21:17:00 -08:00 · 2020-02-26 14:19:40 -08:00 · 2020-02-26 13:51:30 -08:00 · 2020-02-26 09:21:07 -08:00
5 changed files with 110 additions and 98 deletions
--- a/react-slideshow/public/index.html
+++ b/react-slideshow/public/index.html
@ -2,14 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://static.xinu.tv/favicon/gallery.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using create-react-app"
+      content="Photo gallery @ xinu.tv"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="https://static.xinu.tv/favicon/gallery.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Xinu Slideshow</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/react-slideshow/public/manifest.json
+++ b/react-slideshow/public/manifest.json
@ -3,19 +3,8 @@
  "name": "Create React App Sample",
  "icons": [
    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "https://static.xinu.tv/favicon/gallery.png",
+      "type": "image/png"
    }
  ],
  "start_url": ".",
--- a/react-slideshow/src/App.css
+++ b/react-slideshow/src/App.css
@ -3,7 +3,7 @@ body, html, #root {
 }

 #ui {
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.5);
  bottom: 0;
  line-height: 3em;
  position: 'absolute';
@ -13,3 +13,7 @@ body, html, #root {
 #ui .meta {
  text-align: center;
 }
+
+#slide {
+  height: 100%;
+}
--- a/react-slideshow/src/App.tsx
+++ b/react-slideshow/src/App.tsx
@ -51,6 +51,43 @@ function shuffle(a: Array<MediaItem>) {
    return a;
 }

+class Slide {
+  // One or two items.  For example if display is landscape we'll try to fit
+  // two portrait images and only one landscape. 
+  items: Array<MediaItem>;
+  nextSlide?: Slide;
+  prevSlide?: Slide;
+  constructor(items: Array<MediaItem>) {
+    this.items = items;
+  }
+  render() {
+    let w = window.innerWidth * window.devicePixelRatio;
+    let h = window.innerHeight * window.devicePixelRatio;
+    let ratio = w/h;
+    if (ratio > 1) {
+      // Landscape image
+      w = roundup(w, IMAGE_CHUNK);
+      h = Math.round(w/ratio);
+      } else {
+        // Portrait image
+        h = roundup(h, IMAGE_CHUNK);
+        w = Math.round(h/ratio);
+      }
+    console.log(`Window size ${window.innerWidth}x${window.innerHeight} with a devicePixelRatio of ${window.devicePixelRatio} for a total size of ${w}x${h}`);
+    let style: React.CSSProperties = {
+      height: '100%',
+      width: '100%',
+      backgroundColor: 'black',
+      // TODO(wathiede): make this handle multiple items.
+      backgroundImage: `url(/api/image/${this.items[0].id}?w=${w}&h=${h})`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center center',
+      backgroundSize: 'cover',
+    };
+    return <div style={style}></div>
+  }
+};
+
 type MediaMetadata = {
  width: number;
  height: number;
@ -67,9 +104,8 @@ type AlbumProps = {
 };
 type AlbumState = {
  error: any;
-  // TODO(wathiede): define a MediaItem type.
  mediaItems: Array<MediaItem> | null;
-  idx: number;
+  curSlide?: Slide,
  showUI: boolean;
  timerID: any | null;
 };
@ -77,7 +113,6 @@ class Album extends React.Component<AlbumProps, AlbumState> {
  state: AlbumState = {
    error: null,
    mediaItems: null,
-    idx: 0,
    showUI: this.props.showUI,
    timerID: null,
  };
@ -89,12 +124,49 @@ class Album extends React.Component<AlbumProps, AlbumState> {
    fetch(process.env.PUBLIC_URL + `/api/album/${album}`)
      .then(res => res.json())
      .then(
-        (result) => {
-          this.setState({mediaItems: result});
+        (mediaItems: Array<MediaItem>) => {
+          let w = window.innerWidth * window.devicePixelRatio;
+          let h = window.innerHeight * window.devicePixelRatio;
+          let ratio = w/h;
+          let landscapes = mediaItems.filter((mi) => {
+            let md = mi.mediaMetadata;
+            let ratio = md.width/md.height;
+            return ratio > 1;
+          });
+
+          let portraits = mediaItems.filter((mi) => {
+            let md = mi.mediaMetadata;
+            let ratio = md.width/md.height;
+            return ratio <= 1;
+          });
+
+          console.log(`${landscapes.length} landscape photos`);
+          console.log(`${portraits.length} portraits photos`);
+          let photos;
+          if (ratio > 1) {
+            console.log('display in landscape mode');
+            photos = landscapes;
+          } else {
+            console.log('display in portrait mode');
+            photos = portraits;
+          }
+          photos = shuffle(photos);
+          let slides = photos.map((p)=>{
+            return new Slide([p]);
+          });
+          let numSlides = slides.length;
+          slides.forEach((p, idx)=>{
+            let nextIdx = (idx+1)%numSlides;
+            let prevIdx = (numSlides+idx-1)%numSlides;
+            p.nextSlide = slides[nextIdx];
+            p.prevSlide = slides[prevIdx];
+          })
+
+          this.setState({curSlide: slides[0]});
          let {sleepTimeSeconds} = this.props;
          let timerID = setInterval(()=>{
-            let {idx} = this.state;
-            this.setState({idx: idx+1})
+            let {curSlide} = this.state;
+            this.setState({curSlide: curSlide?.nextSlide})
            console.log('timer fired');
          }, sleepTimeSeconds*1000);
          this.setState({timerID});
@ -111,72 +183,19 @@ class Album extends React.Component<AlbumProps, AlbumState> {
  render() {
    // TODO(wathiede): fade transition.
    // TODO(wathiede): pair-up portrait orientation images.
-    // TODO(wathiede): fetch an image that maintains the originals aspect ratio
-    let w = window.innerWidth * window.devicePixelRatio;
-    let h = window.innerHeight * window.devicePixelRatio;
-    let ratio = w/h;
-    if (ratio > 1) {
-      // Landscape image
-      w = roundup(w, IMAGE_CHUNK);
-      h = Math.round(w/ratio);
-    } else {
-      // Portrait image
-      h = roundup(h, IMAGE_CHUNK);
-      w = Math.round(h/ratio);
-    }
-    console.log(`Window size ${window.innerWidth}x${window.innerHeight} with a devicePixelRatio of ${window.devicePixelRatio} for a total size of ${w}x${h}`);
-
-    //let w = roundup(window.innerWidth*window.devicePixelRatio, IMAGE_CHUNK);
-    //let h = roundup(window.innerHeight*window.devicePixelRatio, IMAGE_CHUNK);
-    let {idx, error, mediaItems, showUI} = this.state;
+    let {curSlide, error, mediaItems, showUI} = this.state;
    if (error !== null) {
      return <h2>Error: {JSON.stringify(error)}</h2>;
-    } else if (mediaItems !== null) {
-      let landscapes = mediaItems.filter((mi) => {
-        let md = mi.mediaMetadata;
-        let ratio = md.width/md.height;
-        return ratio > 1;
-      });
-
-      let portraits = mediaItems.filter((mi) => {
-        let md = mi.mediaMetadata;
-        let ratio = md.width/md.height;
-        return ratio <= 1;
-      });
-
-      console.log(`${landscapes.length} landscape photos`);
-      console.log(`${portraits.length} portraits photos`);
-      let photos;
-      if (ratio > 1) {
-        console.log('display in landscape mode');
-        photos = landscapes;
-      } else {
-        console.log('display in portrait mode');
-        photos = portraits;
-      }
-      photos = shuffle(photos);
-
-      let numImages = photos.length;
-      idx = idx % numImages;
-      let nextIdx = (idx+1)%numImages;
-      let prevIdx = (numImages+idx-1)%numImages;
-      let image = photos[idx];
-      let nextImage = photos[nextIdx];
-      let prevImage = photos[prevIdx];
-      let style: React.CSSProperties = {
-        height: '100%',
-        width: '100%',
-        backgroundColor: 'black',
-        backgroundImage: `url(/api/image/${image.id}?w=${w}&h=${h})`,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-      };
+    } else if (curSlide) {
+      let nextSlide = curSlide?.nextSlide;
+      let prevSlide = curSlide?.prevSlide;
      let prefetchStyle: React.CSSProperties = {
+        backgroundColor: 'rgba(127, 127, 127, 0.5)',
+        backgroundPosition: 'center center',
+        bottom: 0,
+        height: '25%',
        position: 'absolute',
        width: '25%',
-        height: '25%',
-        bottom: 0,
      };
      let leftPrefetchStyle: React.CSSProperties = {
        left: 0,
@ -189,29 +208,29 @@ class Album extends React.Component<AlbumProps, AlbumState> {
      let ui;
      if (showUI) {
        ui = <div id="ui">
-          <img
+          <div
          style={leftPrefetchStyle}
          onClick={(e)=>{
            e.stopPropagation();
-            this.setState({idx: prevIdx})
-          }}
-          src={`/api/image/${prevImage.id}?w=${w}&h=${h}`} alt="prefetch prev" />
-          <div className="meta">{image.filename}</div>
-          <img
+            this.setState({curSlide: curSlide?.prevSlide})
+          }}>{ prevSlide?.render() }</div>
+          {/* TODO(wathiede): make this work with multiple items. */}
+          <div className="meta">{curSlide?.items[0].filename}</div>
+          <div
          style={rightPrefetchStyle}
          onClick={(e)=>{
            e.stopPropagation();
-            this.setState({idx: nextIdx})
-          }}
-          src={`/api/image/${nextImage.id}?w=${w}&h=${h}`} alt="prefetch next" />
+            this.setState({curSlide: curSlide?.nextSlide})
+          }}>{ nextSlide?.render() }</div>
        </div>;
      }
-      return <div style={style} onClick={(e)=>{
+      return <div id="slide" onClick={(e)=>{
        e.stopPropagation();
        this.setState({showUI: !showUI})
      }}>
+        { curSlide?.render() }
        { ui }
-        </div>;
+      </div>;
    } else {
      return <h2>Loading...</h2>;
    }
--- a/react-slideshow/tsconfig.json
+++ b/react-slideshow/tsconfig.json
@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
Author	SHA1	Message	Date
Bill Thiede	e3182d4cf2	Refactor image handling in preparation of multi-image slides.	2020-02-26 21:17:38 -08:00
Bill Thiede	9f9c3cc00c	Version bump target so newer features can be used. This allows usage of #private members.	2020-02-26 21:17:00 -08:00
Bill Thiede	0dc3c5edef	Cleanup page metadata.	2020-02-26 14:19:40 -08:00
Bill Thiede	62ae230f70	Remove TODOs, and set favicon.	2020-02-26 13:51:30 -08:00
Bill Thiede	49695dd393	Preserve aspect ratio in debug thumbnails.	2020-02-26 09:21:07 -08:00