From 36f7eafa0b8a75d156dd30744cc9478284650d2d Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Wed, 29 Jul 2026 19:34:51 -0400
Subject: [PATCH 1/7] Add initial support for clip links

---
 src/renderer/App.vue                        | 51 ++++++++++++++++++++-
 src/renderer/components/FtInput/FtInput.vue |  1 +
 src/renderer/components/TopNav/TopNav.vue   | 48 +++++++++++++++++--
 src/renderer/helpers/api/invidious.js       |  7 +++
 src/renderer/helpers/api/local.js           | 15 ++++++
 src/renderer/store/modules/utils.js         | 13 +++++-
 6 files changed, 129 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index e02bdffd7a389..6327f5a452120 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -130,11 +130,19 @@ import packageDetails from '../../package.json'
 import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
 import { translateWindowTitle } from './helpers/strings'
 import { loadLocale } from './i18n/index'
+import { getLocalClip } from './helpers/api/local.js'
+import { getClipInvidious } from './helpers/api/invidious.js'
 
 const route = useRoute()
 const router = useRouter()
 const { locale, t } = useI18n()
 
+/** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
+const backendPreference = computed(() => store.getters.getBackendPreference)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const backendFallback = computed(() => store.getters.getBackendFallback)
+
 /** @type {import('vue').ComputedRef<boolean>} */
 const isSideNavOpen = computed(() => store.getters.getIsSideNavOpen)
 
@@ -431,8 +439,18 @@ async function handleYoutubeLink(href, { doCreateNewWindow = false } = {}) {
   const result = await store.dispatch('getYoutubeUrlInfo', href)
 
   switch (result.urlType) {
+    case 'clip':
     case 'video': {
-      const { videoId, timestamp, playlistId } = result
+      let videoId, timestamp, playlistId
+
+      if (result.urlType === 'video') {
+        videoId = result.videoId
+        timestamp = result.timestamp
+        playlistId = result.playlistId
+      } else if (result.urlType === 'clip') {
+        const clipResult = await getClip(result.clipId)
+        videoId = clipResult.videoId
+      }
 
       const query = {}
       if (timestamp) {
@@ -722,6 +740,37 @@ function handleDragStart(event) {
     event.stopPropagation()
   }
 }
+
+async function getClip(clipId) {
+  if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
+    try {
+      return await getClipInvidious(clipId)
+    } catch (err) {
+      console.error(err)
+
+      if (process.env.SUPPORTS_LOCAL_API && backendFallback.value) {
+        console.error(
+          'Error resolving clip URL.  Falling back to Local API'
+        )
+        return await getLocalClip(clipId)
+      }
+    }
+  } else {
+    try {
+      return await getLocalClip(clipId)
+    } catch (err) {
+      console.error(err)
+
+      if (backendFallback.value) {
+        console.error(
+          'Error resolving clip URL.  Falling back to Invidious API'
+        )
+        return await getClipInvidious(clipId)
+      }
+    }
+  }
+}
+
 </script>
 
 <style src="./themes.css" />
diff --git a/src/renderer/components/FtInput/FtInput.vue b/src/renderer/components/FtInput/FtInput.vue
index 2bf4373578e3e..b2c50938d6c77 100644
--- a/src/renderer/components/FtInput/FtInput.vue
+++ b/src/renderer/components/FtInput/FtInput.vue
@@ -333,6 +333,7 @@ async function handleActionIconChange() {
       case 'subscriptions':
       case 'history':
       case 'userplaylists':
+      case 'clip':
         isYoutubeLink = true
         break
 
diff --git a/src/renderer/components/TopNav/TopNav.vue b/src/renderer/components/TopNav/TopNav.vue
index 81805a29fe420..e6518b729257f 100644
--- a/src/renderer/components/TopNav/TopNav.vue
+++ b/src/renderer/components/TopNav/TopNav.vue
@@ -133,8 +133,8 @@ import store from '../../store/index'
 import { KeyboardShortcuts, MOBILE_WIDTH_THRESHOLD, SEARCH_RESULTS_DISPLAY_LIMIT } from '../../../constants'
 import { debounce, localizeAndAddKeyboardShortcutToActionTitle, openInternalPath } from '../../helpers/utils'
 import { translateWindowTitle } from '../../helpers/strings'
-import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
-import { getInvidiousSearchSuggestions } from '../../helpers/api/invidious'
+import { clearLocalSearchSuggestionsSession, getLocalClip, getLocalSearchSuggestions } from '../../helpers/api/local'
+import { getClipInvidious, getInvidiousSearchSuggestions } from '../../helpers/api/invidious'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -389,10 +389,20 @@ function goToSearch(queryText, { event }) {
 
   clearLocalSearchSuggestionsSession()
 
-  store.dispatch('getYoutubeUrlInfo', queryText).then((result) => {
+  store.dispatch('getYoutubeUrlInfo', queryText).then(async (result) => {
     switch (result.urlType) {
+      case 'clip':
       case 'video': {
-        const { videoId, timestamp, playlistId } = result
+        let videoId, timestamp, playlistId
+
+        if (result.urlType === 'video') {
+          videoId = result.videoId
+          timestamp = result.timestamp
+          playlistId = result.playlistId
+        } else if (result.urlType === 'clip') {
+          const clipResult = await getClip(result.clipId)
+          videoId = clipResult.videoId
+        }
 
         const query = {}
         if (timestamp) {
@@ -626,6 +636,36 @@ function handleWindowResize() {
   }
 }
 
+async function getClip(clipId) {
+  if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
+    try {
+      return await getClipInvidious(clipId)
+    } catch (err) {
+      console.error(err)
+
+      if (process.env.SUPPORTS_LOCAL_API && backendFallback.value) {
+        console.error(
+          'Error resolving clip URL.  Falling back to Local API'
+        )
+        return await getLocalClip(clipId)
+      }
+    }
+  } else {
+    try {
+      return await getLocalClip(clipId)
+    } catch (err) {
+      console.error(err)
+
+      if (backendFallback.value) {
+        console.error(
+          'Error resolving clip URL.  Falling back to Invidious API'
+        )
+        return await getClipInvidious(clipId)
+      }
+    }
+  }
+}
+
 onMounted(() => {
   previousWindowWidth = window.innerWidth
   if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index 8d57c3062a96f..c46c358a36700 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -860,6 +860,13 @@ export async function getHashtagInvidious(hashtag, page = 1) {
   return response.results
 }
 
+export async function getClipInvidious(clipId) {
+  // todo: invidious does have a clip endpoint for the api but
+  // it currently makes an expensive get_video request that we might want to avoid.
+  const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
+  return response
+}
+
 /**
  * Generates a DASH manifest locally from Invidious' adaptive formats and manifest,
  * doing so allows us to support multiple audio tracks, which Invidious doesn't support yet
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 95490813f4b9d..21e0f99c48d51 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -2486,3 +2486,18 @@ export async function getLocalCommunityPostComments(postId, channelId) {
 
   return await innertube.getPostComments(postId, channelId)
 }
+
+export async function getLocalClip(clipId) {
+  const innertube = await createInnertube()
+
+  const clipResponse = await innertube.resolveURL('https://www.youtube.com/clip/' + clipId)
+
+  const videoId = clipResponse?.payload?.videoId
+
+  // todo: figure out how we should parse additional properties from payload params protobuf
+  // const params = clipResponse?.payload.params
+
+  return {
+    videoId // todo: parse params like done in Invidious?
+  }
+}
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 23030154c9cfd..7befeba11fb19 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -342,6 +342,9 @@ const actions = {
     // If `urlType` is "channel"
     // - channelId [String]
     //
+    // If `urlType` is "clip"
+    // - clipId
+    //
     // If `urlType` is "unknown"
     // Nothing else
     //
@@ -376,7 +379,7 @@ const actions = {
       /^\/(?:(?:channel|user|c)\/)?(?<channelId>[^/]+)(?:\/(?<tab>join|featured|videos|shorts|live|streams|podcasts|releases|courses|playlists|about|community|channels))?\/?$/
 
     const hashtagPattern = /^\/hashtag\/(?<tag>[^#&/?]+)$/
-
+    const clipPattern = /^\/clip\/(?<clipId>.+)/
     const postPattern = /^\/post\/(?<postId>.+)/
     const feedPattern = /^\/feed\/(?<type>trending|subscriptions|history|playlists|you|library)/
     const typePatterns = new Map([
@@ -386,6 +389,7 @@ const actions = {
       ['post', postPattern],
       ['feed', feedPattern],
       ['channel', channelPattern],
+      ['clip', clipPattern]
     ])
 
     for (const [type, pattern] of typePatterns) {
@@ -463,6 +467,13 @@ const actions = {
         }
       }
 
+      case 'clip': {
+        const match = url.pathname.match(clipPattern)
+        const clipId = match.groups.clipId
+
+        return { urlType: 'clip', clipId }
+      }
+
       case 'post': {
         const match = url.pathname.match(postPattern)
         const postId = match.groups.postId

From 091e8bdfbd7e55b602515e9ce4284c0911fc146d Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Sun, 2 Aug 2026 16:33:34 -0400
Subject: [PATCH 2/7] add link to Invidious PR to make clip api endpoint less
 expensive.

---
 src/renderer/helpers/api/invidious.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index c46c358a36700..93f9b57b56ee4 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -863,6 +863,7 @@ export async function getHashtagInvidious(hashtag, page = 1) {
 export async function getClipInvidious(clipId) {
   // todo: invidious does have a clip endpoint for the api but
   // it currently makes an expensive get_video request that we might want to avoid.
+  // https://github.com/iv-org/invidious/pull/5871
   const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
   return response
 }

From 9f06cb59beb1cf07152c048306db1ead85a2ef91 Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Sun, 2 Aug 2026 18:42:16 -0400
Subject: [PATCH 3/7] Parse params for clips using ClipParams from YouTube.js

---
 src/renderer/App.vue                      |  1 +
 src/renderer/components/TopNav/TopNav.vue |  1 +
 src/renderer/helpers/api/invidious.js     | 16 +++++++++++-----
 src/renderer/helpers/api/local.js         | 10 +++++++---
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 6327f5a452120..51cc3890c44db 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -450,6 +450,7 @@ async function handleYoutubeLink(href, { doCreateNewWindow = false } = {}) {
       } else if (result.urlType === 'clip') {
         const clipResult = await getClip(result.clipId)
         videoId = clipResult.videoId
+        timestamp = clipResult.startTime
       }
 
       const query = {}
diff --git a/src/renderer/components/TopNav/TopNav.vue b/src/renderer/components/TopNav/TopNav.vue
index e6518b729257f..02b913c939998 100644
--- a/src/renderer/components/TopNav/TopNav.vue
+++ b/src/renderer/components/TopNav/TopNav.vue
@@ -402,6 +402,7 @@ function goToSearch(queryText, { event }) {
         } else if (result.urlType === 'clip') {
           const clipResult = await getClip(result.clipId)
           videoId = clipResult.videoId
+          timestamp = clipResult.startTime
         }
 
         const query = {}
diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index 93f9b57b56ee4..779c0b6dd7e80 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -2,7 +2,8 @@ import store from '../../store/index'
 import { calculatePublishedDate, getRelativeTimeFromDate } from '../utils'
 import { isNullOrEmpty } from '../strings'
 import autolinker from 'autolinker'
-import { FormatUtils, Misc, Player } from 'youtubei.js'
+import { FormatUtils, Misc, Player, Utils } from 'youtubei.js'
+import { ClipParams } from '../../../../node_modules/youtubei.js/dist/protos/generated/misc/params'
 
 /** @typedef {{url: string, width: number, height: number}} InvidiousImageObject */
 /** @typedef {{quality: string, url: string, width: number, height: number}} InvidiousThumbnailObject */
@@ -861,11 +862,16 @@ export async function getHashtagInvidious(hashtag, page = 1) {
 }
 
 export async function getClipInvidious(clipId) {
-  // todo: invidious does have a clip endpoint for the api but
-  // it currently makes an expensive get_video request that we might want to avoid.
-  // https://github.com/iv-org/invidious/pull/5871
   const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
-  return response
+
+  const parsedParams = ClipParams.decode(decodeURIComponent(Utils.base64ToU8(response.params)))
+  return {
+    videoId: response.videoId,
+    startTime: parsedParams.clipParamsData.startTime / 1000, // convert to seconds
+    endTime: parsedParams.clipParamsData.endTime / 1000, // convert to seconds
+    clipTitle: parsedParams.clipParamsData.clipTitle,
+    clipMetadata: parsedParams.clipParamsData.clipMetadata
+  }
 }
 
 /**
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 21e0f99c48d51..4040f6c6d6f3b 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -1,4 +1,5 @@
 import { ClientType, Constants, Innertube, Misc, Mixins, Parser, Platform, Player, Session, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
+import { ClipParams } from '../../../../node_modules/youtubei.js/dist/protos/generated/misc/params'
 import Autolinker from 'autolinker'
 import { parseLooseJSON } from 'bgutils-js/utils'
 
@@ -2494,10 +2495,13 @@ export async function getLocalClip(clipId) {
 
   const videoId = clipResponse?.payload?.videoId
 
-  // todo: figure out how we should parse additional properties from payload params protobuf
-  // const params = clipResponse?.payload.params
+  const parsedParams = ClipParams.decode(Utils.base64ToU8(decodeURIComponent(clipResponse.payload.params)))
 
   return {
-    videoId // todo: parse params like done in Invidious?
+    videoId,
+    startTime: parsedParams.clipParamsData.startTime / 1000, // convert to seconds
+    endTime: parsedParams.clipParamsData.endTime / 1000, // convert to seconds
+    clipTitle: parsedParams.clipParamsData.clipTitle,
+    clipMetadata: parsedParams.clipParamsData.clipMetadata
   }
 }

From a92ee52c4fd9d2bcaf50e4466ff2304ba1ce2350 Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Fri, 28 Aug 2026 15:31:50 -0400
Subject: [PATCH 4/7] update property name since I changed it in the youtubejs
 pr

---
 src/renderer/helpers/api/local.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 4040f6c6d6f3b..19123463bdab6 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -2499,9 +2499,9 @@ export async function getLocalClip(clipId) {
 
   return {
     videoId,
-    startTime: parsedParams.clipParamsData.startTime / 1000, // convert to seconds
-    endTime: parsedParams.clipParamsData.endTime / 1000, // convert to seconds
-    clipTitle: parsedParams.clipParamsData.clipTitle,
-    clipMetadata: parsedParams.clipParamsData.clipMetadata
+    startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds
+    endTime: parsedParams.clipParamData.endTime / 1000, // convert to seconds
+    clipTitle: parsedParams.clipParamData.clipTitle,
+    clipMetadata: parsedParams.clipParamData.clipMetadata
   }
 }

From 9675e80447a25f3651547a936be588c8ad724c47 Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Sun, 30 Aug 2026 08:00:16 -0400
Subject: [PATCH 5/7] fix invidious

Co-authored-by: Cameron Radmore <radmorecameron@gmail.com>
---
 src/renderer/helpers/api/invidious.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index 779c0b6dd7e80..5914d1d9d1031 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -867,10 +867,10 @@ export async function getClipInvidious(clipId) {
   const parsedParams = ClipParams.decode(decodeURIComponent(Utils.base64ToU8(response.params)))
   return {
     videoId: response.videoId,
-    startTime: parsedParams.clipParamsData.startTime / 1000, // convert to seconds
-    endTime: parsedParams.clipParamsData.endTime / 1000, // convert to seconds
-    clipTitle: parsedParams.clipParamsData.clipTitle,
-    clipMetadata: parsedParams.clipParamsData.clipMetadata
+    startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds
+    endTime: parsedParams.clipParamData.endTime / 1000, // convert to seconds
+    clipTitle: parsedParams.clipParamData.clipTitle,
+    clipMetadata: parsedParams.clipParamData.clipMetadata
   }
 }
 

From 755a46db0968186c1de9b008e3b84ce0758dfb43 Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Mon, 31 Aug 2026 23:08:50 -0400
Subject: [PATCH 6/7] Fix invidious for real

---
 src/renderer/helpers/api/invidious.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index 5914d1d9d1031..129b9d7a7cdb0 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -864,7 +864,7 @@ export async function getHashtagInvidious(hashtag, page = 1) {
 export async function getClipInvidious(clipId) {
   const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
 
-  const parsedParams = ClipParams.decode(decodeURIComponent(Utils.base64ToU8(response.params)))
+  const parsedParams = ClipParams.decode(Utils.base64ToU8(decodeURIComponent(response.params)))
   return {
     videoId: response.videoId,
     startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds

From 5c7f8b60f500d55c39b3618588c9a97699d3b17f Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Tue, 8 Sep 2026 21:54:38 -0400
Subject: [PATCH 7/7] Move ClipParams parsing to new shared.js file

---
 src/renderer/helpers/api/invidious.js | 26 +++++++++++++++++---------
 src/renderer/helpers/api/local.js     | 12 ++----------
 src/renderer/helpers/api/shared.js    | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/helpers/api/shared.js

diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
index 129b9d7a7cdb0..0a443324bc15c 100644
--- a/src/renderer/helpers/api/invidious.js
+++ b/src/renderer/helpers/api/invidious.js
@@ -2,8 +2,8 @@ import store from '../../store/index'
 import { calculatePublishedDate, getRelativeTimeFromDate } from '../utils'
 import { isNullOrEmpty } from '../strings'
 import autolinker from 'autolinker'
-import { FormatUtils, Misc, Player, Utils } from 'youtubei.js'
-import { ClipParams } from '../../../../node_modules/youtubei.js/dist/protos/generated/misc/params'
+import { FormatUtils, Misc, Player } from 'youtubei.js'
+import { parseVideoClipsParams } from './shared'
 
 /** @typedef {{url: string, width: number, height: number}} InvidiousImageObject */
 /** @typedef {{quality: string, url: string, width: number, height: number}} InvidiousThumbnailObject */
@@ -862,15 +862,23 @@ export async function getHashtagInvidious(hashtag, page = 1) {
 }
 
 export async function getClipInvidious(clipId) {
-  const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
+  if (process.env.SUPPORTS_LOCAL_API) {
+    // reuse parsing from local api
+    const response = await resolveUrl('https://www.youtube.com/clip/' + clipId)
+    return parseVideoClipsParams(response.videoId, response.params)
+  }
+
+  // fallback to invidious clips api when local api isn't available (makes an expensive fetch video call)
+  const clipResponse = await invidiousAPICall({
+    resource: 'clips',
+    id: clipId,
+  })
 
-  const parsedParams = ClipParams.decode(Utils.base64ToU8(decodeURIComponent(response.params)))
   return {
-    videoId: response.videoId,
-    startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds
-    endTime: parsedParams.clipParamData.endTime / 1000, // convert to seconds
-    clipTitle: parsedParams.clipParamData.clipTitle,
-    clipMetadata: parsedParams.clipParamData.clipMetadata
+    videoId: clipResponse.video.videoId,
+    startTime: clipResponse.startTime,
+    endTime: clipResponse.endTime,
+    clipTitle: clipResponse.clipTitle,
   }
 }
 
diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index 19123463bdab6..026815df01c52 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -1,5 +1,4 @@
 import { ClientType, Constants, Innertube, Misc, Mixins, Parser, Platform, Player, Session, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
-import { ClipParams } from '../../../../node_modules/youtubei.js/dist/protos/generated/misc/params'
 import Autolinker from 'autolinker'
 import { parseLooseJSON } from 'bgutils-js/utils'
 
@@ -14,6 +13,7 @@ import {
   getChannelPlaylistId,
   getRelativeTimeFromDate,
 } from '../utils'
+import { parseVideoClipsParams } from './shared'
 
 const TRACKING_PARAM_NAMES = [
   'utm_source',
@@ -2495,13 +2495,5 @@ export async function getLocalClip(clipId) {
 
   const videoId = clipResponse?.payload?.videoId
 
-  const parsedParams = ClipParams.decode(Utils.base64ToU8(decodeURIComponent(clipResponse.payload.params)))
-
-  return {
-    videoId,
-    startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds
-    endTime: parsedParams.clipParamData.endTime / 1000, // convert to seconds
-    clipTitle: parsedParams.clipParamData.clipTitle,
-    clipMetadata: parsedParams.clipParamData.clipMetadata
-  }
+  return parseVideoClipsParams(videoId, clipResponse.payload.params)
 }
diff --git a/src/renderer/helpers/api/shared.js b/src/renderer/helpers/api/shared.js
new file mode 100644
index 0000000000000..e209a04224b84
--- /dev/null
+++ b/src/renderer/helpers/api/shared.js
@@ -0,0 +1,19 @@
+// code shared between invidious and local api (like parsing or types)
+export function parseVideoClipsParams(videoId, params) {
+  if (process.env.SUPPORTS_LOCAL_API) {
+    const { Utils } = require('youtubei.js')
+    const { ClipParams } = require('../../../../node_modules/youtubei.js/dist/protos/generated/misc/params')
+
+    const parsedParams = ClipParams.decode(Utils.base64ToU8(decodeURIComponent(params)))
+
+    return {
+      videoId,
+      startTime: parsedParams.clipParamData.startTime / 1000, // convert to seconds
+      endTime: parsedParams.clipParamData.endTime / 1000, // convert to seconds
+      clipTitle: parsedParams.clipParamData.clipTitle,
+      clipMetadata: parsedParams.clipParamData.clipMetadata
+    }
+  } else {
+    return null
+  }
+}