Merge pull request #396 from AVAnnotate/develop

Publish to main

Author: lwjameson

src/apps/EventDetail/AnnotationTableHeader.tsx

@@ -53,14 +53,14 @@ export const AnnotationTableHeader: React.FC<Props> = (props) => {
                   className='dropdown-item'
                   onClick={() => props.setShowAnnoCreateModal(true)}
                 >
-                  <FileEarmarkArrowUp />
-                  {t['Add']}
+                  <Plus color='black' />
+                  {t['Create']}
                 </Dropdown.Item>
                 <Dropdown.Item className='dropdown-item'>
                   <a
                     href={`/${lang}/projects/${props.projectSlug}/events/${props.eventUuid}/import`}
                   >
-                    <Plus color='black' />
+                    <FileEarmarkArrowUp />
                     {t['Import']}
                   </a>
                 </Dropdown.Item>

src/components/DropdownButton/DropdownButton.tsx

@@ -23,7 +23,11 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
 
   return (
     <>
-      <Dropdown.Root modal={false} open={open}>
+      <Dropdown.Root
+        modal={false}
+        open={open}
+        onOpenChange={(isOpen) => (isOpen ? {} : setOpen(false))}
+      >
         <Dropdown.Trigger asChild>
           <Button
             className='dropdown-button primary'

src/components/EventList/EventList.tsx

@@ -204,7 +204,7 @@ export const EventList: React.FC<Props> = (props) => {
               items={[
                 {
                   icon: <PlusIcon />,
-                  label: t['Add single event'],
+                  label: t['Create'],
                   onClick: () =>
                     (window.location.href = `/${props.i18n.lang}/projects/${props.projectSlug}/events/new`),
                 },

src/components/Formic/SlateInput/FormattingComponents.tsx

@@ -7,6 +7,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import type { AVAEditor, ImageData, ImageSize } from '@ty/slate.ts';
 import type { Translations } from '@ty/Types.ts';
 import { ToolbarTooltip } from './ToolbarTooltip.tsx';
+import { Editor } from 'slate';
 
 export const HighlightColorButton = (props: SlateButtonProps) => {
   const editor = useSlate();
@@ -83,9 +84,13 @@ export const LinkButton = (props: LinkDialogProps) => {
 
   const submit = () => {
     props.onSubmit(url);
+    setUrl('');
     setOpen(false);
   };
 
+  // @ts-expect-error
+  const isActive = Editor.marks(editor)?.link;
+
   return (
     <Dialog.Root open={open}>
       <Dialog.Trigger asChild>
@@ -95,10 +100,16 @@ export const LinkButton = (props: LinkDialogProps) => {
         >
           <Button
             className={`link-button unstyled ${
-              highlightedText ? '' : 'disabled-link-button'
+              isActive ? 'activated-link-button' : ''
             }`}
-            disabled={!highlightedText}
-            onClick={() => setOpen(true)}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              if (isActive) {
+                Editor.removeMark(editor, 'link');
+              } else {
+                setOpen(true);
+              }
+            }}
             type='button'
           >
             <props.icon />
@@ -132,7 +143,10 @@ export const LinkButton = (props: LinkDialogProps) => {
           <Dialog.Close asChild>
             <Button
               className='unstyled'
-              onClick={() => setOpen(false)}
+              onClick={() => {
+                setUrl('');
+                setOpen(false);
+              }}
               role='button'
             >
               {t['cancel']}

src/components/Formic/SlateInput/SlateInput.css

@@ -165,8 +165,8 @@
   border-radius: 4px;
 }
 
-.slate-form .disabled-link-button svg {
-  color: var(--gray-500);
+.slate-form .activated-link-button svg {
+  color: var(--primary);
 }
 
 .slate-form .disabled svg {
@@ -269,4 +269,4 @@
   font-size: 16px;
   font-weight: normal;
   line-height: 150%;
-}
+}

src/components/InsertEventButton/FormElements.tsx

@@ -189,6 +189,12 @@ interface EventSelectProps {
 }
 
 export const EventSelect: React.FC<EventSelectProps> = (props) => {
+  const sortedEvents = Object.keys(props.project.events)
+    .map((uuid) => {
+      const event = props.project.events[uuid];
+      return { uuid, label: event.label };
+    })
+    .sort((a, b) => a.label.localeCompare(b.label));
   return (
     <label className='slate-event-select'>
       {props.label}
@@ -205,11 +211,15 @@ export const EventSelect: React.FC<EventSelectProps> = (props) => {
         <Select.Content className='select-content' position='popper'>
           <Select.Viewport className='select-viewport'>
             {/* @ts-ignore */}
-            {Object.keys(props.project.events).map((uuid) => (
-              <Select.Item className='select-item' key={uuid} value={uuid}>
+            {sortedEvents.map((ev) => (
+              <Select.Item
+                className='select-item'
+                key={ev.uuid}
+                value={ev.uuid}
+              >
                 <Select.ItemText>
                   {/* @ts-ignore */}
-                  {props.project.events[uuid].label}
+                  {ev.label}
                 </Select.ItemText>
                 <Select.ItemIndicator />
               </Select.Item>

src/components/InsertEventButton/SingleEventModal.tsx

@@ -1,6 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import type { Includes, SlateEventNodeData } from '../../types/slate.ts';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   ClipInterface,
   DurationInterface,
@@ -38,7 +38,6 @@ export const SingleEventModal: React.FC<SingleEventModalProps> = (props) => {
     props.start || props.end ? 'clip' : 'full'
   );
   const [file, setFile] = useState(props.file || undefined);
-  const [type, setType] = useState<'Audio' | 'Video' | undefined>();
   const [includes, setIncludes] = useState<Includes[]>(
     props.includes || ['media', 'annotations', 'label', 'description']
   );
@@ -53,16 +52,6 @@ export const SingleEventModal: React.FC<SingleEventModalProps> = (props) => {
     }
   }, [eventUuid]);
 
-  useEffect(() => {
-    if (file && eventUuid) {
-      const type =
-        props.project.events[eventUuid as string].audiovisual_files[file]
-          .file_type;
-
-      setType(type);
-    }
-  }, [file, eventUuid]);
-
   const { t } = props.i18n;
 
   return (
@@ -137,7 +126,6 @@ export const SingleEventModal: React.FC<SingleEventModalProps> = (props) => {
                   start,
                   end,
                   file,
-                  type,
                 })
               }
             >

src/components/PageList/PageList.tsx

@@ -38,18 +38,20 @@ export const PageList: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (pageOrder) {
-      let state: RowState = {};
+      let state: RowState = { ...rowState };
 
       const orderArray = makePageArray(project, pageOrder);
 
       orderArray.forEach((entry, idx) => {
-        state[entry.id] = {
-          uuid: entry.id,
-          expanded: true,
-          parent: entry.parent,
-          visible: true,
-          hasChildren: entry.children.length > 0,
-        };
+        if (!state[entry.id]) {
+          state[entry.id] = {
+            uuid: entry.id,
+            expanded: true,
+            parent: entry.parent,
+            visible: true,
+            hasChildren: entry.children.length > 0,
+          };
+        }
 
         // Now determine how we can move this item
         state[entry.id].canGoDown = false;
@@ -114,36 +116,47 @@ export const PageList: React.FC<Props> = (props) => {
     //If there is no content in the page, pre-populate with an embed of the related event, for convenience
     if (!page.content || !page.content.length) {
       const eventUuid = page.autogenerate.type_id;
-      if (eventUuid) {
-        page.content = [
-          {
-            type: 'paragraph',
-            children: [
+      if (eventUuid || page.autogenerate.type === 'home') {
+        page.autogenerate.type === 'home'
+          ? (page.content = [
               {
-                text: '',
+                type: 'paragraph',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
               },
-            ],
-          },
-          {
-            //@ts-ignore
-            type: 'event',
-            uuid: eventUuid,
-            includes: ['media', 'annotations', 'description'],
-            children: [
+            ])
+          : (page.content = [
               {
-                text: '',
+                type: 'paragraph',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
               },
-            ],
-          },
-          {
-            type: 'paragraph',
-            children: [
               {
-                text: '',
+                //@ts-ignore
+                type: 'event',
+                uuid: eventUuid,
+                includes: ['media', 'annotations', 'description'],
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
               },
-            ],
-          },
-        ];
+              {
+                type: 'paragraph',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+              },
+            ]);
       }
     }
     setSaving(true);

src/components/PageList/PageRow.tsx

@@ -131,7 +131,7 @@ export const PageRow: React.FC<Props> = (props) => {
         icon: ListNested,
         // @ts-ignore
         onClick: () => {},
-        children: childPages,
+        children: childPages.sort((a, b) => a.label.localeCompare(b.label)),
       });
     }
 

src/components/ProjectForm/NewProjectForm.tsx

@@ -48,7 +48,7 @@ const FormContents = (props: NewProjectFormProps) => {
     creator: '',
     authors: '',
     media_player: 'avannotate',
-    auto_populate_home_page: false,
+    auto_populate_home_page: true,
     additional_users: [],
     tags: {
       tagGroups: [],