Use new video hash_id field

app/components/Statements/StatementHeader.jsx

@@ -27,7 +27,7 @@ export default translate('videoDebate')(({
     <div className="card-header-icon">
       <ReputationGuardTooltip
         requiredRep={MIN_REPUTATION_REMOVE_STATEMENT}
-        tooltipPosition="left"
+        tooltipPosition="left center"
       >
         {({hasReputation}) => (
           <ClickableIcon
@@ -41,7 +41,7 @@ export default translate('videoDebate')(({
       </ReputationGuardTooltip>
       <ReputationGuardTooltip
         requiredRep={MIN_REPUTATION_UPDATE_STATEMENT}
-        tooltipPosition="left"
+        tooltipPosition="left center"
       >
         {({hasReputation}) => (
           <ClickableIcon

app/components/VideoDebate/ColumnVideo.jsx

@@ -13,6 +13,7 @@ import ReputationGuardTooltip from '../Utils/ReputationGuardTooltip'
 import VideoDebatePlayer from './VideoDebatePlayer'
 import Presence from './Presence'
 import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
+import { videoURL, videoHistoryURL } from '../../lib/cf_routes'
 
 
 @connect(state => ({
@@ -41,13 +42,13 @@ export class ColumnVideo extends React.PureComponent {
         <div className="tabs is-toggle is-fullwidth">
           <ul>
             <li className={classNames({'is-active': isDebate})}>
-              <Link to={`/videos/${video.id}`}>
+              <Link to={videoURL(video.hash_id)}>
                 <Icon size="small" name="check-circle"/>
                 <span>{ t('debate') }</span>
               </Link>
             </li>
             <li className={classNames({'is-active': !isDebate})}>
-              <Link to={`/videos/${video.id}/history`}>
+              <Link to={videoHistoryURL(video.hash_id)}>
                 <Icon size="small" name="history"/>
                 <span>{ t('history') }</span>
               </Link>

app/components/Videos/VideoCard.jsx

@@ -6,20 +6,22 @@ import { Icon, TimeSince } from '../Utils'
 import iterateWithSeparators from '../../lib/iterate_with_separators'
 import CardLayout from '../Utils/CardLayout'
 import RawIcon from '../Utils/RawIcon'
+import { videoURL } from '../../lib/cf_routes'
 
 
 @translate('videoDebate')
 export class VideoCard extends React.PureComponent {
   render() {
     const { t, video } = this.props
-    const { id, title, provider, provider_id } = video
+    const { hash_id, title, provider, provider_id } = video
+    const linkTarget = videoURL(hash_id)
 
     return (
       <div className="column is-one-quarter">
         <CardLayout
           className="video-card"
           image={(
-            <Link to={`/videos/${id}`}>
+            <Link to={linkTarget}>
               <div className="play-overlay">
                 <RawIcon name="play-circle"/>
               </div>
@@ -29,7 +31,7 @@ export class VideoCard extends React.PureComponent {
             </Link>
           )}
           content={(
-            <Link to={`/videos/${id}`}>
+            <Link to={linkTarget}>
               <h4 className="title is-5">
                 { title }
               </h4>

app/lib/cf_routes.js

@@ -1,5 +1,7 @@
 export const videoURL = videoHashID => `/videos/${videoHashID}`
 
+export const videoHistoryURL = videoHashID => `${videoURL(videoHashID)}/history`
+
 export const statementURL = (videoHashID, statementID) => `${videoURL(videoHashID)}?statement=${statementID}`
 
 export const speakerURL = speakerIDOrSlug => `/s/${speakerIDOrSlug}`

app/state/videos/__tests__/__fixtures__/videos.json

@@ -27,7 +27,8 @@
     "posted_at": "2017-12-03T09:07:34.600875",
     "language": "fr",
     "is_partner": false,
-    "id": "Gyvg"
+    "hash_id": "Gyvg",
+    "id": 4
   },
   {
     "url": "https://www.youtube.com/watch?v=JDRzEdRQF5s",
@@ -57,7 +58,8 @@
     "posted_at": "2017-11-15T11:08:20.616949",
     "language": "fr",
     "is_partner": false,
-    "id": "GRjG"
+    "hash_id": "GRjG",
+    "id": 3
   },
   {
     "url": "https://www.youtube.com/watch?v=QS951xiGGvI",
@@ -87,7 +89,8 @@
     "posted_at": "2017-11-07T19:39:41.969945",
     "language": "fr",
     "is_partner": false,
-    "id": "G3j4"
+    "hash_id": "G3j4",
+    "id": 2
   },
   {
     "url": "https://www.youtube.com/watch?v=TxHqU0ICDr4",
@@ -117,6 +120,7 @@
     "posted_at": "2017-10-31T09:32:41.199113",
     "language": "fr",
     "is_partner": false,
-    "id": "Jzqg"
+    "hash_id": "Jzqg",
+    "id": 1
   }
 ]

app/state/videos/__tests__/__snapshots__/reducer.spec.js.snap

@@ -115,7 +115,8 @@ Immutable.Record {
   "error": null,
   "data": Immutable.List [
     Immutable.Record {
-      "id": "Gyvg",
+      "id": 4,
+      "hash_id": "Gyvg",
       "posted_at": 2017-12-03T09:07:34.600Z,
       "provider": "youtube",
       "provider_id": "8xL6XxKTieA",
@@ -145,7 +146,8 @@ Immutable.Record {
       "is_partner": false,
     },
     Immutable.Record {
-      "id": "GRjG",
+      "id": 3,
+      "hash_id": "GRjG",
       "posted_at": 2017-11-15T11:08:20.616Z,
       "provider": "youtube",
       "provider_id": "JDRzEdRQF5s",
@@ -175,7 +177,8 @@ Immutable.Record {
       "is_partner": false,
     },
     Immutable.Record {
-      "id": "G3j4",
+      "id": 2,
+      "hash_id": "G3j4",
       "posted_at": 2017-11-07T19:39:41.969Z,
       "provider": "youtube",
       "provider_id": "QS951xiGGvI",
@@ -205,7 +208,8 @@ Immutable.Record {
       "is_partner": false,
     },
     Immutable.Record {
-      "id": "Jzqg",
+      "id": 1,
+      "hash_id": "Jzqg",
       "posted_at": 2017-10-31T09:32:41.199Z,
       "provider": "youtube",
       "provider_id": "TxHqU0ICDr4",

app/state/videos/record.js

@@ -2,6 +2,7 @@ import { Record, List } from 'immutable'
 
 const Video = new Record({
   id: 0,
+  hash_id: null,
   posted_at: 0,
   provider: '',
   provider_id: 0,