sanity-plugin-mux-input 2.2.3 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -61,8 +61,8 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-player-react": "1.11.4",
-    "@mux/upchunk": "^3",
+    "@mux/mux-player-react": "1.15.0",
+    "@mux/upchunk": "^3.2.0",
     "@sanity/icons": "^2",
     "@sanity/incompatible-plugin": "^1",
     "@sanity/ui": "^1",
@@ -78,40 +78,40 @@
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@sanity/pkg-utils": "^2.4.6",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@sanity/pkg-utils": "^2.4.10",
     "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.3",
-    "@sanity/vision": "^3.15.1",
-    "@types/react": "^18.2.20",
-    "@types/styled-components": "^5.1.26",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@sanity/vision": "^3.19.2",
+    "@types/react": "^18.2.37",
+    "@types/styled-components": "^5.1.30",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
-    "next": "^13.4.19",
-    "next-sanity": "^5.4.4",
+    "next": "^13.5.6",
+    "next-sanity": "^5.5.10",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.2",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier": "^3.1.0",
+    "prettier-plugin-packagejson": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.0",
-    "sanity": "^3.15.1",
+    "sanity": "^3.19.2",
     "styled-components": "^5.3.11",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/VideoDetails/VideoDetails.tsx

@@ -8,6 +8,7 @@ import {
   RevertIcon,
   SearchIcon,
   TrashIcon,
+  TagIcon,
 } from '@sanity/icons'
 import {
   Button,
@@ -221,7 +222,12 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                 selected={tab === 'references'}
               />
             </TabList>
-            <TabPanel aria-labelledby="details-tab" id="details-panel" hidden={tab !== 'details'}>
+            <TabPanel
+              aria-labelledby="details-tab"
+              id="details-panel"
+              hidden={tab !== 'details'}
+              style={{wordBreak: 'break-word'}}
+            >
               <Stack space={4}>
                 <AssetInput
                   label="Video title or file name"
@@ -271,6 +277,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                     icon={CalendarIcon}
                     size={2}
                   />
+                  <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
                 </Stack>
               </Stack>
             </TabPanel>

package/src/components/VideoMetadata.tsx

@@ -1,4 +1,4 @@
-import {CalendarIcon, ClockIcon} from '@sanity/icons'
+import {CalendarIcon, ClockIcon, TagIcon} from '@sanity/icons'
 import {Inline, Stack, Text} from '@sanity/ui'
 import React from 'react'
 
@@ -35,6 +35,9 @@ const VideoMetadata = (props: {asset: VideoAssetDocument}) => {
           size={1}
           muted
         />
+        {displayInfo.title != displayInfo.id.slice(0, 12) && (
+          <IconInfo text={displayInfo.id.slice(0, 12)} icon={TagIcon} size={1} muted />
+        )}
       </Inline>
     </Stack>
   )

package/src/components/__legacy__Uploader.tsx

@@ -229,8 +229,8 @@ class MuxVideoInputUploader extends Component<Props, State> {
             this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile)
               ? 'critical'
               : this.state.isDraggingOver
-              ? 'positive'
-              : undefined
+                ? 'positive'
+                : undefined
           }
           onDrop={this.handleDrop}
           onDragOver={this.handleDragOver}

package/src/util/createSearchFilter.ts

@@ -12,7 +12,7 @@ function tokenize(string: string): string[] {
 function toGroqParams(terms: string[]): Record<string, string> {
   const params: Record<string, string> = {}
   return terms.reduce((acc, term, i) => {
-    acc[`t${i}`] = `${term}*` // "t" is short for term
+    acc[`t${i}`] = `*${term}*` // "t" is short for term
     return acc
   }, params)
 }
@@ -51,16 +51,14 @@ function extractTermsFromQuery(query: string): string[] {
   return [...quotedTerms, ...remainingTerms]
 }
 
-/** Which properties of the video asset document should we match users' queries against */
-const SEARCH_PATHS = ['filename']
-
 /**
  * Create GROQ constraints, given search terms and the full spec of available document types and fields.
  * Essentially a large list of all possible fields (joined by logical OR) to match our search terms against.
  */
-function createConstraints(terms: string[]) {
+function createConstraints(terms: string[], includeAssetId: Boolean) {
+  const searchPaths = includeAssetId ? ['filename', 'assetId'] : ['filename']
   const constraints = terms
-    .map((_term, i) => SEARCH_PATHS.map((joinedPath) => `${joinedPath} match $t${i}`))
+    .map((_term, i) => searchPaths.map((joinedPath) => `${joinedPath} match $t${i}`))
     .filter((constraint) => constraint.length > 0)
 
   return constraints.map((constraint) => `(${constraint.join(' || ')})`)
@@ -70,7 +68,7 @@ export function createSearchFilter(query: string) {
   const terms = extractTermsFromQuery(query)
 
   return {
-    filter: createConstraints(terms),
+    filter: createConstraints(terms, query.length >= 8), // if the search is big enough, include the assetId (mux id) in the results
     params: {
       ...toGroqParams(terms),
     },

package/src/util/generateJwt.ts

@@ -9,12 +9,12 @@ export type Audience = 'g' | 's' | 't' | 'v'
 export type Payload<T extends Audience> = T extends 'g'
   ? AnimatedThumbnailOptions
   : T extends 's'
-  ? never
-  : T extends 't'
-  ? ThumbnailOptions
-  : T extends 'v'
-  ? never
-  : never
+    ? never
+    : T extends 't'
+      ? ThumbnailOptions
+      : T extends 'v'
+        ? never
+        : never
 
 export function generateJwt<T extends Audience>(
   client: SanityClient,

package/src/util/getVideoMetadata.ts

@@ -8,7 +8,8 @@ export default function getVideoMetadata(doc: VideoAssetDocument) {
     : new Date(doc._createdAt || doc._updatedAt || Date.now())
 
   return {
-    title: doc.filename || id.slice(0, 10),
+    title: doc.filename || id.slice(0, 12),
+    id: id,
     createdAt: date,
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : undefined,
     aspect_ratio: doc.data?.aspect_ratio,