Merge pull request #322 from CaptainFact/feat/shift-statements-per-pr…

…ovider

Timecodes shifting is now specific to video provider

app/API/graphql_queries.js

@@ -7,8 +7,7 @@ export const VideosQuery = gql`
       totalPages
       entries {
         hash_id: hashId
-        provider_id: providerId
-        provider
+        youtube_id: youtubeId
         title
         insertedAt
         isPartner

app/components/FormUtils/StyledLabel.jsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import { fontSize, space } from 'styled-system'
+
+const StyledLabel = styled.label`
+  ${fontSize}
+  ${space}
+`
+
+/** @component */
+export default StyledLabel

app/components/Statements/Statement.jsx

@@ -17,12 +17,12 @@ import StatementHeader from './StatementHeader'
 @withNamespaces('videoDebate')
 export default class Statement extends React.PureComponent {
   render() {
-    const { statement, speaker, handleEdit, handleDelete } = this.props
+    const { statement, speaker, handleEdit, handleDelete, offset = 0 } = this.props
 
     return (
       <div>
         <StatementHeader
-          statement={statement}
+          statementTime={statement.time + offset}
           speaker={speaker}
           handleEdit={handleEdit}
           handleDelete={handleDelete}

app/components/Statements/StatementContainer.jsx

@@ -15,9 +15,11 @@ import { handleFormEffectResponse } from '../../lib/handle_effect_response'
 import StatementComments from './StatementComments'
 import { CommentForm } from '../Comments/CommentForm'
 import Statement from './Statement'
+import { getTimecodesOffset } from '../../lib/video_utils'
 
 @connect(
   (state, props) => ({
+    offset: state.VideoDebate.video.offset,
     speaker: statementSelectors.getStatementSpeaker(state, props),
     isFocused: statementSelectors.isStatementFocused(state, props),
     scrollTo: state.VideoDebate.statements.scrollTo,
@@ -42,9 +44,7 @@ export default class StatementContainer extends React.PureComponent {
 
     return (
       <div
-        className={classNames('statement-container', {
-          'is-focused': isFocused
-        })}
+        className={classNames('statement-container', { 'is-focused': isFocused })}
         ref="container"
       >
         <div className="card statement">
@@ -75,6 +75,7 @@ export default class StatementContainer extends React.PureComponent {
       <StatementForm
         form={`StatementForm-${statement.id}`}
         initialValues={statement.toJS()}
+        offset={this.props.offset}
         isBundled
         handleAbort={() => this.setState({ isEditing: false })}
         handleConfirm={s =>
@@ -94,6 +95,7 @@ export default class StatementContainer extends React.PureComponent {
         speaker={speaker}
         handleEdit={() => this.setState({ isEditing: true })}
         handleDelete={() => this.setState({ isDeleting: true })}
+        offset={this.props.offset}
       />
     )
   }

app/components/Statements/StatementForm.jsx

@@ -34,7 +34,10 @@ export class StatementForm extends React.PureComponent {
   constructor(props) {
     super(props)
     const lockedTime =
-      props.initialValues.time === undefined ? props.position : props.initialValues.time
+      props.initialValues.time === undefined
+        ? props.position
+        : props.initialValues.time + props.offset
+
     this.state = { lockedTime }
   }
 
@@ -48,9 +51,11 @@ export class StatementForm extends React.PureComponent {
   }
 
   toggleLock() {
-    if (this.state.lockedTime === false)
+    if (this.state.lockedTime === false) {
       this.setState({ lockedTime: this.props.position || 0 })
-    else this.setState({ lockedTime: false })
+    } else {
+      this.setState({ lockedTime: false })
+    }
   }
 
   moveTimeMarker(position) {
@@ -59,12 +64,23 @@ export class StatementForm extends React.PureComponent {
   }
 
   handleSubmit(statement) {
-    const currentTime =
-      this.state.lockedTime === false ? this.props.position : this.state.lockedTime
-    if (currentTime !== 0 && !currentTime)
-      statement.time = this.props.initialValues.time || 0
-    else statement.time = currentTime || 0
-    if (!statement.speaker_id) statement.speaker_id = null
+    const { position, initialValues, offset } = this.props
+    const { lockedTime } = this.state
+
+    // Get the best value for statement time and apply the reverse offset
+    // to use absolute timecode.
+    if (lockedTime !== false) {
+      statement.time = lockedTime - offset
+    } else if (position) {
+      statement.time = position - offset
+    } else {
+      statement.time = -offset
+    }
+
+    if (!statement.speaker_id) {
+      statement.speaker_id = null
+    }
+
     this.props.handleConfirm(statement).then(
       handleFormEffectResponse({
         onSuccess: ({ id }) => this.props.setScrollTo({ id, __forceAutoScroll: true })
@@ -75,6 +91,7 @@ export class StatementForm extends React.PureComponent {
   render() {
     const {
       position,
+      offset = 0,
       handleSubmit,
       valid,
       speakers,

app/components/Statements/StatementHeader.jsx

@@ -11,7 +11,7 @@ import ReputationGuardTooltip from '../Utils/ReputationGuardTooltip'
 export default withNamespaces('videoDebate')(
   ({
     t,
-    statement,
+    statementTime,
     speaker,
     handleTimeClick,
     handleShowHistory,
@@ -21,7 +21,7 @@ export default withNamespaces('videoDebate')(
   }) => (
     <header className="card-header">
       <p className="card-header-title">
-        <TimeDisplay time={statement.time} handleClick={handleTimeClick} />
+        <TimeDisplay time={statementTime} handleClick={handleTimeClick} />
         {speaker && speaker.picture && (
           <img className="speaker-mini" src={speaker.picture} alt="" />
         )}

app/components/Statements/StatementsList.jsx

@@ -17,7 +17,8 @@ import { FULLHD_WIDTH_THRESHOLD } from '../../constants'
 @connect(
   state => ({
     statements: state.VideoDebate.statements.data,
-    statementFormSpeakerId: statementFormValueSelector(state, 'speaker_id')
+    statementFormSpeakerId: statementFormValueSelector(state, 'speaker_id'),
+    offset: state.VideoDebate.video.offset
   }),
   { closeStatementForm, postStatement, setScrollTo }
 )
@@ -34,11 +35,12 @@ export default class StatementsList extends React.PureComponent {
   }
 
   render() {
-    const { statementFormSpeakerId, statements } = this.props
+    const { statementFormSpeakerId, statements, offset } = this.props
     return (
       <div className="statements-list">
         {statementFormSpeakerId !== undefined && (
           <StatementForm
+            offset={offset}
             initialValues={{ speaker_id: statementFormSpeakerId }}
             enableReinitialize
             keepDirtyOnReinitialize

app/components/StyledUtils/Title.jsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import { fontSize, space, themeGet } from 'styled-system'
+
+export const StyledH1 = styled.h1`
+  font-size: ${themeGet('fontSizes.0')};
+  margin-bottom: ${themeGet('space.4')};
+  ${fontSize}
+  ${space}
+`
+
+export const StyledH2 = styled.h2`
+  font-size: ${themeGet('fontSizes.1')};
+  margin-bottom: ${themeGet('space.4')};
+  ${fontSize}
+  ${space}
+`
+
+export const StyledH3 = styled.h3`
+  font-size: ${themeGet('fontSizes.2')};
+  margin-bottom: ${themeGet('space.3')};
+  ${fontSize}
+  ${space}
+`
+
+export const StyledH4 = styled.h4`
+  font-size: ${themeGet('fontSizes.3')};
+  margin-bottom: ${themeGet('space.2')};
+  ${fontSize}
+  ${space}
+`
+
+export const StyledH5 = styled.h5`
+  font-size: ${themeGet('fontSizes.4')};
+  margin-bottom: ${themeGet('space.2')};
+  ${fontSize}
+  ${space}
+`
+
+export const StyledH6 = styled.h6`
+  font-size: ${themeGet('fontSizes.5')};
+  margin-bottom: ${themeGet('space.1')};
+  ${fontSize}
+  ${space}
+`

app/components/Videos/EditVideoModal.jsx

@@ -1,58 +1,84 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { withNamespaces } from 'react-i18next'
-import { Field, reduxForm } from 'redux-form'
+import { Formik } from 'formik'
+import { Flex } from '@rebass/grid'
 
+import { Edit } from 'styled-icons/fa-regular/Edit'
+
+import { shiftStatements } from '../../state/video_debate/effects'
 import Modal from '../Modal/Modal'
 import { popModal } from '../../state/modals/reducer'
-import { Icon } from '../Utils/Icon'
 import { flashErrorMsg, flashSuccessMsg } from '../../state/flashes/reducer'
 import FieldWithButton from '../FormUtils/FieldWithButton'
-import { shiftStatements } from '../../state/video_debate/statements/effects'
+import StyledLabel from '../FormUtils/StyledLabel'
+import { StyledH3 } from '../StyledUtils/Title'
 
-const TimeShiftForm = reduxForm({
-  form: 'shiftStatements',
-  initialValues: { offset: 0 }
-})(
-  withNamespaces('main')(({ handleSubmit, t }) => (
-    <form onSubmit={handleSubmit}>
-      <Field
-        component={FieldWithButton}
-        name="offset"
-        type="number"
-        placeholder="+0s"
-        buttonLabel={t('actions.apply')}
-        validate={offset => !offset}
-      />
-    </form>
-  ))
-)
+class EditVideoModal extends React.PureComponent {
+  renderTitle() {
+    return (
+      <span>
+        <Edit size="1em" /> {this.props.t('video.edit')}
+      </span>
+    )
+  }
 
-@connect(
-  null,
-  { popModal, flashErrorMsg, flashSuccessMsg, shiftStatements }
-)
-@withNamespaces('videoDebate')
-export default class EditVideoModal extends React.PureComponent {
   render() {
+    const { t, popModal, video } = this.props
+
     return (
-      <Modal
-        handleCloseClick={this.props.popModal}
-        title={
-          <span>
-            <Icon name="pencil" /> {this.props.t('video.edit')}
-          </span>
-        }
-      >
-        <h4 className="title is-4">{this.props.t('video.shiftStatements')}</h4>
-        <TimeShiftForm onSubmit={this.shiftSubmit} />
+      <Modal handleCloseClick={popModal} title={this.renderTitle()}>
+        <Flex flexDirection="column">
+          <StyledH3>{t('video.shiftStatements')}</StyledH3>
+          <Formik
+            initialValues={{ youtube_offset: video.youtube_offset }}
+            onSubmit={async (values, { setSubmitting }) => {
+              setSubmitting(true)
+              const reply = await this.props.shiftStatements(values)
+              setSubmitting(false)
+              this.props.popModal()
+              return reply
+            }}
+          >
+            {({ handleSubmit, isSubmitting, values, handleChange }) => (
+              <form onSubmit={handleSubmit}>
+                <Flex>
+                  <StyledLabel fontSize={3} mr={3}>
+                    Youtube
+                  </StyledLabel>
+                  <FieldWithButton
+                    type="number"
+                    input={{
+                      name: 'youtube_offset',
+                      max: '10000000',
+                      value: values.youtube_offset,
+                      onChange: handleChange
+                    }}
+                    meta={{ submitting: isSubmitting }}
+                    placeholder="+0s"
+                    buttonLabel={t('main:actions.apply')}
+                    buttonClickHandler={handleSubmit}
+                  />
+                </Flex>
+              </form>
+            )}
+          </Formik>
+        </Flex>
       </Modal>
     )
   }
+}
 
-  shiftSubmit = ({ offset }) => {
-    if (offset) {
-      return this.props.shiftStatements(offset).then(() => this.props.popModal())
-    }
-  }
+const mapDispatchToProps = {
+  popModal,
+  flashErrorMsg,
+  flashSuccessMsg,
+  shiftStatements
 }
+
+export default withNamespaces(['videoDebate', 'main'])(
+  connect(
+    state => ({ video: state.VideoDebate.video.data }),
+    mapDispatchToProps
+  )(EditVideoModal)
+)

app/components/Videos/VideoCard.jsx

@@ -12,7 +12,7 @@ import { videoURL } from '../../lib/cf_routes'
 export class VideoCard extends React.PureComponent {
   render() {
     const { t, video } = this.props
-    const { hash_id, title, provider, provider_id } = video
+    const { hash_id, title } = video
     const linkTarget = videoURL(hash_id)
 
     return (
@@ -25,7 +25,7 @@ export class VideoCard extends React.PureComponent {
                 <RawIcon name="play-circle" />
               </div>
               <figure className="image is-16by9">
-                <img alt="" src={VideoCard.videoThumb(provider, provider_id)} />
+                <img alt="" src={VideoCard.videoThumb(video)} />
               </figure>
             </Link>
           }
@@ -93,9 +93,9 @@ export class VideoCard extends React.PureComponent {
     return <Link to={`/s/${speaker.slug || speaker.id}`}>{speaker.full_name}</Link>
   }
 
-  static videoThumb(provider, provider_id) {
-    if (provider === 'youtube') {
-      return `https://img.youtube.com/vi/${provider_id}/mqdefault.jpg`
+  static videoThumb({youtube_id}) {
+    if (youtube_id) {
+      return `https://img.youtube.com/vi/${youtube_id}/mqdefault.jpg`
     }
     return ''
   }

app/constants.js

@@ -92,3 +92,6 @@ export const STATEMENT_LENGTH = [10, 255]
 export const ALL_VIDEOS = 'ALL_VIDEOS'
 export const ONLY_PARTNERS = 'ONLY_PARTNERS'
 export const ONLY_COMMUNITY = 'ONLY_COMMUNITY'
+
+/* ------ Third party providers ------ */
+export const VIDEO_PLAYER_YOUTUBE = 'youtube'