Merge pull request #197 from UTD-CRSS/develop

Merge Develop  to  Master

Author: khanguyen74

package-lock.json

@@ -33,7 +33,7 @@
     "amex-jest-preset-react": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "browser-sync": "^2.26.12",
+    "browser-sync": "^2.26.14",
     "chai": "^4.2.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
@@ -71,7 +71,7 @@
     "history": "^5.0.0",
     "html-webpack-plugin": "^4.4.1",
     "imports-loader": "^1.1.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.19",
     "moment": "^2.28.0",
     "node-fetch": "^2.6.1",
     "node-sass": "^4.14.1",

package.json

@@ -36,8 +36,8 @@
 
 .audio-title{
   height: 55px;
-  font-size: 2.2rem;
+  font-size: 2.4rem;
 }
 .audio-filename-text{
-  font-size: 1.2rem;
+  font-size: 1.3rem;
 }

src/components/AudioPlayer/index.scss

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Modal, Button } from "react-bootstrap";
+import "./index.scss";
+/**
+ *  A simple popup for first time users to help them use our navigation page
+ */
+
+export function ChannelPlayerNavigatingInstruction(props) {
+  var handleClosePopup = props.handleClosePopup;
+  var showInstruction = props.showInstruction;
+  return (
+    <>
+      <Modal
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+        show={showInstruction}
+        onHide={handleClosePopup}
+        dialogClassName=""
+      >
+        <Modal.Header closeButton>
+          <Modal.Title
+            className="message-title"
+            id="contained-modal-title-vcenter"
+          >
+            How to navigate in playback page
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="message-body">
+          <p>
+            Thanks for visiting our page. Here are some tips for playing audios.
+          </p>
+          <ol>
+            <li>To play all, click "Play All" button</li>
+            <li>To play next parts of audio, click "Play Next" button</li>
+            <li>
+              To play previous parts of audio, click "Play Previous" button
+            </li>
+            <li>
+              Note that when one of these two buttons is faded, it means there
+              are no audios in next or previous part
+            </li>
+            <li>
+              Toggle "Display Transcript" or "Hide Transcript" buttons to enable
+              or disable transcripts for desired players
+            </li>
+            <p className="noted-message">
+              Important: if you are experiencing performance issues, please hide
+              some transripts, displaying up to 2 transcripts is ideal
+            </p>
+          </ol>
+        </Modal.Body>
+        <Modal.Footer>
+          <div className="btn-close-container">
+            <Button variant="bigCentered" size="lg" onClick={handleClosePopup}>
+              Close
+            </Button>
+          </div>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}

src/components/ChannelPlayerNavigatingInstruction/index.js

@@ -0,0 +1,5 @@
+
+  .noted-message{
+    font-size: 1rem;
+    color: orange
+  }

src/components/ChannelPlayerNavigatingInstruction/index.scss

@@ -29,7 +29,7 @@ export function ChannelsSelectingInstruction(props) {
         </Modal.Header>
         <Modal.Body className="message-body">
           <p>
-            Thanks for visiting our page. Here are some tips for playing audios.
+            Thanks for visiting our page. Here are some tips for selecting audios.
           </p>
           <ol>
             <li>First select a tape.</li>
@@ -38,7 +38,7 @@ export function ChannelsSelectingInstruction(props) {
               selected.
             </li>
             <li>
-              Then select the audio block and nugget. There are 6 nuggets in a
+              Next, select the audio block and nugget. There are 6 nuggets in a
               block of audio, a block is usally 30-minute long.
             </li>
             <li>And finally hit play!</li>

src/components/ChannelsSelectingInstruction/index.js

@@ -22,3 +22,4 @@ export { ChannelPlayer } from "./ChannelPlayer";
 export { AudioPlayer } from "./AudioPlayer";
 export { ChannelTimeline } from "./ChannelTimeline";
 export { ChannelsSelectingInstruction } from "./ChannelsSelectingInstruction";
+export { ChannelPlayerNavigatingInstruction} from "./ChannelPlayerNavigatingInstruction";

src/components/index.js

@@ -2,17 +2,33 @@ import React, { Component } from "react";
 import { AppFooter, AppHeader } from "../App";
 import { ChannelPlayer } from "../../components/ChannelPlayer";
 import { Link, Redirect } from "react-router-dom";
+import { ChannelPlayerNavigatingInstruction } from "../../components/ChannelPlayerNavigatingInstruction";
 import "./index.scss";
 
 export class ChannelViewer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      data: this.props.location.state.audioData,
+      data:
+        this.props.location.state && this.props.location.state.audioData
+          ? this.props.location.state.audioData
+          : null,
       playAll: false,
       pauseAll: false,
       playNext: false,
-      tapeId: this.props.location.state.tapeId,
+      tapeId:
+        this.props.location.state && this.props.location.state.tapeId
+          ? this.props.location.state.tapeId
+          : null,
+      showInstruction: false,
+      minBlock:
+        this.props.location && this.props.location.state
+          ? this.props.location.state.minBlock
+          : null,
+      maxBlock:
+        this.props.location && this.props.location.state
+          ? this.props.location.state.maxBlock
+          : null,
     };
   }
 
@@ -80,6 +96,13 @@ export class ChannelViewer extends Component {
       playNextOrPreviousActivate: true,
     });
   }
+  handleCloseInstruction = () => {
+    this.setState({ showInstruction: false });
+  };
+
+  handleDisplayInstruction = () => {
+    this.setState({ showInstruction: true });
+  };
 
   handlePlayNext() {
     const nextAudioBlockNuggetIndex = this.getNextBlockAndNuggetIndex();
@@ -101,8 +124,23 @@ export class ChannelViewer extends Component {
     this.setState({ playAll: false, pauseAll: false });
   }
 
+  isFirstVisit() {
+    return localStorage.getItem("alreadyVisitedChannelPlayerPage") === "true";
+  }
+
   componentDidMount() {
     this.removeBrowserHistoryState();
+
+    let visited = this.isFirstVisit();
+
+    // Do not view popup if this isn't the first time
+    if (visited) {
+      this.setState({ showInstruction: false });
+    } else {
+      // This is the first time
+      localStorage.setItem("alreadyVisitedChannelPlayerPage", true);
+      this.setState({ showInstruction: true });
+    }
   }
 
   removeBrowserHistoryState() {
@@ -134,6 +172,8 @@ export class ChannelViewer extends Component {
     const currentBlockIndex = this.state.currentBlockIndex;
     const currentNuggetIndex = this.state.currentNuggetIndex;
     const tapeId = this.state.tapeId;
+    const minBlock = this.state.minBlock;
+    const maxBlock = this.state.maxBlock;
     return (
       <>
         <AppHeader />
@@ -149,6 +189,8 @@ export class ChannelViewer extends Component {
                     blockIndex: nextBlockIndex,
                     nuggetIndex: nextNuggetIndex,
                     tapeId: tapeId,
+                    minBlock: minBlock,
+                    maxBlock: maxBlock
                   },
                 },
               }}
@@ -170,10 +212,16 @@ export class ChannelViewer extends Component {
 
         {data && Object.keys(data).length > 0 ? (
           <>
+            <ChannelPlayerNavigatingInstruction
+              handleClosePopup={this.handleCloseInstruction}
+              showInstruction={this.state.showInstruction}
+            />
             <div className="d-flex justify-content-center mb-4">
               <button
                 type="button"
-                disabled={currentBlockIndex == 1 && currentNuggetIndex == 1}
+                disabled={
+                  currentBlockIndex == minBlock && currentNuggetIndex == 1
+                }
                 className="btn btn-warning mr-3 audio-controller-text"
                 onClick={this.handlePlayPrevious.bind(this)}
               >
@@ -195,7 +243,9 @@ export class ChannelViewer extends Component {
               </button>
               <button
                 type="button"
-                disabled={currentBlockIndex == 6 && currentNuggetIndex == 6}
+                disabled={
+                  currentBlockIndex == maxBlock && currentNuggetIndex == 6
+                }
                 className="btn btn-warning audio-controller-text"
                 onClick={this.handlePlayNext.bind(this)}
               >
@@ -217,12 +267,22 @@ export class ChannelViewer extends Component {
                 );
               })}
             </div>
+            <div className="ml-2">
+              <button
+                type="button"
+                className="btn btn-secondary mt-5"
+                onClick={this.handleDisplayInstruction}
+              >
+                Instructions for navigating audio player page
+              </button>
+            </div>
           </>
         ) : (
           <h4 className="container text-center">
             Error loading channels, please select different channels
           </h4>
         )}
+
         <AppFooter />
       </>
     );