Release

app/API/graphql_queries.js

@@ -72,3 +72,12 @@ export const loggedInUserUnreadNotificationsCount = gql`
     }
   }
 `
+
+export const loggedInUserPendingModerationCount = gql`
+  query LoggedInUserUnreadNotificationsCount {
+    loggedInUser {
+      id
+      actions_pending_moderation
+    }
+  }
+`

app/components/App/Sidebar.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
+import { Query } from 'react-apollo'
 import { withNamespaces } from 'react-i18next'
 import classNames from 'classnames'
+import { get } from 'lodash'
 import capitalize from 'voca/capitalize'
 import { Flex } from '@rebass/grid'
 
@@ -15,12 +17,14 @@ import { Facebook } from 'styled-icons/fa-brands/Facebook'
 
 import { LinkExternal } from 'styled-icons/octicons/LinkExternal'
 
+import { loggedInUserPendingModerationCount } from '../../API/graphql_queries'
 import { MOBILE_WIDTH_THRESHOLD, MIN_REPUTATION_MODERATION } from '../../constants'
 import RawIcon from '../Utils/RawIcon'
 import ReputationGuard from '../Utils/ReputationGuard'
 import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer'
 import UserLanguageSelector from '../LoggedInUser/UserLanguageSelector'
 import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
+import Tag from '../Utils/Tag'
 
 @connect((state) => ({ sidebarExpended: state.UserPreferences.sidebarExpended }), {
   toggleSidebar,
@@ -142,9 +146,21 @@ export default class Sidebar extends React.PureComponent {
           {capitalize(t('entities.video_plural'))}
         </this.MenuListLink>
         <ReputationGuard requiredRep={MIN_REPUTATION_MODERATION}>
-          <this.MenuListLink to="/moderation" iconName="flag">
-            {t('menu.moderation')}
-          </this.MenuListLink>
+          <Query
+            fetchPolicy="network-only"
+            pollInterval={25000}
+            query={loggedInUserPendingModerationCount}
+          >
+            {({ data }) => {
+              const pendingCount = get(data, 'loggedInUser.actions_pending_moderation', 0)
+              return (
+                <this.MenuListLink to="/moderation" iconName="flag">
+                  {t('menu.moderation')}
+                  <Tag type="danger">{pendingCount}</Tag>
+                </this.MenuListLink>
+              )
+            }}
+          </Query>
         </ReputationGuard>
       </ul>
     )

app/components/VideoDebate/index.jsx

@@ -17,6 +17,7 @@ import { resetVideoDebate } from '../../state/video_debate/actions'
 import { ColumnVideo } from './ColumnVideo'
 import { ColumnDebate } from './ColumnDebate'
 import { videoURL, toAbsoluteURL } from '../../lib/cf_routes'
+import { getHDThumbnailUrl } from '../../lib/video_utils'
 
 @connect(
   (state) => ({
@@ -55,7 +56,7 @@ export class VideoDebate extends React.PureComponent {
 
   renderMeta(video) {
     const title = `Vérification complète de : ${video.title}`
-    const image = video.thumbnail
+    const image = getHDThumbnailUrl(video)
     const description = `${video.title} vérifiée citation par citation par la communauté CaptainFact`
     return (
       <Helmet>

app/constants.js

@@ -54,7 +54,7 @@ export const MIN_REPUTATION_REMOVE_STATEMENT = 75
 export const MIN_REPUTATION_RESTORE_ENTITY = 75
 export const MIN_REPUTATION_REMOVE_SPEAKER = 75
 export const MIN_REPUTATION_UPDATE_VIDEO = 75
-export const MIN_REPUTATION_ADD_VIDEO = 15
+export const MIN_REPUTATION_ADD_VIDEO = 75
 export const MIN_REPUTATION_MODERATION = 125
 
 /* ------ UI, animations ------ */

app/lib/video_utils.js

@@ -19,6 +19,17 @@ export const getTimecode = (videoPlayer, video, baseTimecode) => {
   return getTimecodesOffset(video, videoPlayer) + baseTimecode
 }
 
+/**
+ * Returns HD thumbnail URL if any, otherwise returns the default thumbnail URL.
+ */
+export const getHDThumbnailUrl = (video) => {
+  if (video.youtube_id) {
+    return `https://img.youtube.com/vi/${video.youtube_id}/hqdefault.jpg`
+  }
+
+  return video.thumbnail
+}
+
 export const THUMBNAILS_SIZES = {
   MEDIUM: 'MEDIUM',
   LARGE: 'LARGE',

app/styles/_components/App/sidebar.sass

@@ -43,6 +43,8 @@ $border-color: lightgrey
 
   .menu-content
     padding: 9px
+    & .tag
+      margin: 0 5px
 
   .link-with-icon > i
     width: 20px
@@ -104,6 +106,8 @@ $border-color: lightgrey
           width: 100%
         &> span
           display: none
+        &> .tag
+          margin: 0 5px
 
   .connect-register-buttons
     margin-bottom: 5px