Merge pull request #428 from joaopalmeiro/feat/add-support-relive

Closes #427

Author: spences10

src/lib/components/relive.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import GeneralObserver from './general-observer.svelte'
+
+  export let reliveId: string = ''
+  export let width: string = '100%'
+
+  const defaultMargin: number = 2
+</script>
+
+<GeneralObserver>
+  <div
+    style={`
+      position: relative;
+      width: ${width};
+      aspect-ratio: 1 / 0.7825;
+      overflow: hidden;
+    `}
+  >
+    <iframe
+      title={`relive-${reliveId}`}
+      src={`https://www.relive.cc/view/${reliveId}/widget`}
+      scrolling="no"
+      frameborder="0"
+      allowfullscreen
+      style={`
+        position: absolute;
+        top: -${defaultMargin}px;
+        left: -${defaultMargin}px;
+        width: calc(100% + ${defaultMargin * 2}px);
+        height: calc(100% + ${defaultMargin * 2}px);
+      `}
+    />
+  </div>
+</GeneralObserver>

src/lib/components/relive.test.ts

@@ -0,0 +1,18 @@
+import Relive from '$lib/components/relive.svelte'
+import { cleanup, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+globalThis.IntersectionObserver = vi.fn(() => ({
+  observe: () => null,
+  unobserve: () => null,
+  disconnect: () => null,
+})) as unknown as typeof globalThis.IntersectionObserver
+
+describe('Relive', () => {
+  afterEach(() => cleanup())
+
+  it('mounts', () => {
+    const { container } = render(Relive)
+    expect(container).toBeTruthy()
+  })
+})

src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as Deezer } from './components/deezer.svelte'
 export { default as GeneralObserver } from './components/general-observer.svelte'
 export { default as GenericEmbed } from './components/generic-embed.svelte'
 export { default as Gist } from './components/gist.svelte'
+export { default as Relive } from './components/relive.svelte'
 export { default as SimpleCast } from './components/simple-cast.svelte'
 export { default as Slides } from './components/slides.svelte'
 export { default as SoundCloud } from './components/sound-cloud.svelte'
@@ -15,4 +16,3 @@ export { default as Tweet } from './components/tweet.svelte'
 export { default as Vimeo } from './components/vimeo.svelte'
 export { default as YouTube } from './components/you-tube.svelte'
 export { default as Zencastr } from './components/zencastr.svelte'
-

src/routes/+page.md

@@ -6,6 +6,7 @@
     Deezer,
     GenericEmbed,
     Gist,
+    Relive,
     SimpleCast,
     Slides,
     SoundCloud,
@@ -70,6 +71,7 @@ or open a [PR](https://github.com/spences10/sveltekit-embed/pulls).
 - [Deezer](#deezer)
 - [GenericEmbed](#genericembed)
 - [Gist](#gist)
+- [Relive](#relive)
 - [SimpleCast](#simplecast)
 - [Slides](#slides)
 - [SoundCloud](#soundcloud)
@@ -252,6 +254,25 @@ Output:
 
 <Gist gistUri="Ennoriel/8c89dc3615292f0a40b04f4f876afd77" />
 
+## Relive
+
+Props:
+
+```ts
+reliveId: string = ''
+width: string = '100%'
+```
+
+Usage:
+
+```html
+<Relive reliveId="vAOZokmYVo6" />
+```
+
+Output:
+
+<Relive reliveId="vAOZokmYVo6" />
+
 ## SimpleCast
 
 Props: