feat: minimized screen recorder (#9619)

Signed-off-by: Alexander Onnikov <[email protected]>

Author: aonnikov

models/recorder/src/migration.ts

@@ -1,5 +1,5 @@
 //
-// Copyright © 2024 Hardcore Engineering Inc.
+// Copyright © 2025 Hardcore Engineering Inc.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -13,9 +13,37 @@
 // limitations under the License.
 //
 
-import type { MigrateOperation, MigrationClient, MigrationUpgradeClient } from '@hcengineering/model'
+import drive from '@hcengineering/drive'
+import {
+  type MigrateOperation,
+  type MigrationClient,
+  type MigrationUpgradeClient,
+  createDefaultSpace,
+  tryUpgrade
+} from '@hcengineering/model'
+import { recorderId } from '@hcengineering/recorder'
+import recorder from './plugin'
 
 export const recorderOperation: MigrateOperation = {
   async migrate (client: MigrationClient, mode): Promise<void> {},
-  async upgrade (state: Map<string, Set<string>>, client: () => Promise<MigrationUpgradeClient>): Promise<void> {}
+  async upgrade (state: Map<string, Set<string>>, client: () => Promise<MigrationUpgradeClient>, mode): Promise<void> {
+    await tryUpgrade(mode, state, client, recorderId, [
+      {
+        state: 'create-recorder-drive',
+        func: async (client) => {
+          await createDefaultSpace(
+            client,
+            recorder.space.Drive,
+            {
+              name: 'Screen Recordings',
+              description: 'Screen recordings',
+              type: drive.spaceType.DefaultDrive,
+              autoJoin: true
+            },
+            drive.class.Drive
+          )
+        }
+      }
+    ])
+  }
 }

packages/presentation/src/components/FilePreview.svelte

@@ -30,7 +30,7 @@
   import { imageSizeToRatio } from '../image'
   import { FilePreviewExtension } from '../types'
 
-  export let file: Ref<Blob>
+  export let file: Ref<Blob> | string
   export let name: string
   export let contentType: string
   export let metadata: BlobMetadata | undefined

packages/ui/src/components/SplitButton.svelte

@@ -73,7 +73,7 @@
     >
       {#if icon || $$slots.icon}
         <div class="btn-icon pointer-events-none">
-          {#if icon}<Icon bind:icon size={iconSize} {iconProps} />{/if}
+          {#if icon}<Icon {icon} size={iconSize} {iconProps} />{/if}
           {#if $$slots.icon}<slot name="icon" />{/if}
         </div>
       {/if}
@@ -95,7 +95,7 @@
     >
       {#if secondIcon || $$slots.secondIcon}
         <div class="btn-icon pointer-events-none">
-          {#if secondIcon}<Icon bind:icon={secondIcon} size={secondIconSize} iconProps={secondIconProps} />{/if}
+          {#if secondIcon}<Icon icon={secondIcon} size={secondIconSize} iconProps={secondIconProps} />{/if}
           {#if $$slots.secondIcon}<slot name="secondIcon" />{/if}
         </div>
       {/if}

packages/ui/src/popups.ts

@@ -104,6 +104,7 @@ export function showPopup (
       const pos = popups.findIndex((p) => (p as CompAndProps).id === id && p.type === 'popup')
       if (pos !== -1) {
         popups.splice(pos, 1)
+        void onClose?.(undefined)
       }
       return popups
     })

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -58,6 +58,7 @@
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
   export let _class: Ref<Class<Doc>>
+  export let docId: Ref<Doc> | undefined = undefined
   export let docClass: Ref<Class<Doc>> | undefined = undefined
   export let content: Markup = EmptyMarkup
   export let iconSend: Asset | AnySvelteComponent | undefined = undefined
@@ -434,6 +435,7 @@
 
   async function onFileUploaded ({ uuid, name, file, metadata }: FileUploadCallbackParams): Promise<void> {
     try {
+      await updateAttachments(objectId)
       await _createAttachment(uuid, name, file, metadata)
     } catch (err: any) {
       void setPlatformStatus(unknownError(err))
@@ -442,25 +444,20 @@
 
   async function uploadWith (uploader: UploadHandlerDefinition): Promise<void> {
     const upload = await getResource(uploader.handler)
-    await upload({ onFileUploaded })
+    const target = { objectId: docId ?? objectId, objectClass: docClass ?? _class }
+    await upload({ onFileUploaded, target })
   }
 
-  let uploadActions: RefAction[] = []
-  $: void getUploadHandlers({ category: 'media' }).then((handlers) => {
-    let index = 1000
-    const actions: RefAction[] = []
-    for (const handler of handlers) {
-      actions.push({
-        order: handler.order ?? index++,
-        label: handler.label,
-        icon: handler.icon,
-        action: () => {
-          void uploadWith(handler)
-        }
-      })
+  let uploadActionIndex = 1000
+  const uploadHandlers = getUploadHandlers(client, { category: 'media' })
+  const uploadActions: RefAction[] = uploadHandlers.map((handler) => ({
+    order: handler.order ?? uploadActionIndex++,
+    label: handler.label,
+    icon: handler.icon,
+    action: () => {
+      void uploadWith(handler)
     }
-    uploadActions = actions
-  })
+  }))
 </script>
 
 <div class="flex-col no-print" bind:this={refContainer}>

plugins/attachment-resources/src/components/AttachmentStyleBoxCollabEditor.svelte

@@ -36,7 +36,12 @@
     getModelRefActions
   } from '@hcengineering/text-editor-resources'
   import { AnySvelteComponent, getEventPositionElement, getPopupPositionElement } from '@hcengineering/ui'
-  import { uploadFiles, type FileUploadCallbackParams } from '@hcengineering/uploader'
+  import {
+    getUploadHandlers,
+    uploadFiles,
+    UploadHandlerDefinition,
+    type FileUploadCallbackParams
+  } from '@hcengineering/uploader'
   import { getCollaborationUser, getObjectId } from '@hcengineering/view-resources'
 
   import AttachmentsGrid from './AttachmentsGrid.svelte'
@@ -66,6 +71,7 @@
   let refActions: RefAction[] = []
   let extraActions: RefAction[] = []
   let modelRefActions: RefAction[] = []
+  let uploadActions: RefAction[] = []
 
   $: if (enableAttachments && !readonly) {
     extraActions = [
@@ -79,7 +85,7 @@
         label: textEditor.string.Table,
         icon: TableIcon,
         action: handleTable,
-        order: 1501
+        order: 1500
       }
     ]
   } else {
@@ -89,11 +95,30 @@
   void getModelRefActions().then((actions) => {
     modelRefActions = actions
   })
+
+  async function uploadWith (uploader: UploadHandlerDefinition): Promise<void> {
+    const upload = await getResource(uploader.handler)
+    const target = { objectId: object._id, objectClass: object._class }
+    await upload({ onFileUploaded, target })
+  }
+
+  let uploadActionIndex = 1000
+  const uploadHandlers = getUploadHandlers(client, { category: 'media' })
+  uploadActions = uploadHandlers.map((handler) => ({
+    order: handler.order ?? uploadActionIndex++,
+    label: handler.label,
+    icon: handler.icon,
+    action: () => {
+      void uploadWith(handler)
+    }
+  }))
+
   $: refActions = readonly
     ? []
     : defaultRefActions
       .concat(extraActions)
       .concat(modelRefActions)
+      .concat(uploadActions)
       .sort((a, b) => a.order - b.order)
 
   let progress = false

plugins/attachment-resources/src/components/Attachments.svelte

@@ -70,11 +70,11 @@
 
     loading++
     try {
+      const target = { objectId, objectClass: object?._class ?? _class }
       const options = {
+        target,
         onFileUploaded,
-        showProgress: {
-          target: { objectId, objectClass: object?._class ?? _class }
-        }
+        showProgress: { target }
       }
       await uploadFiles(list, options)
     } finally {

plugins/chunter-resources/src/components/chat-message/ChatMessageInput.svelte

@@ -230,6 +230,7 @@
   {focusIndex}
   bind:this={inputRef}
   bind:content={inputContent}
+  docId={object._id}
   docClass={object._class}
   {_class}
   space={getChannelSpace(object._class, object._id, object.space)}

plugins/communication-resources/package.json

@@ -64,6 +64,7 @@
     "@hcengineering/text-editor-resources": "^0.6.0",
     "@hcengineering/text-markdown": "^0.6.0",
     "@hcengineering/ui": "^0.6.15",
+    "@hcengineering/uploader": "^0.6.0",
     "@hcengineering/view": "^0.6.13",
     "@hcengineering/view-resources": "^0.6.0",
     "@tiptap/core": "^2.11.7",

plugins/communication-resources/src/components/message/MessageInput.svelte

@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import { generateId, Markup, RateLimiter, Ref } from '@hcengineering/core'
+  import { Markup, RateLimiter, Ref, generateId } from '@hcengineering/core'
   import { tick, createEventDispatcher } from 'svelte'
   import {
     uploadFile,
@@ -37,6 +37,7 @@
   import { AttachmentPresenter, LinkPreviewCard } from '@hcengineering/attachment-resources'
   import { areEqualMarkups, isEmptyMarkup } from '@hcengineering/text'
   import { updateMyPresence } from '@hcengineering/presence-resources'
+  import { FileUploadCallbackParams, getUploadHandlers, UploadHandlerDefinition } from '@hcengineering/uploader'
   import { Component, showPopup, ThrottledCaller } from '@hcengineering/ui'
   import { getCurrentEmployee } from '@hcengineering/contact'
   import { Card } from '@hcengineering/card'
@@ -306,18 +307,17 @@
     const uuid = await uploadFile(file)
     const metadata = await getFileMetadata(file, uuid)
 
+    const blob = {
+      blobId: uuid,
+      mimeType: file.type,
+      fileName: file.name,
+      size: file.size,
+      metadata
+    }
+
     draft = {
       ...draft,
-      blobs: [
-        ...draft.blobs,
-        {
-          blobId: uuid,
-          mimeType: file.type,
-          fileName: file.name,
-          size: file.size,
-          metadata
-        }
-      ]
+      blobs: [...draft.blobs, blob]
     }
   }
 
@@ -509,6 +509,51 @@
       order: 99999
     }
   })
+
+  async function uploadWith (uploader: UploadHandlerDefinition): Promise<void> {
+    const cardId = card._id
+
+    const onFileUploaded = async ({ uuid, name, file, size, metadata }: FileUploadCallbackParams): Promise<void> => {
+      const blob = {
+        blobId: uuid,
+        mimeType: file.type,
+        fileName: name,
+        size: size ?? file.size,
+        metadata
+      }
+
+      // We are probably in different card, update the draft in storage
+      let newDraft = getDraft(cardId)
+      newDraft = {
+        ...newDraft,
+        blobs: [...newDraft.blobs, blob]
+      }
+      saveDraft(cardId, newDraft, true)
+
+      // In case we are in the same card, update the draft in memory
+      if (cardId === card._id) {
+        draft = {
+          ...draft,
+          blobs: [...draft.blobs, blob]
+        }
+      }
+    }
+
+    const upload = await getResource(uploader.handler)
+    const target = { objectId: card._id, objectClass: card._class }
+    await upload({ onFileUploaded, target })
+  }
+
+  let uploadActionIndex = 1000
+  const uploadHandlers = getUploadHandlers(client, { category: 'media' })
+  const uploadActions = uploadHandlers.map((handler) => ({
+    order: handler.order ?? uploadActionIndex++,
+    label: handler.label,
+    icon: handler.icon,
+    action: () => {
+      void uploadWith(handler)
+    }
+  }))
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -536,7 +581,7 @@
     placeholderParams={title !== '' ? { title } : undefined}
     loading={progress}
     hasChanges={hasChanges(draft.blobs, message, draft.applets)}
-    actions={[...defaultMessageInputActions, attachAction, ...appletActions]}
+    actions={[...defaultMessageInputActions, attachAction, ...uploadActions, ...appletActions]}
     on:submit={handleSubmit}
     on:update={onUpdate}
     onCancel={onCancel ? handleCancel : undefined}