From ef620fed61833c443ee4040689eb4273728917ce Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 11:38:22 +1100
Subject: [PATCH 1/6] Newsletter unsubscribe page + large videos on VideoDebate

---
 app/assets/assets/locales/en/user.json        |  6 +++-
 app/assets/assets/locales/fr/user.json        |  6 +++-
 .../Users/NewsletterSubscription.jsx          | 35 +++++++++++++++++++
 app/components/Utils/Notification.jsx         |  4 +--
 app/router.jsx                                |  2 ++
 .../_components/VideoDebate/video_debate.sass |  3 +-
 6 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 app/components/Users/NewsletterSubscription.jsx

diff --git a/app/assets/assets/locales/en/user.json b/app/assets/assets/locales/en/user.json
index fccaf6a1f..2b42a0c39 100644
--- a/app/assets/assets/locales/en/user.json
+++ b/app/assets/assets/locales/en/user.json
@@ -23,5 +23,9 @@
   "emailConfirmed": "Email confirmed",
   "linkedAccounts": "Linked accounts",
   "linkAccount": "Link account",
-  "unlinkAccount": "Unlink account"
+  "unlinkAccount": "Unlink account",
+  "newsletter": {
+    "unsubscribe_success": "You've been unsubscribed from our newsletter",
+    "unsubscribe_error": "Given token seems invalid. If the problem persist, contact us"
+  }
 }
\ No newline at end of file
diff --git a/app/assets/assets/locales/fr/user.json b/app/assets/assets/locales/fr/user.json
index 5ce3582bf..4642b7958 100644
--- a/app/assets/assets/locales/fr/user.json
+++ b/app/assets/assets/locales/fr/user.json
@@ -23,5 +23,9 @@
   "emailConfirmed": "Email confirmé",
   "linkedAccounts": "Comptes liés",
   "linkAccount": "Lier le compte",
-  "unlinkAccount": "Délier le compte"
+  "unlinkAccount": "Délier le compte",
+  "newsletter": {
+    "unsubscribe_success": "Désinscription de la newsletter enregistrée !",
+    "unsubscribe_error": "Erreur lors de la desinscription, le code est probablement invalide. Si le problème persiste, contactez nous"
+  }
 }
\ No newline at end of file
diff --git a/app/components/Users/NewsletterSubscription.jsx b/app/components/Users/NewsletterSubscription.jsx
new file mode 100644
index 000000000..0945b4ba0
--- /dev/null
+++ b/app/components/Users/NewsletterSubscription.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+
+import Notification from '../Utils/Notification'
+import { HttpApi } from '../../API'
+import { LoadingFrame } from '../Utils/LoadingFrame'
+
+
+@translate('user')
+export default class NewsletterSubscription extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = {status: 'loading'}
+  }
+
+  componentDidMount() {
+    // Send request
+    HttpApi.get(`newsletter/unsubscribe/${this.props.params.token}`)
+      .then(() => this.setState({status: 'success'}))
+      .catch(() => this.setState({status: 'error'}))
+  }
+
+  render() {
+    if (this.state.status === 'loading')
+      return <LoadingFrame/>
+    const cssType = this.state.status === 'success' ? this.state.status : 'danger'
+    return (
+      <div className="container">
+        <Notification type={cssType} style={{maxWidth: 400, margin: '3em auto'}}>
+          {this.props.t('newsletter.unsubscribe', {context: this.state.status})}
+        </Notification>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/components/Utils/Notification.jsx b/app/components/Utils/Notification.jsx
index 169c3faf8..e1ef44545 100644
--- a/app/components/Utils/Notification.jsx
+++ b/app/components/Utils/Notification.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-const Notification = ({children, type='info'}) =>
-  <div className={`notification is-${type}`}>
+const Notification = ({children, type='info', ...otherProps}) =>
+  <div className={`notification is-${type}`} {...otherProps}>
     {children}
   </div>
 
diff --git a/app/router.jsx b/app/router.jsx
index b533f13a8..1d474aa3c 100644
--- a/app/router.jsx
+++ b/app/router.jsx
@@ -29,6 +29,7 @@ import ResetPasswordRequestForm from './components/Users/ResetPasswordRequestFor
 import ResetPasswordConfirmForm from './components/Users/ResetPasswordConfirmForm'
 import ConfirmEmail from './components/Users/ConfirmEmail'
 import { SpeakerPage } from './components/Speakers/SpeakerPage'
+import NewsletterSubscription from './components/Users/NewsletterSubscription'
 
 
 ReactDOM.render(
@@ -43,6 +44,7 @@ ReactDOM.render(
         <Route path="/confirm_email/:token" component={ConfirmEmail}/>
         <Route path="/reset_password" component={ResetPasswordRequestForm}/>
         <Route path="/reset_password/confirm/:token" component={ResetPasswordConfirmForm}/>
+        <Route path="/newsletter/unsubscribe/:token" component={NewsletterSubscription}/>
         <Route path="/u/:username" component={User}>
           <IndexRoute component={UserProfile}/>
           <Route path="/u/:username/activity" component={NotFound}/>
diff --git a/app/styles/_components/VideoDebate/video_debate.sass b/app/styles/_components/VideoDebate/video_debate.sass
index 216cc7823..fc9e63d4e 100644
--- a/app/styles/_components/VideoDebate/video_debate.sass
+++ b/app/styles/_components/VideoDebate/video_debate.sass
@@ -55,7 +55,8 @@
       overflow-y: auto
     #col-video
       padding-bottom: 25px
-      max-width: 600px
+      max-width: 700px
+      width: 36%
 
   #col-debate
     background: rgb(246, 247, 250)

From f219ef331e05bef4d7d23b47978e9a666a5d9126 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 16:04:12 +1100
Subject: [PATCH 2/6] Resizable video column + Bubble menu: show cross when
 adding statement

---
 app/assets/assets/locales/en/videoDebate.json |  7 ++---
 app/assets/assets/locales/fr/videoDebate.json |  1 +
 app/components/Statements/StatementForm.jsx   |  6 ++---
 .../VideoDebate/ActionBubbleMenu.jsx          | 26 ++++++++++++++-----
 app/state/video_debate/statements/effects.js  |  3 +++
 .../{ => VideoDebate}/action_bubble_menu.sass |  6 ++---
 .../_components/VideoDebate/video_debate.sass |  3 ++-
 app/styles/_components/statements.sass        |  2 +-
 app/styles/application.sass                   |  2 +-
 9 files changed, 38 insertions(+), 18 deletions(-)
 rename app/styles/_components/{ => VideoDebate}/action_bubble_menu.sass (90%)

diff --git a/app/assets/assets/locales/en/videoDebate.json b/app/assets/assets/locales/en/videoDebate.json
index 3e5ea3f1d..7a1df7013 100644
--- a/app/assets/assets/locales/en/videoDebate.json
+++ b/app/assets/assets/locales/en/videoDebate.json
@@ -49,9 +49,10 @@
     "textPlaceholder": "Type a raw transcript of what the speaker says",
     "noSpeakerTextPlaceholder": "Describe what you see or select a speaker",
     "text": "Text",
-    "add": "Add a statement",
-    "autoscroll_enable": "Enable autoscroll",
-    "autoscroll_disable": "Disable autoscroll",
+    "add": "Add a Statement",
+    "abortAdd": "Close Statement Form",
+    "autoscroll_enable": "Enable Autoscroll",
+    "autoscroll_disable": "Disable Autoscroll",
     "reverseTimeLock_lock": "Unlock time marker",
     "reverseTimeLock_unlock": "Lock time marker"
   },
diff --git a/app/assets/assets/locales/fr/videoDebate.json b/app/assets/assets/locales/fr/videoDebate.json
index ec7ad4049..6372aa286 100644
--- a/app/assets/assets/locales/fr/videoDebate.json
+++ b/app/assets/assets/locales/fr/videoDebate.json
@@ -53,6 +53,7 @@
     "noSpeakerTextPlaceholder": "Décrivez ce qui apparait à l'image ou ajoutez un intervenant",
     "text": "Le texte",
     "add": "Ajouter une citation",
+    "abortAdd": "Annuler l'ajout de citation",
     "autoscroll_enable": "Activer le scroll automatique",
     "autoscroll_disable": "Désactiver le scroll automatique",
     "reverseTimeLock_lock": "Déverrouiller la position",
diff --git a/app/components/Statements/StatementForm.jsx b/app/components/Statements/StatementForm.jsx
index ed30ca4f8..c863dbbbc 100644
--- a/app/components/Statements/StatementForm.jsx
+++ b/app/components/Statements/StatementForm.jsx
@@ -24,14 +24,14 @@ const validate = ({text, time}, {t}) => {
   return errors
 }
 
-const SpeakersSelect = ({input, speakers}) => {
+const SpeakersSelect = ({input, speakers, label}) => {
   return (
     <Select className="speaker-select"
             onChange={s => s && s.id ? input.onChange(s.id) : input.onChange(null)}
             onBlur={() => input.onBlur(input.value.id)}
             value={input.value}
             name={input.name}
-            placeholder="Select Speaker..."
+            placeholder={label}
             labelKey="full_name"
             valueKey="id"
             ignoreAccents={true}
@@ -113,7 +113,7 @@ export class StatementForm extends React.PureComponent {
               <Icon size="small" name={toggleTimeLockAction}/>
             </a>
             {speaker && speaker.picture && <img className="speaker-mini" src={staticResource(speaker.picture)}/>}
-            <Field name="speaker_id" component={SpeakersSelect} speakers={speakers}/>
+            <Field name="speaker_id" component={SpeakersSelect} speakers={speakers} label={t('speaker.add')}/>
           </div>
         </header>
         <div className="card-content">
diff --git a/app/components/VideoDebate/ActionBubbleMenu.jsx b/app/components/VideoDebate/ActionBubbleMenu.jsx
index 94d272fdf..7b8ee5d07 100644
--- a/app/components/VideoDebate/ActionBubbleMenu.jsx
+++ b/app/components/VideoDebate/ActionBubbleMenu.jsx
@@ -12,11 +12,17 @@ import {isAuthenticated} from '../../state/users/current_user/selectors'
 import { Icon } from '../Utils/Icon'
 import ShareModal from '../Utils/ShareModal'
 import EditVideoModal from '../Videos/EditVideoModal'
+import { hasStatementForm } from '../../state/video_debate/statements/selectors'
+import { destroyStatementForm } from '../../state/video_debate/statements/effects'
 
 
 @connect(
-  state => ({hasAutoscroll: state.UserPreferences.enableAutoscroll, isAuthenticated: isAuthenticated(state)}),
-  {changeStatementFormSpeaker, toggleAutoscroll, addModal}
+  state => ({
+    hasAutoscroll: state.UserPreferences.enableAutoscroll,
+    isAuthenticated: isAuthenticated(state),
+    hasStatementForm: hasStatementForm(state)
+  }),
+  {changeStatementFormSpeaker, toggleAutoscroll, addModal, destroyStatementForm}
 )
 @translate(['videoDebate', 'main'])
 @withRouter
@@ -39,15 +45,16 @@ export default class ActionBubbleMenu extends React.PureComponent {
 
   render() {
     return (
-      <div className={classNames("action-bubble-container", {active: this.state.active})}
+      <div className={classNames("action-bubble-container", {active: this.state.active, hasForm: this.props.hasStatementForm})}
            onMouseEnter={this.activate}
            onMouseLeave={() => this.setState({active: false})}
            onTouchStart={this.activate}
       >
         {this.props.isAuthenticated &&
-          <ActionBubble iconName="commenting-o"
-                        label={this.props.t('statement.add')}
-                        onClick={() => this.state.active ? this.addStatement() : null}
+          <ActionBubble iconName={this.props.hasStatementForm ? 'times' : "commenting-o"}
+                        label={this.props.t(this.props.hasStatementForm ? 'statement.abortAdd' : 'statement.add')}
+                        activated={!this.props.hasStatementForm}
+                        onClick={() => this.onStatementBubbleClick()}
           />
         }
         <ActionBubble iconName="arrows-v"
@@ -77,6 +84,13 @@ export default class ActionBubbleMenu extends React.PureComponent {
       </div>
     )
   }
+
+  onStatementBubbleClick() {
+    if (this.props.hasStatementForm)
+      this.props.destroyStatementForm()
+    else if (this.state.active)
+      this.addStatement()
+  }
 }
 
 const ActionBubble = ({iconName, label, activated=true, ...props}) => (
diff --git a/app/state/video_debate/statements/effects.js b/app/state/video_debate/statements/effects.js
index 68c0f7d6d..f5ec4f56e 100644
--- a/app/state/video_debate/statements/effects.js
+++ b/app/state/video_debate/statements/effects.js
@@ -1,3 +1,5 @@
+import { destroy } from 'redux-form'
+
 import { SocketApi } from "../../../API"
 import { STATEMENTS_CHANNEL } from "../../../constants"
 import { add, fetchStatements, remove, setLoading, setSubmitting, update, updateAll } from './reducer'
@@ -45,3 +47,4 @@ export const shiftStatements = offset => createEffect(
   {catch: errorToFlash}
 )
 
+export const destroyStatementForm = () => destroy('StatementForm')
diff --git a/app/styles/_components/action_bubble_menu.sass b/app/styles/_components/VideoDebate/action_bubble_menu.sass
similarity index 90%
rename from app/styles/_components/action_bubble_menu.sass
rename to app/styles/_components/VideoDebate/action_bubble_menu.sass
index b0dc009a1..99deac1c4 100644
--- a/app/styles/_components/action_bubble_menu.sass
+++ b/app/styles/_components/VideoDebate/action_bubble_menu.sass
@@ -20,11 +20,11 @@ $sub-bubble-icon-size: 24px
   width: $main-bubble-height
   background: $secondary
   border-radius: 3em
-  box-shadow: 0px 3px 6px 0px transparentize($grey, 0.4)
+  box-shadow: 0 3px 6px 0 transparentize($grey, 0.4)
   transition: box-shadow 0.3s, background 0.3s
   &:hover
     cursor: pointer
-    box-shadow: 0px 3px 6px 0px transparentize($grey, 0.2)
+    box-shadow: 0 3px 6px 0 transparentize($grey, 0.2)
     .label
       @include animate(fadeIn, 0.2s)
       display: block
@@ -52,7 +52,7 @@ $sub-bubble-icon-size: 24px
 .action-bubble:not(.activated)
   background: $grey-light
 
-.action-bubble-container:not(:hover):not(.active) .action-bubble:first-child
+.action-bubble-container:not(:hover):not(.active):not(.hasForm) .action-bubble:first-child
   i
     transform: rotate(-360deg)
     &:before
diff --git a/app/styles/_components/VideoDebate/video_debate.sass b/app/styles/_components/VideoDebate/video_debate.sass
index fc9e63d4e..5bb8285a5 100644
--- a/app/styles/_components/VideoDebate/video_debate.sass
+++ b/app/styles/_components/VideoDebate/video_debate.sass
@@ -54,8 +54,9 @@
       height: 100vh
       overflow-y: auto
     #col-video
+      resize: horizontal
       padding-bottom: 25px
-      max-width: 700px
+      max-width: 60%
       width: 36%
 
   #col-debate
diff --git a/app/styles/_components/statements.sass b/app/styles/_components/statements.sass
index 935af4dbe..3f7cdd345 100644
--- a/app/styles/_components/statements.sass
+++ b/app/styles/_components/statements.sass
@@ -57,7 +57,7 @@ $statement-text-color: #e0e7f1
         .button
           margin-right: 10px
         .speaker-select
-          min-width: 200px
+          min-width: 235px
         .time-display
           border: none
           padding-right: 0
diff --git a/app/styles/application.sass b/app/styles/application.sass
index 219e47812..2be9af8be 100644
--- a/app/styles/application.sass
+++ b/app/styles/application.sass
@@ -61,11 +61,11 @@
 @import "_components/form"
 @import "_components/invitation_request_form"
 @import "_components/Utils/flash_messages"
-@import "_components/action_bubble_menu"
 @import "_components/Videos/card"
 @import "_components/Videos/page"
 @import "_components/Videos/player"
 @import "_components/modal"
+@import "_components/VideoDebate/action_bubble_menu"
 @import "_components/VideoDebate/video_debate"
 @import "_components/VideoDebate/history"
 @import "_components/VideoDebate/speaker_preview"

From c65051a80d79cc21a59cdd908c0250e17598fdf3 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 16:11:15 +1100
Subject: [PATCH 3/6] Bubble menu: show sign-in bubble if not authenticated

---
 app/components/VideoDebate/ActionBubbleMenu.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/components/VideoDebate/ActionBubbleMenu.jsx b/app/components/VideoDebate/ActionBubbleMenu.jsx
index 7b8ee5d07..912887c4f 100644
--- a/app/components/VideoDebate/ActionBubbleMenu.jsx
+++ b/app/components/VideoDebate/ActionBubbleMenu.jsx
@@ -50,6 +50,11 @@ export default class ActionBubbleMenu extends React.PureComponent {
            onMouseLeave={() => this.setState({active: false})}
            onTouchStart={this.activate}
       >
+        {!this.props.isAuthenticated &&
+          <ActionBubble iconName="sign-in" label={this.props.t('main:menu.loginSignup')}
+                        onClick={() => this.props.router.push('/login')}
+          />
+        }
         {this.props.isAuthenticated &&
           <ActionBubble iconName={this.props.hasStatementForm ? 'times' : "commenting-o"}
                         label={this.props.t(this.props.hasStatementForm ? 'statement.abortAdd' : 'statement.add')}

From 6749bdba15c845d9b499166413fd03d9d5421644 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 16:13:03 +1100
Subject: [PATCH 4/6] Upgrade version to 0.7.3

---
 app/i18n.js  | 4 ++--
 package.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/i18n.js b/app/i18n.js
index 2cdeb0fa3..f3debfd3e 100644
--- a/app/i18n.js
+++ b/app/i18n.js
@@ -33,8 +33,8 @@ i18n
       prefix: '_translations',
       expirationTime: 48*60*60*1000, // 48h
       versions: {
-        en: "0.7.2a",
-        fr: "0.7.2a"
+        en: "0.7.3",
+        fr: "0.7.3"
       }
     },
     detection: {
diff --git a/package.json b/package.json
index 7a18b6dd5..3ab2a9f9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "captain-fact-frontend",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": true,
   "scripts": {
     "start": "brunch watch --server",

From 617a896da3c7aa6a3efdbeb831fc500d59167ac7 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 16:39:14 +1100
Subject: [PATCH 5/6] Record user locale on register

---
 app/components/Users/SignupForm.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Users/SignupForm.jsx b/app/components/Users/SignupForm.jsx
index 9632da2ad..51a7c6b9e 100644
--- a/app/components/Users/SignupForm.jsx
+++ b/app/components/Users/SignupForm.jsx
@@ -46,7 +46,7 @@ export default withRouter(translate('user')(SignupForm))
 @translate('user')
 @reduxForm({form: 'signupForm', validate: validatePasswordRepeat})
 @connect(
-  ({CurrentUser: {data}}) => ({CurrentUser: data}),
+  ({CurrentUser: {data}, UserPreferences: {locale}}) => ({CurrentUser: data, locale}),
   {register, requestInvitation, errorToFlash}
 )
 class RealSignupForm extends React.PureComponent {
@@ -57,7 +57,7 @@ class RealSignupForm extends React.PureComponent {
   }
 
   submit({invitation_token, ...user}) {
-    return this.props.register({invitation_token, user})
+    return this.props.register({invitation_token, user: {...user, locale: this.props.locale}})
       .then(handleFormEffectResponse({
         onError: msg => typeof(msg) === 'string' ? this.props.errorToFlash(msg) : null
       }))

From 362711808d6c4beaff416fb5eb8813eea5f97a1e Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Thu, 7 Dec 2017 19:21:06 +1100
Subject: [PATCH 6/6] Minor style improvements

---
 app/components/Speakers/SpeakerPreview.jsx              | 4 ++--
 app/styles/_components/Speakers/speaker_preview.sass    | 2 +-
 app/styles/_components/VideoDebate/speaker_preview.sass | 2 +-
 app/styles/_components/statements.sass                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Speakers/SpeakerPreview.jsx b/app/components/Speakers/SpeakerPreview.jsx
index 8a31974d3..bae7ba3b7 100644
--- a/app/components/Speakers/SpeakerPreview.jsx
+++ b/app/components/Speakers/SpeakerPreview.jsx
@@ -56,8 +56,8 @@ export class SpeakerPreview extends React.PureComponent {
 
   renderSpeakerThumb(speaker) {
     if (speaker.picture)
-      return (<img src={staticResource(speaker.picture)}/>)
-    return (<Icon name="user" size="large" style={{color: "grey"}}/>)
+      return (<img className="speaker-picture" src={staticResource(speaker.picture)}/>)
+    return (<Icon className="speaker-picture" name="user" size="large" style={{color: "grey"}}/>)
   }
 
   getTitle() {
diff --git a/app/styles/_components/Speakers/speaker_preview.sass b/app/styles/_components/Speakers/speaker_preview.sass
index aea7d487c..8d12784e3 100644
--- a/app/styles/_components/Speakers/speaker_preview.sass
+++ b/app/styles/_components/Speakers/speaker_preview.sass
@@ -2,7 +2,7 @@
   .title
     display: block
 
-  .media-left > img
+  .speaker-picture
     border-radius: 25px
     width: 50px
     height: 50px
\ No newline at end of file
diff --git a/app/styles/_components/VideoDebate/speaker_preview.sass b/app/styles/_components/VideoDebate/speaker_preview.sass
index 0e37c0e9c..3565b4753 100644
--- a/app/styles/_components/VideoDebate/speaker_preview.sass
+++ b/app/styles/_components/VideoDebate/speaker_preview.sass
@@ -16,7 +16,7 @@ $speakingBoxShadowColor: transparentize($primary-darker, 0.4)
     padding: 10px 15px
     margin: 0
     border-top: 1px solid rgba(219, 219, 219, 0.5)
-    &.isActive img
+    &.isActive .speaker-picture
       animation: speakingPulse 2s infinite
     .link-with-icon > i
       font-size: 25px
\ No newline at end of file
diff --git a/app/styles/_components/statements.sass b/app/styles/_components/statements.sass
index 3f7cdd345..05ec3602e 100644
--- a/app/styles/_components/statements.sass
+++ b/app/styles/_components/statements.sass
@@ -18,7 +18,7 @@ $statement-text-color: #e0e7f1
     .statement-container
       padding: 15px 0
       &.is-focused .statement
-        box-shadow: 0px 0px 10px 5px rgba(197, 197, 197, 0.32)
+        box-shadow: 0px 0px 20px 0px rgb(148, 148, 148)
         max-width: $statement-max-width
     .statement
       @include animate(fadeIn, 0.2s)