219 analytics (#109)

* initial analytics

* more analytics

* update react-transcript-editor and defaultProps

* fix typo

* pr review tweaks

Author: sarahrainbow

package-lock.json

@@ -40,7 +40,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@bbc/react-transcript-editor": "^1.0.4",
+    "@bbc/react-transcript-editor": "^1.4.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-brands-svg-icons": "^5.8.2",
     "@fortawesome/free-solid-svg-icons": "^5.10.1",

package.json

@@ -6,9 +6,16 @@ import { LinkContainer } from 'react-router-bootstrap';
 const CustomBreadcrumb = (props) => {
 
   const breadcrumbs = props.items.map((item) => {
+
+    const handleClick = () => {
+      if (item.name.includes('Project:')) {
+        props.handleClick();
+      }
+    };
+
     if (item.link) {
       return (
-        <LinkContainer key={ item.name } to={ item.link }>
+        <LinkContainer key={ item.name } to={ item.link } onClick={ () => handleClick() }>
           <Breadcrumb.Item>{item.name}</Breadcrumb.Item>
         </LinkContainer>
       );
@@ -32,6 +39,7 @@ const CustomBreadcrumb = (props) => {
 
 CustomBreadcrumb.propTypes = {
   items: PropTypes.array,
+  handleClick: PropTypes.func,
 };
 
 CustomBreadcrumb.defaultProps = {

src/Breadcrumb/index.js

@@ -44,7 +44,9 @@ storiesOf('Breadcrumb', module)
   })
   .add('Paper Edits', () => {
     return (
-      <section style={ { height: '90vh', overflow: 'scroll' } }>
+      <section
+        style={ { height: '90vh', overflow: 'scroll' } }
+      >
         <Breadcrumb
           items={ breadcrumbItems.paperEdits }
         />

src/Breadcrumb/stories/index.stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import ProgressBar from '../ProgressBar';
 import PropTypes from 'prop-types';
 
@@ -18,6 +18,7 @@ const VideoContextProgressBar = (props) => {
   }
 
   const handleClick = ({ nativeEvent: { offsetX } }) => {
+    props.handleClick('seek');
     videoContext.currentTime = (offsetX / width) * videoContext.duration;
     const percent = getPercentage(videoContext.currentTime, videoContext.duration);
     setPercentage(percent);
@@ -51,7 +52,8 @@ const VideoContextProgressBar = (props) => {
 };
 
 VideoContextProgressBar.propTypes = {
-  videoContext: PropTypes.any
+  videoContext: PropTypes.any,
+  handleClick: PropTypes.func
 };
 
 export default VideoContextProgressBar;

src/PreviewCanvas/VideoContextPreview/VideoContextProgressBar.js

@@ -51,6 +51,7 @@ const VideoContextPreview = (props) => {
   }, [ props.playlist, videoContext ]);
 
   const handleStop = () => {
+    props.handleClick('stop');
     videoContext.pause();
     setVideoContext((vc) => {
       vc.currentTime = 0;
@@ -59,6 +60,16 @@ const VideoContextPreview = (props) => {
     });
   };
 
+  const handlePlay = () => {
+    videoContext.play();
+    props.handleClick('play');
+  };
+
+  const handlePause = () => {
+    videoContext.pause();
+    props.handleClick('pause');
+  };
+
   const formattedDuration = secondsToHHMMSSFormat(duration);
 
   return (
@@ -78,15 +89,18 @@ const VideoContextPreview = (props) => {
         style={ { backgroundColor: 'lightgrey' } }
       >
         {videoContext ? (
-          <VideoContextProgressBar videoContext={ videoContext } />
+          <VideoContextProgressBar
+            videoContext={ videoContext }
+            handleClick={ props.handleClick }
+          />
         ) : null}
       </Row>
       <Row style={ { marginTop: '0.4em' } }>
         {videoContext ? (
           <Controls
             videoContext={ videoContext }
-            handlePlay={ () => videoContext.play() }
-            handlePause={ () => videoContext.pause() }
+            handlePlay={ () => handlePlay() }
+            handlePause={ () => handlePause() }
             handleStop={ () => handleStop() }
           />
         ) : null}
@@ -103,6 +117,7 @@ VideoContextPreview.propTypes = {
   canvasRef: PropTypes.any,
   playlist: PropTypes.array,
   width: PropTypes.number,
+  handleClick: PropTypes.func,
 };
 
 export default VideoContextPreview;

src/PreviewCanvas/VideoContextPreview/index.js

@@ -12,17 +12,20 @@ const PreviewCanvas = props => {
       width={ width }
       canvasRef={ canvasRef }
       playlist={ playlist }
+      handleClick={ props.handleClick }
     />
   );
 };
 
 PreviewCanvas.propTypes = {
   playlist: PropTypes.array,
-  width: PropTypes.number
+  width: PropTypes.number,
+  handleClick: PropTypes.func,
 };
 
 PreviewCanvas.defaultProps = {
-  playlist: []
+  playlist: [],
+  handleClick: () => { console.log('play controls clicked'); }
 };
 
 export default PreviewCanvas;

src/PreviewCanvas/index.js

@@ -32,8 +32,9 @@ const ProjectRow = (props) => {
         <LinkContainer
           to={ props.url }
           style={ { color: '#007bff', cursor: 'pointer', marginTop: '0.4rem' } }
+          onClick={ props.handleClick }
         >
-          <p >
+          <p>
             <strong>{props.title}</strong>
           </p>
         </LinkContainer>
@@ -86,6 +87,7 @@ ProjectRow.propTypes = {
   title: PropTypes.string.isRequired,
   updated: PropTypes.any,
   url: PropTypes.string.isRequired,
+  handleClick: PropTypes.func,
 };
 
 ProjectRow.defaultProps = {