Merge pull request #808 from streamethorg/develop

Merge dev to main

.github/ISSUE_TEMPLATE/task.md

@@ -0,0 +1,29 @@
+---
+name: Task
+about: Define a new task related to a User Story
+title: [TASK] 
+labels: task
+assignees: ''
+
+---
+
+## Description
+[Provide a clear and concise description of the task]
+
+## Related User Story
+Include the related User Story #< User Story >
+
+## Objectives
+- [ ] [Objective 1]
+- [ ] [Objective 2]
+- [ ] [Objective 3]
+
+## Acceptance Criteria
+- [ ] [Criterion 1]
+- [ ] [Criterion 2]
+- [ ] [Criterion 3]
+
+## Additional Information
+[Any extra details, context, or resources that might be helpful]
+
+

.github/PULL_REQUEST_TEMPLATE/generic_pr.md

@@ -1,3 +1,12 @@
+---
+name: Generic PR
+about: Template for general PRs
+title:
+labels:
+assignees: ''
+
+---
+
 # Pull Request Info
 
 ## Description
@@ -30,4 +39,4 @@ Please delete options that are not relevant.
 
 ## Additional context:
 
-Add any other context about the pull request here, like realted issues or important links to 3rd party documentation.
+Add any other context about the pull request here, like related issues or important links to 3rd party documentation.

.github/PULL_REQUEST_TEMPLATE/post_mortem.md

@@ -1,3 +1,12 @@
+---
+name: Post-Mortem template
+about: Template for important bug fix post-mortems
+title:
+labels:
+assignees: ''
+
+---
+
 # 😵 Post-Mortem 😵
 
 ## Summary

packages/app/app/[organization]/watch/page.tsx

@@ -10,6 +10,7 @@ import { Suspense } from 'react'
 import WatchGrid from '../components/WatchGrid'
 import { getVideoUrlAction } from '@/lib/actions/livepeer'
 import { generateThumbnailAction } from '@/lib/actions/sessions'
+
 const Loading = () => {
   return (
     <div className="mx-auto flex h-full w-full max-w-7xl animate-pulse flex-col gap-4">
@@ -53,10 +54,11 @@ export default async function Watch({
   if (!session || (!session.playbackId && !session.assetId))
     return notFound()
 
-  const sessionUrl = await getVideoUrlAction(
-    session.assetId,
-    session.playbackId
-  )
+  const videoUrl = await getVideoUrlAction(session.assetId as string)
+
+  if (!videoUrl) {
+    return notFound()
+  }
 
   const thumbnail = await generateThumbnailAction(session)
 
@@ -69,7 +71,7 @@ export default async function Watch({
             thumbnail={session.coverImage ?? thumbnail}
             src={[
               {
-                src: sessionUrl as `${string}m3u8`,
+                src: videoUrl as `${string}m3u8`,
                 width: 1920,
                 height: 1080,
                 mime: 'application/vnd.apple.mpegurl',

packages/app/app/api/google/callback/route.ts

@@ -12,6 +12,7 @@ export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams
   const code = searchParams.get('code')
   const state = searchParams.get('state')
+  const authuser = searchParams.get('authuser')
   const decodedState = state
     ? JSON.parse(decodeURIComponent(state))
     : ''
@@ -58,13 +59,14 @@ export async function GET(request: NextRequest) {
           }),
         }
       )
+
       revalidatePath('/studio')
       return NextResponse.redirect(
         new URL(parsedRedirectUrl, request.url)
       )
     } else {
       return NextResponse.redirect(
-        `${originUrl}/redirect/google?channelId=${tokenDetails.channelId}`
+        `${originUrl}/redirect/google?authuser=${authuser}`
       )
     }
   } catch (err) {

packages/app/app/api/twitter/callback/route.ts

@@ -0,0 +1,91 @@
+import { apiUrl } from '@/lib/utils/utils'
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { NextRequest, NextResponse } from 'next/server'
+import {
+  createOAuth,
+  getUserProfileImage,
+} from '@/lib/utils/twitterAuth'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const oauthToken = searchParams.get('oauth_token')
+  const oauthVerifier = searchParams.get('oauth_verifier')
+  const redirectUrl = decodeURIComponent(
+    searchParams.get('redirectUrl')!
+  )
+  const organizationId = searchParams.get('organizationId')
+  const authToken = cookies().get('user-session')?.value
+  const originUrl = process.env.NEXT_PUBLIC_ORIGIN_URL!
+
+  if (!oauthToken || !authToken) {
+    console.error('Twitter oauth token does not exist')
+    return redirect(originUrl + redirectUrl)
+  }
+
+  const oauth = createOAuth()
+  const url = 'https://api.twitter.com/oauth/access_token'
+  const method = 'POST'
+  const requestData = {
+    url,
+    method,
+    data: { oauth_token: oauthToken, oauth_verifier: oauthVerifier },
+  }
+  const headers = oauth.toHeader(oauth.authorize(requestData))
+  try {
+    const responseToken = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        ...headers,
+      },
+    })
+
+    const responseText = await responseToken.text()
+    const responseParams = new URLSearchParams(responseText)
+    const oauthAccessToken = responseParams.get('oauth_token')
+    const oauthAccessTokenSecret = responseParams.get(
+      'oauth_token_secret'
+    )
+    const userId = responseParams.get('user_id')
+    const screenName = responseParams.get('screen_name')
+    // if (!screenName) {
+    //   throw new Error(`Screen name not found`)
+    // }
+    // const userProfileImageUrl = await getUserProfileImage(screenName)
+
+    const response = await fetch(
+      `${apiUrl()}/organizations/socials/${organizationId}`,
+      {
+        method: 'PUT',
+        cache: 'no-cache',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify({
+          type: 'twitter',
+          accessToken: oauthAccessToken,
+          refreshToken: oauthAccessTokenSecret,
+          expireTime: Math.floor(Date.now() / 1000),
+          name: screenName,
+          thumbnail: '',
+          channelId: userId,
+        }),
+      }
+    )
+
+    revalidatePath('/studio')
+    return NextResponse.redirect(
+      new URL(originUrl + redirectUrl, request.url)
+    )
+  } catch (err) {
+    return NextResponse.json(
+      { error: err },
+      {
+        status: 500,
+      }
+    )
+  }
+}

packages/app/app/api/twitter/request/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createOAuth } from '@/lib/utils/twitterAuth'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const state = searchParams.get('state')
+  const TWITTER_CALLBACK_URL = process.env.TWITTER_CALLBACK_URL!
+  const TWITTER_ACCESS_TOKEN = process.env.TWITTER_ACCESS_TOKEN!
+  const TWITTER_ACCESS_TOKEN_SECRET =
+    process.env.TWITTER_ACCESS_TOKEN_SECRET!
+
+  const method = 'POST'
+  const url = 'https://api.twitter.com/oauth/request_token'
+  const decodedState = state
+    ? JSON.parse(decodeURIComponent(state))
+    : ''
+
+  const callbackUrlWithParams = new URL(TWITTER_CALLBACK_URL)
+  // Add personal redirect parameters to the callback URL
+  Object.keys(decodedState).forEach((key) => {
+    callbackUrlWithParams.searchParams.append(key, decodedState[key])
+  })
+  const callback = encodeURI(callbackUrlWithParams.toString())
+
+  const oauth = createOAuth()
+
+  const requestData = {
+    url,
+    method,
+    data: { oauth_callback: callback },
+  }
+  const token = {
+    key: TWITTER_ACCESS_TOKEN,
+    secret: TWITTER_ACCESS_TOKEN_SECRET,
+  }
+  const headers = oauth.toHeader(oauth.authorize(requestData, token))
+
+  try {
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'content-type': 'application/json',
+        ...headers,
+      },
+    })
+
+    const responseText = await response.text()
+    const responseParams = new URLSearchParams(responseText)
+    const oauthToken = responseParams.get('oauth_token')
+
+    return NextResponse.redirect(
+      new URL(
+        `https://api.twitter.com/oauth/authorize?oauth_token=${oauthToken}`,
+        request.url
+      )
+    )
+  } catch (err) {
+    return NextResponse.json(
+      { error: err },
+      {
+        status: 500,
+      }
+    )
+  }
+}

packages/app/app/embed/page.tsx

@@ -1,8 +1,6 @@
 import Player from '@/components/ui/Player'
 import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
-import { Livepeer } from 'livepeer'
-import { getSrc } from '@livepeer/react/external'
 import { EmbedPageParams } from '@/lib/types'
 import { fetchStage } from '@/lib/services/stageService'
 import { buildPlaybackUrl } from '@/lib/utils/utils'
@@ -89,9 +87,13 @@ const EmbedPage = async ({ searchParams }: EmbedPageParams) => {
     }
 
     const videoUrl = await getVideoUrlAction(
-      session.assetId,
-      session.playbackId
+      session.assetId as string
     )
+
+    if (!videoUrl) {
+      return notFound()
+    }
+
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <Embed

packages/app/app/redirect/google/page.tsx

@@ -7,7 +7,7 @@ import React from 'react'
 const GoogleRedirect = ({
   searchParams,
 }: {
-  searchParams: { channelId: string }
+  searchParams: { authuser: string }
 }) => {
   return (
     <div className="container mx-auto max-w-5xl space-y-2 p-12 text-black">
@@ -21,7 +21,7 @@ const GoogleRedirect = ({
       </p>
       <p>1. Go to your YouTube live dashboard</p>
       <Link
-        href={`https://studio.youtube.com/channel/${searchParams.channelId}/livestreaming?`}>
+        href={`https://www.youtube.com/signin?authuser=${searchParams.authuser}&next=%2Flive_dashboard&app=desktop`}>
         <Button className="my-4">Open Youtube Live Dashboard</Button>
       </Link>
       <p>2. Follow YouTube&apos;s steps to enable live streaming.</p>

packages/app/app/studio/[organization]/Preview.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import { useEffect, useState } from 'react'
 import Player from '@/components/ui/Player'
 import {
@@ -9,9 +10,9 @@ import {
 import ShareButton from '@/components/misc/interact/ShareButton'
 import useSearchParams from '@/lib/hooks/useSearchParams'
 import { deleteSessionAction } from '@/lib/actions/sessions'
-import { Button } from '@/components/ui/button'
 import { toast } from 'sonner'
-import { Asset } from 'livepeer/dist/models/components'
+import { Asset } from 'livepeer/models/components'
+
 const Preview = ({
   initialIsOpen,
   asset,
@@ -72,7 +73,7 @@ const Preview = ({
             <div className="flex aspect-video flex-col items-center justify-center rounded-lg bg-background p-4 text-black">
               <p className="">Video is processing</p>
               <p>
-                {(Number(status?.progress?.toFixed(2)) ?? 0) * 100}%
+                {Math.round(Number(status?.progress ?? 0) * 100)}%
                 complete
               </p>
             </div>