Programmescript

package.json

@@ -26,6 +26,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.8.2",
     "@fortawesome/free-solid-svg-icons": "^5.10.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "array-move": "^2.1.0",
     "bootstrap": "^4.3.1",
     "bootstrap-css-only": "^4.3.1",
     "chroma-js": "^2.0.3",
@@ -47,6 +48,7 @@
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.0.1",
     "react-select": "^2.4.3",
+    "react-sortable-hoc": "^1.10.1",
     "sass-loader": "^7.1.0",
     "save": "^2.4.0",
     "style-loader": "^0.23.1",

packages/components/ProgrammeScriptContainer/ProgrammeElements/Note.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+
+const Note = (props) => (
+  <p className={ 'text-secondary' }>
+    <FontAwesomeIcon icon={ faStickyNote } /> { props.text }
+  </p>
+);
+
+Note.propTypes = {
+  text: PropTypes.any
+};
+
+export default Note;

packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import cuid from 'cuid';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import PropTypes from 'prop-types';
+
+const PaperCut = (props) => {
+  let words;
+  if (props.words) {
+    // TODO could wrap words in span and add timecodes
+    // to make it cliccable on programme script
+    words = props.words.map((w) => {
+      return (
+        <span
+          key={ cuid() }
+          className="words"
+          title={ `stat: ${ w.start }- end: ${ w.end }` }
+          data-start={ w.start }
+          data-end={ w.end }
+        >
+          {w.text}
+        </span>
+      );
+    });
+  }
+
+  return (
+    <>
+      <Row>
+        <Col sm={ 3 } className={ 'text-truncate text-muted' }
+          // TODO: could add timecode from eg -  ${ shortTimecode(this.props.words[0].start) }
+          // TODO: Could add transcript name along side the timecode for the paper-cut
+          title={ `${ props.speaker.toUpperCase() }` }
+          style={ { userSelect: 'none' } }>
+          <strong>{props.speaker.toUpperCase()}</strong>
+          {/* <br/> */}
+          {/* <u style={ { cursor: 'pointer' } }>00:01:20</u> */}
+          {/* <br/> */}
+          {/* <FontAwesomeIcon icon={ faTag } />TagExample */}
+        </Col>
+        <Col sm={ 9 }>
+          { words }
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+PaperCut.propTypes = {
+  speaker: PropTypes.any,
+  words: PropTypes.any
+};
+
+export default PaperCut;

packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableHandle.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {
+  sortableHandle
+} from 'react-sortable-hoc';
+
+import {
+  faGripLines,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const SortableHandle = sortableHandle(() => (
+  <span>
+    <FontAwesomeIcon icon={ faGripLines } />
+  </span>)
+);
+
+export default SortableHandle;

packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { SortableElement } from 'react-sortable-hoc';
+
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+
+import {
+  faPen,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import SortableHandle from './SortableHandle';
+
+const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, backgroundColour, textColour }) => {
+
+  const EditIcon = (
+    <FontAwesomeIcon
+      className={ 'text-muted' }
+      icon={ faPen }
+      onClick={ () => { handleEdit(index); } }>
+    </FontAwesomeIcon>
+  );
+
+  const DeleteIcon = (
+    <FontAwesomeIcon
+      className={ 'text-muted' }
+      icon={ faTrash }
+      onClick={ () => { handleDelete(index); } }>
+    </FontAwesomeIcon>
+  );
+
+  return (
+    <li style={ { listStyle: 'none' } }>
+      <Row style={ { backgroundColor: backgroundColour } }>
+        <Col xs={ 1 } sm={ 1 } md={ 1 } ld={ 1 } xl={ 1 } >
+          <SortableHandle />
+        </Col>
+        <Col xs={ 8 } sm={ 9 } md={ 9 } ld={ 9 } xl={ 9 } >
+          <span style={ { color: textColour } }>
+            {value}
+          </span>
+        </Col>
+        <Col xs={ 1 } sm={ 1 } md={ 1 } ld={ 1 } xl={ 1 } >
+          {handleEdit ? EditIcon : null}
+        </Col>
+        <Col xs={ 1 } sm={ 1 } md={ 1 } ld={ 1 } xl={ 1 } >
+          {handleDelete ? DeleteIcon : null}
+        </Col>
+      </Row>
+    </li>
+  );
+});
+
+export default SortableItem;

packages/components/ProgrammeScriptContainer/ProgrammeElements/TitleHeading.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TitleHeading = ({ text }) => <h4>{text}</h4>;
+
+export default TitleHeading;

packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons';
+
+const VoiceOver = ({ text }) =>
+  <p className={ 'text-muted' }>
+    <FontAwesomeIcon icon={ faMicrophoneAlt } />
+    { text }
+  </p>;
+
+export default VoiceOver;

packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import cuid from 'cuid';
+
+import VoiceOver from './VoiceOver';
+import PaperCut from './PaperCut';
+import TitleHeading from './TitleHeading';
+import Note from './Note';
+
+import SortableItem from './SortableItem';
+
+const adaptAddedElement = (type, text) => {
+  switch (type) {
+  case 'title':
+    return (<TitleHeading text={ text } />);
+  case 'voice-over':
+    return <VoiceOver text={ text } />;
+  case 'note':
+    return <Note text={ text } />;
+  default:
+    console.error('invalid added element type: ', type, text);
+
+    return null;
+  }
+};
+
+const ProgrammeElements = (elements, handleEdit, handleDelete) => {
+  return elements.map((el, index) => {
+    const key = cuid();
+    const type = el.type;
+    const text = el.text;
+
+    if (type === 'insert') {
+      return (
+        <SortableItem
+          key={ key }
+          index={ index }
+          value={ text }
+          backgroundColour="orange"
+          textColour="white"
+        />
+      );
+
+    }
+
+    if (type === 'paper-cut') {
+      return (
+        <SortableItem
+          key={ key }
+          index={ index }
+          value={
+            <PaperCut
+              speaker={ el.speaker }
+              words={ el.words }
+            />
+          }
+          handleDelete={ handleDelete }
+          handleEdit={ null }
+        />);
+    }
+
+    return (
+      <SortableItem
+        key={ key }
+        index={ index }
+        value={ adaptAddedElement(type, text) }
+        handleDelete={ handleDelete }
+        handleEdit={ handleEdit }
+      />
+    );
+  });
+};
+
+export default ProgrammeElements;

packages/components/ProgrammeScriptContainer/index.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import arrayMove from 'array-move';
+import { SortableContainer, } from 'react-sortable-hoc';
+import ProgrammeElements from './ProgrammeElements';
+
+const ProgrammeScriptContainer = (props) => {
+  const programmeElements = ProgrammeElements(props.items, props.handleEdit, props.handleDelete);
+  const [ elements, setElements ] = useState(programmeElements);
+
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    const result = arrayMove(elements, oldIndex, newIndex);
+    props.handleReorder(result);
+    setElements(result);
+  };
+
+  const SortableList = SortableContainer(({ children }) =>
+    <ul style={ { listStyle: 'none', padding: '0px' } }>
+      {children}
+    </ul>
+  );
+
+  return (
+    <SortableList useDragHandle onSortEnd={ onSortEnd }>
+      {elements}
+    </SortableList>
+  );
+
+};
+
+ProgrammeScriptContainer.propTypes = {
+  items: PropTypes.any,
+  handleDelete: PropTypes.func,
+  handleEdit: PropTypes.func,
+  handleReorder: PropTypes.func
+};
+
+export default ProgrammeScriptContainer;

packages/components/ProgrammeScriptContainer/stories/index.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import ProgrammeScriptContainer from '../index.js';
+
+export const handleReorderActions = action('Handle reorder');
+export const handleDeleteActions = action('Handle delete');
+export const handleEditActions = action('Handle edit');
+
+const items = [
+  {
+    type: 'title',
+    text: 'An immense Achievement'
+  },
+  {
+    type: 'paper-cut',
+    id: 1,
+    speaker: 'Mr Loud',
+    words: [ { text:'Greatest day of my life was when I wrote this text.', start: 0, end: 1 } ]
+  },
+  {
+    type: 'note',
+    text: 'Maybe a little bit obnoxious'
+  },
+  {
+    type: 'insert',
+    text: 'Insert New Selection here'
+  },
+  {
+    type: 'paper-cut',
+    id: 2,
+    speaker: 'Mrs Loud',
+    words: [ { text:'Greatest day of my life was when I spoke this text.', start: 0, end: 1 } ]
+  },
+  {
+    type: 'voice-over',
+    text: 'link: wonderful times of the Loud family'
+  },
+];
+
+
+storiesOf('ProgrammeScript', module)
+  .add('Default', () =>
+    <ProgrammeScriptContainer
+      items={ items }
+      handleDelete={ handleDeleteActions }
+      handleEdit={ handleEditActions }
+      handleReorder={ handleReorderActions }
+    />
+  );

packages/components/SimpleCard/index.js

@@ -17,9 +17,13 @@ const SimpleCard = (props) => {
     const confirmDeleteText = "Click OK if you wish to delete or cancel if you don't";
     const cancelDeleteText = 'All is good, it was not deleted';
     const confirmationPrompt = window.confirm(confirmDeleteText);
-    
+
     if (confirmationPrompt) {
-      props.handleDelete ? props.handleDelete(props.id) : alert(cancelDeleteText);
+      if (props.handleDelete) {
+        props.handleDelete(props.id);
+      } else {
+        alert(cancelDeleteText);
+      }
     }
   };