Add ability to specify if a talk should be recorded (#4510)

Author: marcoacierno

frontend/src/components/cfp-form/cfp-form.graphql

@@ -22,6 +22,7 @@ query CfpForm($conference: String!) {
     submissionTypes {
       id
       name
+      isRecordable
     }
 
     languages {

frontend/src/components/cfp-form/index.tsx

@@ -72,6 +72,7 @@ export type CfpFormFields = ParticipantFormFields & {
   acceptedPrivacyPolicy: boolean;
   speakerAvailabilities: { [time: number]: null | string };
   materials: any[];
+  doNotRecord: boolean;
 };
 
 export type SubmissionStructure = {
@@ -100,6 +101,7 @@ export type SubmissionStructure = {
     fileUrl: string;
     fileMimeType: string;
   }[];
+  doNotRecord: boolean;
 };
 
 type Props = {
@@ -208,6 +210,7 @@ export const CfpForm = ({
       acceptedPrivacyPolicy: formState.values.acceptedPrivacyPolicy,
       speakerAvailabilities: formState.values.speakerAvailabilities,
       materials: formState.values.materials,
+      doNotRecord: formState.values.doNotRecord,
     });
   };
 
@@ -268,6 +271,7 @@ export const CfpForm = ({
           name: material.name,
         })),
       );
+      formState.setField("doNotRecord", submission!.doNotRecord);
     }
 
     if (participantData.me.participant) {

frontend/src/components/cfp-form/proposal-section.tsx

@@ -26,6 +26,10 @@ export const ProposalSection = ({
 }) => {
   const inputPlaceholder = useTranslatedMessage("input.placeholder");
   const { radio, raw, select, textarea, checkbox } = formOptions;
+  const selectedType = conferenceData!.conference.submissionTypes.find(
+    (type) => type.id === formState.values.type,
+  );
+  const isRecordable = selectedType?.isRecordable;
 
   return (
     <MultiplePartsCard>
@@ -232,6 +236,27 @@ export const ProposalSection = ({
               placeholder={inputPlaceholder}
             />
           </InputWrapper>
+
+          {isRecordable && (
+            <InputWrapper
+              required={false}
+              title={<FormattedMessage id="cfp.doNotRecordLabel" />}
+              description={<FormattedMessage id="cfp.doNotRecordDescription" />}
+            >
+              <label>
+                <HorizontalStack gap="small" alignItems="center">
+                  <Checkbox
+                    {...checkbox("doNotRecord")}
+                    required={false}
+                    errors={getErrors("validationDoNotRecord")}
+                  />
+                  <Text size={2} weight="strong">
+                    <FormattedMessage id="cfp.doNotRecordCheckboxLabel" />
+                  </Text>
+                </HorizontalStack>
+              </label>
+            </InputWrapper>
+          )}
         </Grid>
       </CardPart>
     </MultiplePartsCard>

frontend/src/components/cfp-send-submission/index.tsx

@@ -76,6 +76,7 @@ export const CfpSendSubmission = () => {
           speakerFacebookUrl: input.participantFacebookUrl,
           speakerMastodonHandle: input.participantMastodonHandle,
           speakerAvailabilities: input.speakerAvailabilities,
+          doNotRecord: input.doNotRecord,
         },
         language,
       },

frontend/src/locale/index.ts

@@ -577,6 +577,12 @@ Click the box to change. If left empty, we will assume you are available.`,
 
     "tickets.productsList.tshirtTitle": "T-shirt",
 
+    "cfp.doNotRecordLabel": "Do not record",
+    "cfp.doNotRecordDescription":
+      "By default we record all talks and later upload them to our YouTube channel. If you don't want your talk to be recorded, please check this box. Note: Your talk will still be live streamed.",
+    "cfp.doNotRecordCheckboxLabel":
+      "I confirm that I do not want my talk to be recorded. I understand that it will not be uploaded to Python Italia’s YouTube channel and that it will not be possible to recover it in the future.",
+
     "tickets.checkout.answerCardAdmissionTitle": "{attendeeName}'s ticket",
     "tickets.checkout.openAnswerCard": "Attendee Info",
     "tickets.checkout.billing": "Billing",
@@ -2314,6 +2320,12 @@ Clicca sulla casella per cambiare. Se lasciato vuoto, presumeremo che tu sia dis
     "cfp.materials.add": "Aggiungi",
     "cfp.materials.remove": "X",
     "fileInput.currentFile": "File attuale: {name}",
+
+    "cfp.doNotRecordLabel": "Non registrare",
+    "cfp.doNotRecordDescription":
+      "Di norma registriamo tutti i talk e li pubblichiamo successivamente sul nostro canale YouTube. Se non desideri che il tuo intervento venga registrato, seleziona questa opzione. Nota: il talk sarà comunque trasmesso in streaming.",
+    "cfp.doNotRecordCheckboxLabel":
+      "Confermo di non voler che il mio talk venga registrato. Comprendo che non verrà caricato sul canale YouTube di Python Italia e che non sarà possibile recuperarlo in futuro.",
   },
 };
 

frontend/src/pages/submission/[id]/edit/get-submission.graphql

@@ -6,6 +6,7 @@ query GetSubmission($id: ID!, $language: String!) {
     abstract(language: $language)
     elevatorPitch(language: $language)
     shortSocialSummary
+    doNotRecord
     multilingualTitle {
       it
       en

frontend/src/pages/submission/[id]/edit/index.tsx

@@ -76,6 +76,7 @@ export const EditSubmissionPage = () => {
               url: material.url,
               fileId: material.fileId,
             })),
+          doNotRecord: input.doNotRecord,
         },
         language,
       },