sanity-plugin-mux-input 2.4.1 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -41,8 +41,7 @@
   ],
   "scripts": {
     "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "clean": "rimraf lib",
-    "dev": "plugin-kit link-watch --strict",
+    "dev": "sanity dev",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
@@ -71,39 +70,36 @@
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@sanity/client": "^6.24.1",
-    "@sanity/pkg-utils": "^6.12.1",
+    "@sanity/client": "^6.28.1",
+    "@sanity/pkg-utils": "^6.13.4",
     "@sanity/plugin-kit": "4.0.19",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/vision": "^3.68.1",
-    "@types/lodash": "^4.17.13",
-    "@types/react": "^18.3.17",
+    "@sanity/vision": "^3.77.2",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.3.18",
     "@types/react-is": "^18.3.1",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-config-sanity": "^7.1.3",
+    "eslint-config-sanity": "^7.1.4",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.4.2",
-    "prettier-plugin-packagejson": "^2.5.6",
+    "prettier": "^3.5.2",
+    "prettier-plugin-packagejson": "^2.5.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sanity": "^3.68.1",
-    "semantic-release": "^24.2.0",
-    "styled-components": "^6.1.13",
-    "typescript": "^5.7.2",
-    "yalc": "1.0.0-pre.53"
+    "sanity": "^3.77.2",
+    "semantic-release": "^24.2.3",
+    "styled-components": "^6.1.15",
+    "typescript": "5.7.3"
   },
   "peerDependencies": {
     "react": "^18",

package/src/actions/secrets.ts

@@ -32,15 +32,25 @@ export function saveSecrets(
   return client.createOrReplace(doc)
 }
 
-export function createSigningKeys(client: SanityClient) {
-  const {dataset} = client.config()
-  return client.request<{
-    data: {private_key: string; id: string; created_at: string}
-  }>({
-    url: `/addons/mux/signing-keys/${dataset}`,
-    withCredentials: true,
-    method: 'POST',
-  })
+export async function createSigningKeys(client: SanityClient) {
+  try {
+    const {dataset} = client.config()
+    const res = await client.request<{
+      data: {private_key: string; id: string; created_at: string}
+    }>({
+      url: `/addons/mux/signing-keys/${dataset}`,
+      withCredentials: true,
+      method: 'POST',
+    })
+    return res
+  } catch (error: any) {
+    console.error('Error creating signing keys', error)
+    const message =
+      error.response?.statusCode === 401
+        ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions'
+        : error.message
+    throw new Error(message)
+  }
 }
 
 export function testSecrets(client: SanityClient) {

package/src/components/ConfigureApi.tsx

@@ -139,6 +139,8 @@ function ConfigureApi({secrets, setDialogState}: Props) {
                     The access token needs permissions: <strong>Mux Video </strong>
                     (Full Access) and <strong>Mux Data</strong> (Read)
                     <br />
+                    To use Signed URLs, the token must also have System permissions.
+                    <br />
                     The credentials will be stored safely in a hidden document only available to
                     editors.
                   </Text>

package/src/components/EditThumbnailDialog.tsx

@@ -0,0 +1,122 @@
+import {Button, Dialog, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import React, {useId, useMemo, useState} from 'react'
+import {getDevicePixelRatio} from 'use-device-pixel-ratio'
+
+import {useDialogStateContext} from '../context/DialogStateContext'
+import {useClient} from '../hooks/useClient'
+import {
+  formatSecondsToHHMMSS,
+  getSecondsFromTimeFormat,
+  isValidTimeFormat,
+} from '../util/formatSeconds'
+import type {VideoAssetDocument} from '../util/types'
+import VideoThumbnail from './VideoThumbnail'
+
+export interface Props {
+  asset: VideoAssetDocument
+  currentTime?: number
+}
+
+export default function EditThumbnailDialog({asset, currentTime = 0}: Props) {
+  const client = useClient()
+
+  const {setDialogState} = useDialogStateContext()
+  const dialogId = `EditThumbnailDialog${useId()}`
+
+  const [timeFormatted, setTimeFormatted] = useState<string>(() =>
+    formatSecondsToHHMMSS(currentTime)
+  )
+  const [nextTime, setNextTime] = useState<number>(currentTime)
+  const [inputError, setInputError] = useState<string>('')
+
+  const assetWithNewThumbnail = useMemo(() => ({...asset, thumbTime: nextTime}), [asset, nextTime])
+  const [saving, setSaving] = useState(false)
+  const [saveThumbnailError, setSaveThumbnailError] = useState<Error | null>(null)
+  const handleSave = () => {
+    setSaving(true)
+    client
+      .patch(asset._id!)
+      .set({thumbTime: nextTime})
+      .commit({returnDocuments: false})
+      .then(() => void setDialogState(false))
+      .catch(setSaveThumbnailError)
+      .finally(() => void setSaving(false))
+  }
+  const width = 300 * getDevicePixelRatio({maxDpr: 2})
+
+  if (saveThumbnailError) {
+    // eslint-disable-next-line no-warning-comments
+    // @TODO handle errors more gracefully
+    throw saveThumbnailError
+  }
+
+  const handleInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.value
+    setTimeFormatted(value)
+
+    if (isValidTimeFormat(value)) {
+      setInputError('')
+      const totalSeconds = getSecondsFromTimeFormat(value)
+      setNextTime(totalSeconds)
+    } else {
+      setInputError('Invalid time format')
+    }
+  }
+
+  return (
+    <Dialog
+      id={dialogId}
+      header="Edit thumbnail"
+      onClose={() => setDialogState(false)}
+      footer={
+        <Stack padding={3}>
+          <Button
+            key="thumbnail"
+            disabled={inputError !== ''}
+            mode="ghost"
+            tone="primary"
+            loading={saving}
+            onClick={handleSave}
+            text="Set new thumbnail"
+          />
+        </Stack>
+      }
+    >
+      <Stack space={3} padding={3}>
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            Current:
+          </Text>
+          <VideoThumbnail asset={asset} width={width} staticImage />
+        </Stack>
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            New:
+          </Text>
+          <VideoThumbnail asset={assetWithNewThumbnail} width={width} staticImage />
+        </Stack>
+
+        <Stack space={2}>
+          <Flex align={'center'} justify={'center'}>
+            <Text size={5} weight="semibold">
+              Or
+            </Text>
+          </Flex>
+        </Stack>
+
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            Selected time for thumbnail (hh:mm:ss):
+          </Text>
+          <TextInput
+            size={1}
+            value={timeFormatted}
+            placeholder="hh:mm:ss"
+            onChange={handleInputChange}
+            customValidity={inputError}
+          />
+        </Stack>
+      </Stack>
+    </Dialog>
+  )
+}