feat(providers/services): add logo string to each service

Signed-off-by: Jordan Shatford <[email protected]>
jordanshatford · Nov 22, 2024 · 8689bc2 · 8689bc2
1 parent df746f7
commit 8689bc2
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 40 deletions.
diff --git a/.changeset/four-coats-flow.md b/.changeset/four-coats-flow.md
@@ -0,0 +1,6 @@
+---
+"@cq/providers": minor
+"@cq/services": minor
+---
+
+feat: add logo string to each service
diff --git a/packages/providers/src/kick.ts b/packages/providers/src/kick.ts
@@ -7,18 +7,7 @@ import { ClipProvider } from './types'
 export class KickProvider implements IClipProvider {
   public name = ClipProvider.KICK
 
-  public svg = `
-    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1539.02 1539.02">
-      <title>Kick</title>
-      <defs>
-        <style>
-          .cls-1{fill:#53fc19;fill-rule:evenodd;}
-        </style>
-      </defs>
-      <rect width="1539.02" height="1539.02"/>
-      <polygon class="cls-1" points="278.26 216.86 646.7 216.86 646.7 462.48 769.51 462.48 769.51 339.67 892.32 339.67 892.32 216.86 1260.75 216.86 1260.75 585.29 1137.94 585.29 1137.94 708.1 1015.13 708.1 1015.13 830.91 1137.94 830.91 1137.94 953.72 1260.75 953.72 1260.75 1322.16 892.32 1322.16 892.32 1199.35 769.51 1199.35 769.51 1076.54 646.7 1076.54 646.7 1322.16 278.26 1322.16 278.26 216.86"/>
-    </svg>
-  `
+  public svg = kick.logo
 
   public isExperimental = false
 

diff --git a/packages/providers/src/twitch.ts b/packages/providers/src/twitch.ts
@@ -7,25 +7,7 @@ import { ClipProvider } from './types'
 export class TwitchProvider implements IClipProvider {
   public name = ClipProvider.TWITCH
 
-  public svg = `
-    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
-      <title>Twitch</title>
-      <style type="text/css">
-        .st0{fill:#FFFFFF;}
-        .st1{fill:#9146FF;}
-      </style>
-      <g>
-        <polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 	"/>
-        <g>
-          <g id="Layer_1-2">
-            <path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600 V1300z"/>
-            <rect x="1700" y="550" class="st1" width="200" height="600"/>
-            <rect x="1150" y="550" class="st1" width="200" height="600"/>
-          </g>
-        </g>
-      </g>
-    </svg>
-  `
+  public svg = twitch.logo
 
   public isExperimental = false
 

diff --git a/packages/providers/src/youtube.ts b/packages/providers/src/youtube.ts
@@ -7,15 +7,7 @@ import { ClipProvider } from './types'
 export class YouTubeProvider implements IClipProvider {
   public name = ClipProvider.YOUTUBE
 
-  public svg = `
-    <svg viewBox="0 0 28.57 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
-      <title>YouTube</title>
-      <g>
-        <path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" fill="#FF0000"></path>
-        <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="white"></path>
-      </g>
-    </svg>
-  `
+  public svg = youtube.logo
 
   public isExperimental = true
 

diff --git a/packages/services/src/kick/index.ts b/packages/services/src/kick/index.ts
@@ -41,6 +41,19 @@ export interface KickClip {
   channel: KickChannel
 }
 
+export const logo = `
+  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1539.02 1539.02">
+    <title>Kick</title>
+    <defs>
+      <style>
+        .cls-1{fill:#53fc19;fill-rule:evenodd;}
+      </style>
+    </defs>
+    <rect width="1539.02" height="1539.02"/>
+    <polygon class="cls-1" points="278.26 216.86 646.7 216.86 646.7 462.48 769.51 462.48 769.51 339.67 892.32 339.67 892.32 216.86 1260.75 216.86 1260.75 585.29 1137.94 585.29 1137.94 708.1 1015.13 708.1 1015.13 830.91 1137.94 830.91 1137.94 953.72 1260.75 953.72 1260.75 1322.16 892.32 1322.16 892.32 1199.35 769.51 1199.35 769.51 1076.54 646.7 1076.54 646.7 1322.16 278.26 1322.16 278.26 216.86"/>
+  </svg>
+`
+
 const ALLOWED_KICK_CLIP_HOSTS = ['kick.com', 'www.kick.com']
 const KICK_CLIP_PARAM_NAME = 'clip'
 
@@ -75,6 +88,7 @@ export function getClipIdFromUrl(url: string): string | undefined {
 }
 
 export default {
+  logo,
   getClip,
   getClipIdFromUrl
 }
diff --git a/packages/services/src/twitch/index.ts b/packages/services/src/twitch/index.ts
@@ -6,7 +6,28 @@ export * from './types'
 
 export { default as TwitchChat } from './chat'
 
+export const logo = `
+  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
+    <title>Twitch</title>
+    <style type="text/css">
+      .st0{fill:#FFFFFF;}
+      .st1{fill:#9146FF;}
+    </style>
+    <g>
+      <polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 	"/>
+      <g>
+        <g id="Layer_1-2">
+          <path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600 V1300z"/>
+          <rect x="1700" y="550" class="st1" width="200" height="600"/>
+          <rect x="1150" y="550" class="st1" width="200" height="600"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+`
+
 export default {
+  logo,
   ...api,
   ...auth,
   ...utils

diff --git a/packages/services/src/youtube/index.ts b/packages/services/src/youtube/index.ts
@@ -47,6 +47,16 @@ export interface YouTubeClip {
   end: number
 }
 
+export const logo = `
+  <svg viewBox="0 0 28.57 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+    <title>YouTube</title>
+    <g>
+      <path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" fill="#FF0000"></path>
+      <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="white"></path>
+    </g>
+  </svg>
+`
+
 const ALLOWED_YOUTUBE_CLIP_HOSTS = ['youtube.com', 'www.youtube.com']
 const YOUTUBE_CLIP_SUFFIX = '/clip/'
 
@@ -107,6 +117,7 @@ export function getClipIdFromUrl(url: string): string | undefined {
 }
 
 export default {
+  logo,
   getClip,
   getClipIdFromUrl
 }