Merge pull request #146 from UniversityRadioYork/markspolakovs-big-scary-warning

Show a big scary warning when using non-production versions

.env

@@ -1,5 +1,6 @@
 HOST=local-development.ury.org.uk
 REACT_APP_VERSION=$npm_package_version
+REACT_APP_HOMEPAGE=$npm_package_homepage
 REACT_APP_MYRADIO_NONAPI_BASE=https://ury.org.uk/myradio-staging
 REACT_APP_MYRADIO_BASE=https://ury.org.uk/api-staging/v2
 REACT_APP_BROADCAST_API_BASE=https://ury.org.uk/webstudio/api/v1

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 .mypy_cache/
 env/
 env.ci/
+venv/
 
 serverconfig.ini
 

Jenkinsfile

@@ -71,7 +71,7 @@ pipeline {
         }
         steps {
           sh 'sed -i -e \'s/ury.org.uk\\/webstudio-dev/ury.org.uk\\/webstudio/\' package.json'
-          sh 'REACT_APP_GIT_SHA=`git rev-parse --short HEAD` yarn build'
+          sh 'REACT_APP_GIT_SHA=`git rev-parse --short HEAD` REACT_APP_PRODUCTION=true yarn build'
           sshagent(credentials: ['ury']) {
            sh 'rsync -av --delete-after build/ deploy@ury:/usr/local/www/webstudio'
           }

src/showplanner/PISModal.tsx

@@ -2,6 +2,33 @@ import React, { useEffect, useState } from "react";
 import Modal from "react-modal";
 import { getLatestNewsItem, NewsEntry } from "../api";
 import { Button } from "reactstrap";
+import { FaTimes } from "react-icons/fa";
+
+function DevWarning() {
+  if (process.env.REACT_APP_PRODUCTION === "true") {
+    return null;
+  }
+  return (
+    <>
+      <div className="p-2 alert-warning">
+        <h1>Development Version</h1>
+        <strong>You are using a development version of WebStudio.</strong> This
+        version is NOT tested and may have severe bugs and performance problems.
+        <br />
+        <em>
+          <strong>DO NOT BROADCAST LIVE SHOWS USING THIS VERSION!</strong>
+        </em>
+        <br />
+        For the latest and greatest tested WebStudio, go to{" "}
+        <a href={process.env.REACT_APP_HOMEPAGE}>
+          {process.env.REACT_APP_HOMEPAGE}
+        </a>
+        .
+      </div>
+      <hr />
+    </>
+  );
+}
 
 export function PisModal({
   close,
@@ -35,6 +62,13 @@ export function PisModal({
 
   return (
     <Modal isOpen={isOpen} onRequestClose={close}>
+      <div className="text-right">
+        <Button onClick={close} className="pt-1" color="primary">
+          <FaTimes />
+        </Button>
+      </div>
+      <hr className="mt-1 mb-3" />
+      <DevWarning />
       <h1>Presenter News</h1>
       {(news === "loading" || news === "not_loaded") && (
         <p>Loading the news...</p>
@@ -51,8 +85,9 @@ export function PisModal({
           </em>
         </div>
       )}
+      <br />
       <Button onClick={close} color="primary">
-        Close
+        <FaTimes /> Close
       </Button>
     </Modal>
   );