react-slideshow: cleaner looking front page.

react-slideshow/package.json

@@ -13,7 +13,9 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
+    "bootstrap": "^4.5.0",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",

react-slideshow/src/App.css

@@ -2,6 +2,10 @@ body, html, #root {
   height: 100%;
 }
 
+.container {
+  margin-top: 2em;
+}
+
 #ui {
   top: 0;
   line-height: 3em;

react-slideshow/src/App.tsx

@@ -5,6 +5,10 @@ import {
   Route,
   useParams
 } from "react-router-dom";
+import {
+  Button,
+  Card
+} from 'react-bootstrap';
 
 import Random from './rand';
 import './App.css';
@@ -296,8 +300,10 @@ class AlbumIndex extends React.Component<AlbumIndexProps, AlbumIndexState> {
       return <h2>Error: {JSON.stringify(error)}</h2>;
     } else if (albums !== null) {
       return albums.map((a) => {
+        let img_url = "https://via.placeholder.com/256x128";
         let img = <img src="https://via.placeholder.com/256x128" className="mr-3" alt="unset"/>;
         if (a.coverPhotoMediaItemId !== undefined) {
+          img_url = `/api/image/${a.coverPhotoMediaItemId}?w=512&h=512`
           img = <img src={ `/api/image/${a.coverPhotoMediaItemId}?w=256&h=256` } className="mr-3" alt={ a.title }/>
         }
 
@@ -305,9 +311,16 @@ class AlbumIndex extends React.Component<AlbumIndexProps, AlbumIndexState> {
           {img}
           <figcaption className="figure-caption">{ a.title || "No title" } - { a.mediaItemsCount || 0 } photos </figcaption>
         </figure>;
-        return <a key={ a.id } href={ '#' + a.id }>
+        return <Card key={a.id} style={{width: '50%'}}>
-            { figure }
+          <Card.Img variant="top" src={img_url} />
-          </a>
+          <Card.Body>
+            <Card.Title>{a.title}</Card.Title>
+            <Card.Text>
+              {a.mediaItemsCount || 0} photos 
+            </Card.Text>
+            <Button href={'#' + a.id} variant="primary" block>Slideshow</Button>
+          </Card.Body>
+        </Card>
       });
     } else {
       return <h2>Loading...</h2>;
@@ -333,6 +346,9 @@ const App = () => {
             <AlbumIndex />
           </div>
         </Route>
+        <Route exact path="/lookup/:albumId">
+          <AlbumRoute showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />
+        </Route>
         <Route exact path="/:albumId">
           <AlbumRoute showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />
         </Route>

react-slideshow/src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+// Importing the Bootstrap CSS
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));