Update Clips APIs (#352)

* Update Clips APIs * Cleanup
lemonmade · Oct 3, 2024 · 1aaf4aa · 1aaf4aa
1 parent 29dba18
commit 1aaf4aa
Show file tree

Hide file tree

Showing 30 changed files with 1,115 additions and 620 deletions.
diff --git a/.changeset/modern-numbers-pay.md b/.changeset/modern-numbers-pay.md
@@ -0,0 +1,5 @@
+---
+'@watching/cli': minor
+---
+
+Update Clips upload flow
diff --git a/.changeset/new-terms-switch.md b/.changeset/new-terms-switch.md
@@ -0,0 +1,5 @@
+---
+'@watching/thread-render': patch
+---
+
+Put a facade over some signal usage
diff --git a/app/browser.tsx b/app/browser.tsx
@@ -15,7 +15,7 @@ import Env from 'quilt:module/env';
 
 import type {AppContext} from '~/shared/context.ts';
 import {SearchParam} from '~/global/auth.ts';
-import {createClipsManager} from '~/shared/clips.ts';
+import {ClipsManager} from '~/shared/clips.ts';
 
 import App from './App.tsx';
 import {EXTENSION_POINTS} from './clips.ts';
@@ -79,10 +79,7 @@ const context = {
   graphql: {cache: new GraphQLCache(), fetch: fetchGraphQL},
   performance,
   clipsManager: user
-    ? createClipsManager(
-        {user, graphql: fetchGraphQL, router},
-        EXTENSION_POINTS,
-      )
+    ? new ClipsManager({user, graphql: fetchGraphQL, router}, EXTENSION_POINTS)
     : undefined,
 } satisfies AppContext;
 

diff --git a/app/features/Developer/Console/Console.tsx b/app/features/Developer/Console/Console.tsx
@@ -16,7 +16,7 @@ import {Page} from '~/shared/page.ts';
 import {
   useClipsManager,
   useLocalDevelopmentServerQuery,
-  type ClipsLocalDevelopmentServer,
+  type ClipsLocalDevelopmentServerType,
 } from '~/shared/clips.ts';
 
 import developerConsoleQuery, {
@@ -37,7 +37,7 @@ export default function Console() {
   );
 }
 
-function ConnectedConsole({server}: {server: ClipsLocalDevelopmentServer}) {
+function ConnectedConsole({server}: {server: ClipsLocalDevelopmentServerType}) {
   const {data, loading} = useLocalDevelopmentServerQuery(developerConsoleQuery);
 
   usePerformanceNavigation({state: loading ? 'loading' : 'complete'});
@@ -119,7 +119,7 @@ function ExtensionBuildResult({
   }
 }
 
-function ConnectToConsole({server}: {server: ClipsLocalDevelopmentServer}) {
+function ConnectToConsole({server}: {server: ClipsLocalDevelopmentServerType}) {
   usePerformanceNavigation({state: 'complete'});
 
   const localUrl = useSignal('');

diff --git a/app/features/Series/Series.tsx b/app/features/Series/Series.tsx
@@ -193,7 +193,7 @@ function SeriesWithData({
       <AccessoryClips
         id={series.id}
         name={series.name}
-        installations={series.clipsInstallations}
+        clips={series.clipsToRender}
       />
 
       <SeasonsSection id={series.id} seasons={seasons} onUpdate={onUpdate} />
@@ -212,13 +212,13 @@ function SeriesWithData({
 function AccessoryClips({
   id,
   name,
-  installations,
+  clips,
 }: {
   id: string;
   name: string;
-  installations: SeriesQueryData.Series['clipsInstallations'];
+  clips: SeriesQueryData.Series['clipsToRender'];
 }) {
-  const accessoryClips = useClips('series.details.accessory', installations, {
+  const accessoryClips = useClips('series.details.accessory', clips, {
     id,
     name,
   });
@@ -228,7 +228,7 @@ function AccessoryClips({
   return (
     <BlockStack spacing="large">
       {accessoryClips.map((clip) => (
-        <Clip key={clip.id} extension={clip} />
+        <Clip key={clip.id} extensionPoint={clip} />
       ))}
     </BlockStack>
   );

diff --git a/app/features/Series/graphql/SeriesQuery.graphql b/app/features/Series/graphql/SeriesQuery.graphql
@@ -1,4 +1,4 @@
-#import "../../../shared/clips/graphql/ClipsExtensionFragment.graphql"
+#import "../../../shared/clips/graphql/ClipsExtensionPointFragment.graphql"
 
 query Series($id: ID, $handle: String) {
   series(id: $id, handle: $handle) {
@@ -55,8 +55,8 @@ query Series($id: ID, $handle: String) {
         episode
       }
     }
-    clipsInstallations(target: "series.details.accessory") {
-      ...ClipsExtension
+    clipsToRender(target: "series.details.accessory") {
+      ...ClipsExtensionPoint
     }
   }
 }
diff --git a/app/features/WatchThrough/WatchThrough.tsx b/app/features/WatchThrough/WatchThrough.tsx
@@ -127,7 +127,7 @@ function WatchThroughWithData({
     settings,
     from,
     to,
-    clipsInstallations,
+    clipsToRender,
   } = watchThrough;
 
   const watchingSingleSeason = from.season === to.season;
@@ -234,7 +234,7 @@ function WatchThroughWithData({
             id={id}
             url={url}
             series={series}
-            installations={clipsInstallations}
+            clips={clipsToRender}
             currentWatch={nextEpisodeForm}
           />
 
@@ -1016,24 +1016,26 @@ function AccessoryClips({
   id,
   url,
   series,
-  installations,
+  clips,
   currentWatch,
 }: Pick<WatchThroughQueryData.WatchThrough, 'id' | 'url' | 'series'> & {
-  installations: WatchThroughQueryData.WatchThrough['clipsInstallations'];
+  clips: WatchThroughQueryData.WatchThrough['clipsToRender'];
   currentWatch: Signal<WatchForm | undefined>;
 }) {
-  const accessoryClips = useClips(
-    'watch-through.details.accessory',
-    installations,
-    {id, url, seriesId: series.id, seriesName: series.name, currentWatch},
-  );
+  const accessoryClips = useClips('watch-through.details.accessory', clips, {
+    id,
+    url,
+    seriesId: series.id,
+    seriesName: series.name,
+    currentWatch,
+  });
 
   if (accessoryClips.length === 0) return null;
 
   return (
     <BlockStack spacing="large">
       {accessoryClips.map((clip) => (
-        <Clip key={clip.id} extension={clip} />
+        <Clip key={clip.id} extensionPoint={clip} />
       ))}
     </BlockStack>
   );

diff --git a/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql b/app/features/WatchThrough/graphql/WatchThroughDetailsFragment.graphql
@@ -1,4 +1,4 @@
-#import "../../../shared/clips/graphql/ClipsExtensionFragment.graphql"
+#import "../../../shared/clips/graphql/ClipsExtensionPointFragment.graphql"
 
 fragment WatchThroughDetails on WatchThrough {
   id
@@ -129,7 +129,7 @@ fragment WatchThroughDetails on WatchThrough {
   settings {
     spoilerAvoidance
   }
-  clipsInstallations(target: "watch-through.details.accessory") {
-    ...ClipsExtension
+  clipsToRender(target: "watch-through.details.accessory") {
+    ...ClipsExtensionPoint
   }
 }
diff --git a/app/server/app.tsx b/app/server/app.tsx
@@ -5,7 +5,7 @@ import {Router} from '@quilted/quilt/navigation';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
-import {createClipsManager} from '~/shared/clips.ts';
+import {ClipsManager} from '~/shared/clips.ts';
 
 import App from '../App.tsx';
 import {EXTENSION_POINTS} from '../clips.ts';
@@ -62,7 +62,7 @@ export const handleApp: RequestHandler = async function handleApp(request) {
     router,
     graphql: {cache: new GraphQLCache(), fetch: fetchGraphQL},
     clipsManager: user
-      ? createClipsManager(
+      ? new ClipsManager(
           {user, graphql: fetchGraphQL, router},
           EXTENSION_POINTS,
         )

diff --git a/app/server/graphql/resolvers/apps/App.ts b/app/server/graphql/resolvers/apps/App.ts
@@ -250,6 +250,13 @@ export const AppInstallation = createResolverWithGid('AppInstallation', {
   async extensions({id}, _, {prisma}) {
     const installations = await prisma.clipsExtensionInstallation.findMany({
       where: {appInstallationId: id},
+      include: {
+        extension: {
+          include: {
+            activeVersion: true,
+          },
+        },
+      },
       take: 50,
       // orderBy: {createAt, 'desc'},
     });