feat: fixing video preview for cloudflare r2

.env.example

@@ -65,6 +65,9 @@ STRIPE_WEBHOOK_SECRET=<webhook_secret>
 PLOTMYCOURSE_API_URL=https://plotmycourse.app/api/v1
 PLOTMYCOURSE_API_KEY=
 
+# used by our Cloudflare R2 worker for request autorization (you can ignore this)
+R2_SIGNING_KEY=dYmMU1KGTXhI0cmAHHAZi-scEf17PNG-
+
 # not needed locally
 DISCORD_WEBHOOK=<discord_webhook>
 PLAUSIBLE_API_KEY=<api_key>

app/actions/utils/get_hls_signature.ts

@@ -0,0 +1,32 @@
+import Post from '#models/post'
+import User from '#models/user'
+import env from '#start/env'
+import { DateTime } from 'luxon'
+import { createHmac } from 'node:crypto'
+
+type Params = {
+  user: User
+  post: Post
+}
+
+export default class GetHlsSignature {
+  static async handle({ user, post }: Params) {
+    const version = 'v1'
+    const userId = user.id ?? 'NA'
+    const videoId = post.videoR2Id
+    const expiration = DateTime.now().plus({ hours: 48 }).toISO()
+    const payload = [version, userId, videoId, expiration].join('|')
+    const signature = createHmac('sha256', env.get('R2_SIGNING_KEY'))
+      .update(payload)
+      .setEncoding('base64')
+      .digest('hex')
+
+    return {
+      signature,
+      version,
+      userId,
+      videoId,
+      expiration,
+    }
+  }
+}

app/models/post.ts

@@ -321,11 +321,15 @@ export default class Post extends AppBaseModel {
   }
 
   @computed()
-  get videoId() {
-    if (this.videoTypeId === VideoTypes.BUNNY) {
-      return this.videoBunnyId
-    }
+  get videoR2Id() {
+    if (this.videoTypeId !== VideoTypes.R2 || !this.videoUrl) return ''
+    return this.videoUrl
+  }
 
+  @computed()
+  get videoId() {
+    if (this.videoTypeId === VideoTypes.BUNNY) return this.videoBunnyId
+    if (this.videoTypeId === VideoTypes.R2) return this.videoR2Id
     return this.videoYouTubeId
   }
 
@@ -362,13 +366,23 @@ export default class Post extends AppBaseModel {
 
   @computed()
   get transcriptUrl() {
+    if (this.videoTypeId === VideoTypes.R2 && this.captions?.length) {
+      const filename = this.captions.at(0)?.filename
+      if (!filename) return
+      return `https://vid.adocasts.com/${this.videoId}/${filename}`
+    }
+
     if (this.videoTypeId !== VideoTypes.BUNNY || !this.videoBunnyId) return
 
     return this.bunnySubtitleUrls?.at(0)?.src
   }
 
   @computed()
   get animatedPreviewUrl() {
+    if (this.videoTypeId === VideoTypes.R2 && this.videoId) {
+      return `https://vid.adocasts.com/${this.videoId}/video.webp`
+    }
+
     if (this.videoTypeId !== VideoTypes.BUNNY || !this.videoBunnyId) return
 
     return `https://videos.adocasts.com/${this.videoBunnyId}/preview.webp`

inertia/components/TipTapEditor.vue

@@ -123,7 +123,7 @@ async function uploadImage(file: File) {
     },
   })
 
-  return `/assets/${data.filename}`
+  return `https://adocasts.com/${data.filename}?w=900`
 }
 </script>
 

inertia/components/VideoPreview.vue

@@ -108,7 +108,11 @@ function onVideoReady(event: any) {
       <p class="text-xs">Enter a valid video id to add a video to this post</p>
     </div>
     <video v-if="showEmbed" controls @loadedmetadata="onVideoReady">
-      <source :src="`https://vid.adocasts.com/${videoUrl}/video.mp4`" size="480" type="video/mp4" />
+      <source
+        :src="`https://vid.adocasts.com/${videoUrl}/video.mp4?cms=true`"
+        size="480"
+        type="video/mp4"
+      />
     </video>
   </div>
   <div

start/env.ts

@@ -88,4 +88,6 @@ export default await Env.create(new URL('../', import.meta.url), {
 
   PLOTMYCOURSE_API_URL: Env.schema.string(),
   PLOTMYCOURSE_API_KEY: Env.schema.string.optional(),
+
+  R2_SIGNING_KEY: Env.schema.string(),
 })