Release 0.9.3

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/Modal/Modal.jsx

@@ -2,10 +2,21 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import classNames from 'classnames'
+import styled from 'styled-components'
+
+import { TimesCircle } from 'styled-icons/fa-regular/TimesCircle.cjs'
 
 import { popModal } from '../../state/modals/reducer'
 import { Icon } from '../Utils/Icon'
-import Button from '../Utils/Button'
+
+const CloseIcon = styled(TimesCircle)`
+  height: 1.5em;
+  width: 1.5em;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.75;
+  }
+`
 
 const Modal = ({
   helpLink,
@@ -35,7 +46,7 @@ const Modal = ({
               <Icon name="question-circle" size="medium" />
             </Link>
           )}
-          <Button className="delete" onClick={handleCloseClick || popModal} />
+          <CloseIcon title="Close" onClick={handleCloseClick || popModal} />
         </header>
       )}
       {overrideContentStructure ? (

app/components/Speakers/SpeakerPreview.jsx

@@ -44,7 +44,7 @@ export class SpeakerPreview extends React.PureComponent {
         content={
           <React.Fragment>
             {this.renderName(speaker)}
-            <p className="subtitle">{this.getTitle()}</p>
+            <p className="subtitle">{speaker.title || '...'}</p>
           </React.Fragment>
         }
         right={isAuthenticated && !withoutActions && this.renderActions()}
@@ -107,28 +107,6 @@ export class SpeakerPreview extends React.PureComponent {
     )
   }
 
-  getTitle() {
-    const { title, country } = this.props.speaker
-    // Only translate if title exists and is not user defined
-    if (!title) return '...'
-
-    let i18nTitle = ''
-    if (this.props.i18n.language === 'en')
-      // No need to translate title for english
-      i18nTitle = title
-    else {
-      // If unknown title, return raw title
-      const i18nTitleKey = `speaker.titles.${title}`
-      i18nTitle = this.props.t(i18nTitleKey)
-      if (i18nTitle === i18nTitleKey) return title
-    }
-    // Try to return title + nationality, otherwise fallback on translated title
-    return this.props.t('speaker.titleFormat', {
-      title: i18nTitle,
-      context: country
-    })
-  }
-
   handleRemove() {
     this.props.addModal({
       Modal: ModalRemoveSpeaker,

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/AddVideoForm.jsx

@@ -90,11 +90,12 @@ export class AddVideoForm extends React.PureComponent {
   }
 
   handleSubmit(video) {
-    const promise = this.props.postVideo(video)
-    return promise.then(action => {
-      if (!action.error) this.props.router.push(`/videos/${action.payload.hash_id}`)
-      else if (action.payload === 'unauthorized' && !this.props.isAuthenticated)
+    return this.props.postVideo(video).then(action => {
+      if (!action.error) {
+        this.props.router.push(`/videos/${action.payload.hash_id}`)
+      } else if (action.payload === 'unauthorized' && !this.props.isAuthenticated) {
         this.props.router.push('/login')
+      }
     })
   }
 }