From 9fda9974f6ae4e350f169ca48d9cd24cd57e4afd Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Wed, 6 Nov 2024 16:42:59 +0100
Subject: [PATCH] feat: Change video visibility (#1325)

---
 app/components/StyledUtils/Title.jsx       |   8 +-
 app/components/UsersActions/ActionDiff.jsx |   5 +-
 app/components/Videos/EditVideoModal.jsx   | 134 +++++++++++++++------
 3 files changed, 109 insertions(+), 38 deletions(-)

diff --git a/app/components/StyledUtils/Title.jsx b/app/components/StyledUtils/Title.jsx
index 8c26acb90..fc130712a 100644
--- a/app/components/StyledUtils/Title.jsx
+++ b/app/components/StyledUtils/Title.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { fontSize, space, style, themeGet } from 'styled-system'
+import { fontSize, fontWeight, space, style, themeGet } from 'styled-system'
 
 export const textTransform = style({
   prop: 'textTransform',
@@ -11,6 +11,7 @@ export const StyledH1 = styled.h1`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
 
 export const StyledH2 = styled.h2`
@@ -19,6 +20,7 @@ export const StyledH2 = styled.h2`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
 
 export const StyledH3 = styled.h3`
@@ -27,6 +29,7 @@ export const StyledH3 = styled.h3`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
 
 export const StyledH4 = styled.h4`
@@ -35,6 +38,7 @@ export const StyledH4 = styled.h4`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
 
 export const StyledH5 = styled.h5`
@@ -43,6 +47,7 @@ export const StyledH5 = styled.h5`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
 
 export const StyledH6 = styled.h6`
@@ -51,4 +56,5 @@ export const StyledH6 = styled.h6`
   ${fontSize}
   ${space}
   ${textTransform}
+  ${fontWeight}
 `
diff --git a/app/components/UsersActions/ActionDiff.jsx b/app/components/UsersActions/ActionDiff.jsx
index cfa62450d..8fb36e56b 100644
--- a/app/components/UsersActions/ActionDiff.jsx
+++ b/app/components/UsersActions/ActionDiff.jsx
@@ -62,9 +62,12 @@ class ActionDiff extends PureComponent {
   formatChangeValue(value, key) {
     if (key === 'speaker_id' && value) {
       return <Link to={speakerURL(value)}>#{value}</Link>
-    } else if (key === 'is_draft' && !value) {
+    } else if (['is_draft', 'unlisted'].includes(key) && !value) {
       return 'No'
+    } else if (typeof value === 'boolean') {
+      return value ? 'Yes' : 'No'
     }
+
     return value
   }
 
diff --git a/app/components/Videos/EditVideoModal.jsx b/app/components/Videos/EditVideoModal.jsx
index 1ecb2a192..0f444f542 100644
--- a/app/components/Videos/EditVideoModal.jsx
+++ b/app/components/Videos/EditVideoModal.jsx
@@ -1,68 +1,130 @@
+import { Mutation } from '@apollo/client/react/components'
 import { Flex } from '@rebass/grid'
 import { Formik } from 'formik'
+import gql from 'graphql-tag'
 import React from 'react'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
+import Select from 'react-select'
 import { Edit } from 'styled-icons/fa-regular'
 
 import { flashErrorMsg, flashSuccessMsg } from '../../state/flashes/reducer'
 import { popModal } from '../../state/modals/reducer'
 import { shiftStatements } from '../../state/video_debate/effects'
 import FieldWithButton from '../FormUtils/FieldWithButton'
-import StyledLabel from '../FormUtils/StyledLabel'
 import Modal from '../Modal/Modal'
 import { StyledH3 } from '../StyledUtils/Title'
 
+const editVideoMutation = gql`
+  mutation editVideo($id: ID!, $unlisted: Boolean) {
+    editVideo(id: $id, unlisted: $unlisted) {
+      id
+      unlisted
+    }
+  }
+`
+
 class EditVideoModal extends React.PureComponent {
   renderTitle() {
     return (
-      <span>
+      <div className="is-flex gap-2">
         <Edit size="1em" /> {this.props.t('video.edit')}
-      </span>
+      </div>
     )
   }
 
   render() {
     const { t, popModal, video } = this.props
+    const unlistedOptions = [
+      { value: true, label: t('main:videos.unlisted') },
+      { value: false, label: t('main:videos.public') },
+    ]
 
     return (
       <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>
+          <StyledH3 mb={2} fontSize="15px" fontWeight="700">
+            Change visibility
+          </StyledH3>
+          <Mutation mutation={editVideoMutation}>
+            {(editVideo) => (
+              <Formik
+                initialValues={{ unlisted: video.unlisted }}
+                enableReinitialize
+                onSubmit={async (values) => {
+                  try {
+                    await editVideo({
+                      variables: { id: video.id, unlisted: values.unlisted },
+                    })
+                    this.props.flashSuccessMsg('Visibility changed')
+                    window.location.reload()
+                  } catch (e) {
+                    console.error(e) // eslint-disable-line no-console
+                    this.props.flashErrorMsg('Failed to change visibility')
+                  }
+                }}
+              >
+                {({ handleSubmit, isSubmitting, setFieldValue, values }) => (
+                  <form onSubmit={handleSubmit}>
+                    <Select
+                      className="speaker-select"
+                      placeholder="Select visibility"
+                      menuPortalTarget={document.body}
+                      styles={{ menuPortal: (base) => ({ ...base, zIndex: 99999 }) }}
+                      options={unlistedOptions}
+                      value={unlistedOptions.find((option) => option.value === values.unlisted)}
+                      name="unlisted"
+                      isLoading={isSubmitting}
+                      disabled={isSubmitting}
+                      onChange={({ value }) => {
+                        setFieldValue('unlisted', value)
+                        handleSubmit()
+                      }}
+                    />
+                  </form>
+                )}
+              </Formik>
             )}
-          </Formik>
+          </Mutation>
         </Flex>
+        {video['youtube_id'] && (
+          <React.Fragment>
+            <hr />
+            <Flex flexDirection="column">
+              <StyledH3 mb={2} fontSize="15px" fontWeight="700">
+                {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}>
+                    <FieldWithButton
+                      type="number"
+                      input={{
+                        name: 'youtube_offset',
+                        max: '10000000',
+                        value: values.youtube_offset,
+                        onChange: handleChange,
+                      }}
+                      meta={{ submitting: isSubmitting }}
+                      placeholder="+0s"
+                      buttonLabel="Shift"
+                      buttonClickHandler={handleSubmit}
+                    />
+                  </form>
+                )}
+              </Formik>
+            </Flex>
+          </React.Fragment>
+        )}
       </Modal>
     )
   }