Pair-up portraits when in landscape mode.

react-slideshow/src/App.tsx

@@ -43,7 +43,7 @@ const roundup = (v: number, mod: number) => {
  * From https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
  * @param {Array} a items An array containing the items.
  */
-function shuffle(a: Array<MediaItem>) {
+function shuffle<T>(a: Array<T>) {
   let rng = new Random(new Date().getDate());
     for (let i = a.length - 1; i > 0; i--) {
         const j = Math.floor(rng.nextFloat() * (i + 1));
@@ -82,15 +82,19 @@ class Slide {
     return this.items.map(img => `/api/image/${img.id}?w=${w}&h=${h}`);
   }
   render() {
-    const imgs = this.imageUrls.map(url => {
+    let urls = this.imageUrls;
+    let frac = 100 / urls.length;
+    let imgs = urls.map(url => {
+      // TODO(wathiede): make this landscape/portrait aware.
       let style: React.CSSProperties = {
         height: '100%',
-        width: '100%',
+        width: frac + '%',
         backgroundColor: 'black',
         backgroundImage: `url(${url})`,
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
+        float: 'left',
       };
       return <div key={url} style={style}></div>;
     });
@@ -102,6 +106,16 @@ class Slide {
   }
 };
 
+function makePairs<T>(items: Array<T>) {
+  const half = Math.floor(items.length/2);
+  console.log(`items ${items.length} half ${half}`)
+  let pairs = [];
+  for (let i = 0; i < half; i++) {
+    pairs.push([items[2*i], items[2*i+1]]);
+  }
+  return pairs;
+}
+
 type MediaMetadata = {
   width: number;
   height: number;
@@ -156,18 +170,24 @@ class Album extends React.Component<AlbumProps, AlbumState> {
 
           console.log(`${landscapes.length} landscape photos`);
           console.log(`${portraits.length} portraits photos`);
-          let photos;
+          let slides: Array<Slide>;
           if (ratio > 1) {
             console.log('display in landscape mode');
-            photos = landscapes;
+            slides = landscapes.map((p)=>{
+              return new Slide([p]);
+            });
+            let pairs = makePairs(shuffle(portraits));
+            slides = slides.concat(pairs.map((p, i) => new Slide(p)));
           } else {
             console.log('display in portrait mode');
-            photos = portraits;
+            slides = portraits.map((p)=>{
+              return new Slide([p]);
+            });
+            // TODO(wathiede): fix Slide::render before adding landscapes
+            // to slides here.
           }
-          photos = shuffle(photos);
+          slides = shuffle(slides);
-          let slides = photos.map((p)=>{
+          console.log(`${slides.length} slides`);
-            return new Slide([p]);
-          });
           let numSlides = slides.length;
           slides.forEach((p, idx)=>{
             let nextIdx = (idx+1)%numSlides;
@@ -196,7 +216,6 @@ class Album extends React.Component<AlbumProps, AlbumState> {
   }
   render() {
     // TODO(wathiede): fade transition.
-    // TODO(wathiede): pair-up portrait orientation images.
     let {curSlide, error, showUI} = this.state;
     if (error !== null) {
       return <h2>Error: {JSON.stringify(error)}</h2>;
@@ -229,7 +248,7 @@ class Album extends React.Component<AlbumProps, AlbumState> {
             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 className="meta">{curSlide?.items.map(i=>i.filename).join(' | ')}</div>
           <div
           style={rightPrefetchStyle}
           onClick={(e)=>{