Start/Reset and interaction while playin added

3 files changed, 97 insertions, 18 deletions

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index dfe078a8e..f346940a2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -28,6 +28,8 @@ interface PresentationElementProps {
     gotoDocument(index: number): void;
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
+    presStatus: boolean;
+
 
 }
 
@@ -158,11 +160,15 @@ export default class PresentationElement extends React.Component<PresentationEle
         const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideTillPressed]) {
             this.selectedButtons[buttonIndex.HideTillPressed] = false;
-            this.props.document.opacity = 1;
+            if (this.props.index >= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             this.selectedButtons[buttonIndex.HideTillPressed] = true;
-            if (this.props.index > current) {
-                this.props.document.opacity = 0;
+            if (this.props.presStatus) {
+                if (this.props.index > current) {
+                    this.props.document.opacity = 0;
+                }
             }
         }
     }
@@ -175,13 +181,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideAfter]) {
             this.selectedButtons[buttonIndex.HideAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.FadeAfter]) {
                 this.selectedButtons[buttonIndex.FadeAfter] = false;
             }
             this.selectedButtons[buttonIndex.HideAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0;
+                }
+            }
         }
     }
 
@@ -193,13 +208,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.FadeAfter]) {
             this.selectedButtons[buttonIndex.FadeAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.HideAfter]) {
                 this.selectedButtons[buttonIndex.HideAfter] = false;
             }
             this.selectedButtons[buttonIndex.FadeAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0.5;
+                }
+            }
         }
     }
 
@@ -246,12 +270,12 @@ export default class PresentationElement extends React.Component<PresentationEle
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
-                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
-                <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
+                <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
+                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
+                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 07c3e69fd..5f2b80474 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -68,8 +68,8 @@
 }
 
 .presentation-button {
-    margin-right: 12.5%;
-    margin-left: 12.5%;
+    margin-right: 2.5%;
+    margin-left: 2.5%;
     width: 25%;
 }
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index e987d12f6..93c084dfd 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,10 +13,12 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
+library.add(faPlay);
+library.add(faStop);
 
 export interface PresViewProps {
     Document: Doc;
@@ -28,6 +30,7 @@ interface PresListProps extends PresViewProps {
     groupMappings: Map<String, Doc[]>;
     presElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
+    presStatus: boolean;
 }
 
 
@@ -61,7 +64,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         return (
 
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} />)}
             </div>
         );
     }
@@ -78,6 +81,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
     //variable that holds all the docs in the presentation
     @observable childrenDocs: Doc[] = [];
+    //variable to hold if presentation is started
+    @observable presStatus: boolean = false;
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -259,10 +264,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
-        this.navigateToElement(doc);
-        this.hideIfNotPresented(index);
-        this.showAfterPresented(index);
-
+        if (this.presStatus) {
+            this.navigateToElement(doc);
+            this.hideIfNotPresented(index);
+            this.showAfterPresented(index);
+        }
 
     }
 
@@ -293,6 +299,54 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.childrenDocs = docList;
     }
 
+    renderPlayPauseButton = () => {
+        if (this.presStatus) {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
+        } else {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
+        }
+    }
+
+    @action
+    startOrResetPres = () => {
+        if (this.presStatus) {
+            this.presStatus = false;
+            this.resetPresentation();
+        } else {
+            this.presStatus = true;
+            this.startPresentation();
+        }
+    }
+
+    @action
+    resetPresentation = () => {
+        this.groupMappings = new Map();
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
+            doc.presentId = Utils.GenerateGuid();
+            doc.opacity = 1;
+        });
+        this.props.Document.selectedDoc = 0;
+
+    }
+
+    startPresentation = () => {
+        this.props.Document.selectedDoc = 0;
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            if (selectedButtons[buttonIndex.HideTillPressed]) {
+                if (this.childrenDocs.indexOf(doc) > 0) {
+                    doc.opacity = 0;
+                }
+
+            }
+        });
+
+    }
+
     render() {
         let titleStr = StrCast(this.props.Document.title);
         let width = NumCast(this.props.Document.width);
@@ -306,9 +360,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 </div>
                 <div className="presentation-buttons">
                     <button className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    {this.renderPlayPauseButton()}
                     <button className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} />
             </div>
         );
     }