Added Jenkinsfile.

.dockerignore

@@ -0,0 +1,10 @@
+# Ignore everything by default
+*
+
+# Allow the public project files.
+!src
+!public
+!Dockerfile
+!package*.json
+!README.md
+!nginx.conf

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:16.6.1-alpine AS builder
+
+WORKDIR /tmp
+COPY package*.json ./
+
+RUN npm ci --only=prod
+COPY . .
+
+ENV NODE_ENV=production
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=builder /tmp/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN touch /var/run/nginx.pid
+RUN chown -R nginx:nginx /var/run/nginx.pid /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d
+USER nginx
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]

Jenkinsfile

@@ -0,0 +1,59 @@
+pipeline {
+  agent {
+    label 'local-agent'
+  }
+
+  options {
+    ansiColor('xterm')
+    timestamps()
+  }
+
+  environment {
+    DOCKER_IMAGE = 'public/reddit-slideshow'
+    DOCKER_REGISTRY = credentials('docker_registry')
+  }
+
+  stages {
+    stage('Build Docker Image') {
+      when {
+        allOf {
+          branch 'master'
+
+          not {
+            changeRequest()
+          }
+        }
+      }
+
+      steps {
+        echo 'Building docker image...'
+
+        script {
+          image = docker.build(DOCKER_IMAGE)
+        }
+      }
+    }
+
+    stage('Deploy Docker Image') {
+      when {
+        allOf {
+          branch 'master'
+
+          not {
+            changeRequest()
+          }
+        }
+      }
+
+      steps {
+        echo 'Deploying docker image to registry...'
+
+        script {
+          docker.withRegistry(DOCKER_REGISTRY, 'gitea_packages_account') {
+            image.push('latest')
+          }
+        }
+      }
+    }
+  }
+}

nginx.conf

@@ -0,0 +1,10 @@
+server_tokens off;
+server {
+    listen       8080;
+    server_name  localhost;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+}

public/settings.json

@@ -0,0 +1,6 @@
+{
+  "slideshows": [
+    "pics",
+    ["memes", "funny"]
+  ]
+}

src/App.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import RedditSlideshow from './components/RedditSlideshow/RedditSlideshow';
+import SlideshowPicker from './components/SlideshowPicker/SlideshowPicker';
+
+const App = () => {
+  const shouldRenderPicker = !window.location.pathname || window.location.pathname === '/';
+
+  if (shouldRenderPicker) {
+    return (
+      <SlideshowPicker />
+    );
+  }
+
+  return (
+    <RedditSlideshow />
+  );
+};
+
+export default App;

src/components/PickerItem/PickerItem.css

@@ -0,0 +1,22 @@
+.picker {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  padding: 1rem;
+  text-decoration: none;
+
+  border: 1px solid black;
+  border-radius: 5px;
+  background: #ddd;
+}
+
+.picker img {
+  width: 50px;
+  height: 50px;
+  margin-right: 1em;
+}
+
+.picker span {
+  color: black;
+}

src/components/PickerItem/PickerItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import './PickerItem.css';
+
+const PickerItem = ({ subreddit }) => {
+  const href = Array.isArray(subreddit) ?
+    `/r/${subreddit.join('+')}` :
+    `/r/${subreddit}`;
+
+  const text = Array.isArray(subreddit) ?
+    `Multireddit for: ${subreddit.map((s) => `r/${s}`).join(', ')}` :
+    `r/${subreddit}`;
+
+  return (
+    <a className="picker" href={href}>
+      <img src="/android-chrome-256x256.png" alt="logo" />
+
+      <span>
+        {text}
+      </span>
+    </a>
+  );
+};
+
+export default PickerItem;

src/components/RedditSlideshow/RedditSlideshow.css

@@ -1,4 +1,4 @@
-.App {
+.reddit-slideshow {
   position: relative;
   background-color: black;
   height: 100vh;

src/components/RedditSlideshow/RedditSlideshow.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import axios from "axios";
 
-import Layout from "../components/Layout/Layout";
+import Layout from "../Layout/Layout";
-import "./App.css";
+import "./RedditSlideshow.css";
 
 class App extends Component {
   state = {
@@ -16,7 +16,7 @@ class App extends Component {
     awaitingResponse: false,
     showTitle: true, // show image title at top left
     showInfo: true, // show info and buttons at bottom right
-    auto: false, // autoplay
+    auto: true, // autoplay
     sound: false,
     hideUI: false,
     hideUIChecked: false,
@@ -409,9 +409,9 @@ class App extends Component {
 
   render() {
     return (
-      <div className="App">
+      <div className="reddit-slideshow">
         <Layout
-          className="App"
+          className="reddit-slideshow"
           post={this.state.posts.length ? this.state.posts[this.state.currentPost] : null}
           prev={this.state.posts.length ? this.state.posts[this.state.prevPost] : null}
           prevHandler={this.prevSlideHandler}

src/components/SlideshowPicker/SlideshowPicker.css

@@ -0,0 +1,13 @@
+.container {
+  margin: 5rem 10rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    margin: 5rem 10px;
+  }
+}

src/components/SlideshowPicker/SlideshowPicker.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import useFetch from '../../hooks/fetch';
+import PickerItem from '../PickerItem/PickerItem';
+import Loading from '../ui/Loading';
+import ErrorMessage from '../ui/ErrorMessage';
+import './SlideshowPicker.css';
+
+const SlideshowPicker = () => {
+  const { data: settings, error, loading } = useFetch('/settings.json');
+
+  if (loading) {
+    return (
+      <Loading />
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorMessage error={error.message} />
+    );
+  }
+
+  return (
+    <div className="container">
+      {
+        settings.slideshows.map((subreddit, idx) => (
+          <PickerItem key={idx} subreddit={subreddit} />
+        ))
+      }
+    </div>
+  );
+};
+
+export default SlideshowPicker;

src/components/ui/ErrorMessage.css

@@ -0,0 +1,21 @@
+.error {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 2rem;
+  background: pink;
+  border-radius: 5px;
+}
+
+.error h2 {
+  margin-bottom: 1rem;
+  color: red;
+}
+
+.error pre {
+  padding: 1rem;
+  background: #eee;
+  border-radius: 5px;
+}

src/components/ui/ErrorMessage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import "./ErrorMessage.css";
+
+const ErrorMessage = ({ error }) => {
+  return (
+    <div className="error">
+      <h2>Something happened!</h2>
+
+      <pre>
+        {JSON.stringify(error, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export default ErrorMessage;

src/components/ui/Loading.css

@@ -0,0 +1,19 @@
+.loading {
+  width: 50px;
+  height: 50px;
+
+  position: fixed;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}

src/components/ui/Loading.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Loading.css';
+
+const Loading = () => {
+  return (
+    <img className="loading" src="/android-chrome-256x256.png" alt="logo" />
+  );
+};
+
+export default Loading;

src/containers/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/hooks/fetch.js

@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
+
+const useFetch = (url) => {
+  const http = useMemo(() => {
+    return axios.create({
+      baseURL: ''
+    });
+  }, []);
+
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    setData(null);
+    setError(null);
+
+    http.get(url)
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        setError(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [url, http]);
+
+  return { data, error, loading };
+};
+
+export default useFetch;

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import axios from 'axios';
 
-import App from './containers/App';
+import App from './App';
 import './index.css';
 
 axios.defaults.baseURL = "https://www.reddit.com";