Merge branch 'video-v2'

.github/workflows/init.yml

@@ -20,25 +20,25 @@ jobs:
         node-version: [20]
     steps:
       - name: Checkout code on HEAD
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ github.event_name != 'pull_request' }}
         with:
           ref: ${{ inputs.branch }}
 
       # Do this only for PR to production, since we need to work on main during later commit, and PR's work off of merge ref
       - name: Checkout code of PR HEAD
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
         with:
           ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Setup node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Archive production artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ${{ format('artifact-repo-{0}', github.run_id) }}
           retention-days: 1

apps/cms/admin/components/component-blocks.tsx

@@ -887,7 +887,7 @@ export const componentBlocks = {
         listKey: 'Slideshow',
         label: 'Select:',
         selection:
-          'key name slides { image {publicId} altText caption videoId order }',
+          'key name slides { image {publicId} altText caption video {file} order }',
       }),
     },
   }),

apps/cms/admin/components/fields-azure/src/views/file/index.tsx

@@ -86,6 +86,8 @@ export const controller = (config: FieldControllerConfig): FileController => {
       }`,
     defaultValue: { kind: 'empty' },
     deserialize(item) {
+      console.log(item, config);
+
       const value = item[config.path];
       if (!value) return { kind: 'empty' };
       return {

apps/cms/admin/components/video-field/index.ts

@@ -5,9 +5,10 @@ import {
   CommonFieldConfig,
 } from '@keystone-6/core/types';
 import { graphql } from '@keystone-6/core';
+import { GraphQLResolveInfo } from 'graphql';
 
 type VideoInput = {
-  file: string;
+  file: string | null;
   label: string;
   caption?: string;
   thumbUrl: string;
@@ -32,7 +33,9 @@ const VideoFieldInput = graphql.inputObject({
 const VideoFieldOutput = graphql.object<VideoOutput>()({
   name: 'VideoFieldOutput',
   fields: {
-    file: graphql.field({ type: graphql.String }),
+    file: graphql.field({
+      type: graphql.String,
+    }),
     label: graphql.field({
       type: graphql.String,
     }),
@@ -43,24 +46,21 @@ const VideoFieldOutput = graphql.object<VideoOutput>()({
 });
 
 export type VideoFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
-  CommonFieldConfig<ListTypeInfo> & VideoOutput;
+  CommonFieldConfig<ListTypeInfo>;
+
+const resolveInput = (val: VideoInput) => {
+  return {
+    file: val?.file || undefined,
+    label: val?.label || undefined,
+    caption: val?.caption || undefined,
+    thumbUrl: val?.thumbUrl || undefined,
+    thumbSmUrl: val?.thumbSmUrl || undefined,
+  };
+};
 
-export function video<ListTypeInfo extends BaseListTypeInfo>(
-  {
-    file,
-    label,
-    caption,
-    thumbUrl,
-    thumbSmUrl,
-    ...config
-  }: VideoFieldConfig<ListTypeInfo> = {
-    file: '',
-    label: '',
-    caption: '',
-    thumbUrl: '',
-    thumbSmUrl: '',
-  }
-): FieldTypeFunc<ListTypeInfo> {
+export function video<ListTypeInfo extends BaseListTypeInfo>({
+  ...config
+}: VideoFieldConfig<ListTypeInfo> = {}): FieldTypeFunc<ListTypeInfo> {
   return (meta) =>
     fieldType({
       kind: 'multi',
@@ -69,18 +69,14 @@ export function video<ListTypeInfo extends BaseListTypeInfo>(
           kind: 'scalar',
           scalar: 'String',
           mode: 'required',
-          default: {
-            kind: 'literal',
-            value: 'none',
-          },
         },
         label: {
           kind: 'scalar',
           scalar: 'String',
           mode: 'required',
           default: {
             kind: 'literal',
-            value: 'none',
+            value: '',
           },
         },
         caption: { kind: 'scalar', scalar: 'String', mode: 'optional' },
@@ -90,7 +86,7 @@ export function video<ListTypeInfo extends BaseListTypeInfo>(
           mode: 'required',
           default: {
             kind: 'literal',
-            value: 'none',
+            value: '',
           },
         },
         thumbSmUrl: {
@@ -99,7 +95,7 @@ export function video<ListTypeInfo extends BaseListTypeInfo>(
           mode: 'required',
           default: {
             kind: 'literal',
-            value: 'none',
+            value: '',
           },
         },
       },
@@ -110,23 +106,23 @@ export function video<ListTypeInfo extends BaseListTypeInfo>(
           arg: graphql.arg({ type: VideoFieldInput }),
           resolve(val) {
             return {
-              file: val?.file || '',
-              label: val?.label || '',
-              caption: val?.caption || '',
-              thumbUrl: val?.thumbUrl || '',
-              thumbSmUrl: val?.thumbSmUrl || '',
+              file: val?.file || undefined,
+              label: val?.label || undefined,
+              caption: val?.caption || undefined,
+              thumbUrl: val?.thumbUrl || undefined,
+              thumbSmUrl: val?.thumbSmUrl || undefined,
             };
           },
         },
         update: {
           arg: graphql.arg({ type: VideoFieldInput }),
           resolve(val) {
             return {
-              file: val?.file || '',
-              label: val?.label || '',
-              caption: val?.caption || '',
-              thumbUrl: val?.thumbUrl || '',
-              thumbSmUrl: val?.thumbSmUrl || '',
+              file: val?.file || undefined,
+              label: val?.label || undefined,
+              caption: val?.caption || undefined,
+              thumbUrl: val?.thumbUrl || undefined,
+              thumbSmUrl: val?.thumbSmUrl || undefined,
             };
           },
         },
@@ -154,9 +150,7 @@ export function video<ListTypeInfo extends BaseListTypeInfo>(
       views: './admin/components/video-field/views',
 
       getAdminMeta() {
-        return {
-          file: '',
-        };
+        return {};
       },
     });
 }

apps/cms/admin/components/video-field/views.tsx

@@ -18,6 +18,8 @@ import VideoSelector, { RelatedVideo } from '../video/selector';
 export function Field({
   field,
   value,
+
+  itemValue,
   onChange,
   autoFocus,
 }: FieldProps<typeof controller>) {
@@ -26,7 +28,8 @@ export function Field({
   return (
     <>
       <FieldContainer as="fieldset" className="flex flex-col p-2 max-w-[12rem]">
-        {value.file.length > 1 && (
+        <FieldLabel as="legend">{field.label}</FieldLabel>
+        {value.file && value.file.length > 5 && value.thumbSmUrl.length > 5 && (
           <>
             <img src={value.thumbSmUrl} width={75} height={75} />
             <p>{value.label}</p>
@@ -43,7 +46,7 @@ export function Field({
             VideoGridInstance.GetData();
           }}
         >
-          {value ? 'Change' : 'Select'} Video
+          {value && value.file ? 'Change' : 'Select'} Video
         </LoadingButton>
         {VideoGridInstance._useStore().error && (
           <p className="p-4 text-red font-bold block">Something went wrong.</p>
@@ -58,6 +61,7 @@ export function Field({
         open={VideoGridInstance.gridOpen}
         selectionChanged={(item: RelatedVideo) => {
           VideoGridInstance.setVideo(item);
+
           if (onChange)
             onChange({
               file: item.file,
@@ -109,16 +113,23 @@ export const controller = (
         thumbSmUrl
       }`,
     defaultValue: {
-      file: '',
+      file: 'nofile',
       caption: '',
       thumbUrl: '',
       thumbSmUrl: '',
       label: '',
     },
     deserialize: (data) => {
+      console.log('====', data[config.path]);
       const value = data[config.path];
+      if (!value || value.file.length < 5) return { kind: 'empty' };
+
       return value;
     },
-    serialize: (value) => ({ [config.path]: value }),
+    serialize: (value) => {
+      console.log('serialize', value);
+      if (value.file && value.file.length > 10) return { [config.path]: value };
+      return { file: '??' };
+    },
   };
 };

apps/cms/admin/schema/elab/lists/event.ts

@@ -72,12 +72,12 @@ const Event: Lists.Event = list({
       ui: {
         description: 'If defined, shows on event instead of thumbnail.',
         displayMode: 'cards',
-        cardFields: ['image', 'altText', 'caption', 'videoId', 'order'],
+        cardFields: ['image', 'altText', 'caption', 'video', 'order'],
         inlineCreate: {
-          fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+          fields: ['image', 'altText', 'caption', 'video', 'order'],
         },
         inlineEdit: {
-          fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+          fields: ['image', 'altText', 'caption', 'video', 'order'],
         },
       },
     }),

apps/cms/admin/schema/elab/lists/initiative.ts

@@ -11,7 +11,7 @@ import { cloudinaryImage } from '../../../components/cloudinary';
 import { Social } from '../social';
 import { video } from '../../../components/video-field';
 import { azureStorageFile } from '../../../components/fields-azure/src';
-import { azConfig, azConfigCustom } from '../../azure';
+import { azConfigCustom } from '../../azure';
 
 const Initiative: Lists.Initiative = list({
   access: allowAll,
@@ -32,14 +32,12 @@ const Initiative: Lists.Initiative = list({
     ...group({
       label: 'Intro Video/Slideshow',
       fields: {
-        introVideo: video(),
+        introVideo: video({ label: 'Intro Video' }),
         captions: azureStorageFile({
           azureStorageConfig: azConfigCustom('captions'),
           label: 'Captions File',
-          ui: { description: 'Optional' },
         }),
-
-        videoId: text({
+        video: text({
           label: 'Intro Video ID',
           ui: {
             description:
@@ -65,12 +63,12 @@ const Initiative: Lists.Initiative = list({
             description:
               'A slide can be either an image or video. If you define both, only the image will display. ',
             displayMode: 'cards',
-            cardFields: ['image', 'altText', 'caption', 'videoId', 'order'],
+            cardFields: ['image', 'altText', 'caption', 'video', 'order'],
             inlineCreate: {
-              fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+              fields: ['image', 'altText', 'caption', 'video', 'order'],
             },
             inlineEdit: {
-              fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+              fields: ['image', 'altText', 'caption', 'video', 'order'],
             },
           },
         }),

apps/cms/admin/schema/elab/lists/newsItem.ts

@@ -74,12 +74,12 @@ const NewsItem: Lists.NewsItem = list({
       ui: {
         description: 'If defined, shows on news item instead of thumbnail.',
         displayMode: 'cards',
-        cardFields: ['image', 'altText', 'caption', 'videoId', 'order'],
+        cardFields: ['image', 'altText', 'caption', 'video', 'order'],
         inlineCreate: {
-          fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+          fields: ['image', 'altText', 'caption', 'video', 'order'],
         },
         inlineEdit: {
-          fields: ['image', 'altText', 'caption', 'videoId', 'order'],
+          fields: ['image', 'altText', 'caption', 'video', 'order'],
         },
       },
     }),

apps/cms/admin/schema/elab/lists/slide.ts

@@ -6,6 +6,9 @@ import { Lists } from '.keystone/types';
 
 import { cloudinaryImage } from '../../../components/cloudinary';
 import { helper, HelperIcon } from '../../../components/helper';
+import { azureStorageFile } from '../../../components/fields-azure/src';
+import { video } from '../../../components/video-field';
+import { azConfigCustom } from '../../azure';
 
 const Slide: Lists.Slide = list({
   access: allowAll,
@@ -57,12 +60,19 @@ const Slide: Lists.Slide = list({
           'This is optional and different from the description of the image.',
       },
     }),
+
+    video: video(),
     videoId: text({
       label: 'Vimeo ID',
       ui: {
         description: 'Use the image field to specify thumbnail.',
       },
     }),
+
+    captions: azureStorageFile({
+      azureStorageConfig: azConfigCustom('captions'),
+      label: 'Video Captions File',
+    }),
     order: integer({
       defaultValue: 0,
     }),

apps/cms/admin/schema/elab/lists/studioProject.ts

@@ -19,6 +19,9 @@ import { PartnersSelect } from './partners';
 import { Featuring } from '../featuring';
 import { Social } from '../social';
 import { Status } from '../flags';
+import { azureStorageFile } from '../../../components/fields-azure/src';
+import { video } from '../../../components/video-field';
+import { azConfigCustom } from '../../azure';
 
 const StudioProject: Lists.StudioProject = list({
   access: allowAll,
@@ -110,10 +113,19 @@ const StudioProject: Lists.StudioProject = list({
               'Vimeo video ID, if applicable. If specified, "Watch the film" button will appear on page',
           },
         }),
+        video: video({ label: 'Video' }),
+        captions: azureStorageFile({
+          azureStorageConfig: azConfigCustom('captions'),
+          label: 'Video Captions File',
+        }),
         trailerId: text({
           label: 'Trailer video ID',
           ui: { description: 'Vimeo video ID for trailer, if applicable.' },
         }),
+        trailerVideo: video({ label: 'Trailer' }),
+        trailerCaptions: azureStorageFile({
+          azureStorageConfig: azConfigCustom('captions'),
+        }),
         trailerThumbnail: cloudinaryImage({
           cloudinary: {
             cloudName: `${process.env.CLOUDINARY_CLOUD_NAME}`,