cp commit

components/CompositeShape.js

@@ -491,8 +491,8 @@ const CompositeShape = ({questions, answers, averages, onPrint}) => {
     const renderScreenView = ()=>{
             return <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
 
-                   
-
+                 <div style={{display:"flex", flexDirection:"row", alignItems:"center", justifyContent:"center"}}>
+                   <div  style={{margin:20}}>
                     {<svg  width={SVGCOMPOSITEWIDTH} height={SVGCOMPOSITEHEIGHT}   viewBox={`0 0 ${150} ${150}`}> 
                         <g ref={combined} id="container" transform={`translate(${20},${-30})`}></g>
 
@@ -520,15 +520,19 @@ const CompositeShape = ({questions, answers, averages, onPrint}) => {
                                 </div>
                             </div>
                         </div>
-
+                    </div>
+                    <div  style={{margin:20}}>
                     {<svg  width={SVGWIDTH} height={SVGHEIGHT}   viewBox={`0 0 ${150} ${150}`}> 
                         <g ref={interleaved} id="container" transform={`translate(${tx},${ty})`}></g>
                         {renderChapterLabels()}
                     </svg>}
-
+                   </div>
+                   </div>
 
                 {tt.pos[0] > 0 && tt.pos[1] > 0 && <div className={styles.tooltip}  style={tooltipstyle} dangerouslySetInnerHTML={{__html:tt.question}}></div>}
-                <img target="_blank" onClick={()=>onPrint()} alt={"print image"} src={"/print.png"} width={22} height={22}/>         
+                <div>
+                <img target="_blank" onClick={()=>onPrint()} alt={"print image"} src={"/print.png"} width={22} height={22}/>  
+                </div>       
             </div>
     }
 

components/VideoPlayer.js

@@ -21,11 +21,14 @@ const VideoPlayer = ({amFinished, chapter, width}) => {
     return  <div className={styles.container}>
         <div className={styles.heading}>{`chapter ${chapter}`}</div>
 
-        <video autoPlay ref={videoElement} onPlaying={handleOnPlay}  onEnded={handleOnEnded.bind(this,()=>{amFinished(true)})} width={width} height="auto">
+        <video autoPlay ref={videoElement} onPlaying={handleOnPlay} onEnded={handleOnEnded.bind(this,()=>{amFinished(true)})} width={width} height="auto">
              <source src={`videos/c${chapter}.mp4`} type="video/mp4"/>
         </video>
         <div  onDoubleClick={handleOnEnded.bind(this,()=>{amFinished(true)})} onClick={()=>{togglePlay()}} className={styles.playcontainer} style={{background:playerState.isPlaying?"transparent":"black"}}>
-           {!playerState.isPlaying &&  <div className={styles.play}>{`Watch Chapter ${chapter}`}</div>}
+           {!playerState.isPlaying &&  <>
+            <div className={styles.play}>{`Watch Chapter ${chapter}`}</div>
+            <div onClick={handleOnEnded.bind(this,()=>{amFinished(true)})} className={styles.play}>{`Skip`}</div>
+           </>}
         </div>
     </div>
 }

styles/Chapters.module.scss

@@ -49,4 +49,5 @@
     padding:20px;
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     cursor: pointer;  
+    margin:10px;
 }