@playpilot/tpi 1.1.1 → 1.3.0

package/src/routes/components/Title.svelte

@@ -54,49 +54,53 @@
   <img src={title.medium_poster} alt="" />
 </div>
 
-<style>
+<style lang="scss">
   h1 {
-    margin: 0.5rem 0;
+    margin: margin(0.5) 0;
+    color: var(--playpilot-detail-title-text-color, #fff);
     font-family: var(--playpilot-detail-title-font-family, inherit);
     font-weight: var(--playpilot-detail-title-font-weight, lighter);
-    font-size: var(--playpilot-detail-title-font-size, 1.5rem);
-    color: var(--playpilot-detail-title-text-color, #fff);
-  }
+    font-size: var(--playpilot-detail-title-font-size, margin(1.5));
+    line-height: normal;
+    font-style: var(--playpilot-detail-title-font-style, normal);
 
-  .small h1 {
-    font-size: var(--playpilot-detail-title-font-size-small, 1.125rem);
-  }
+    .small & {
+      font-size: var(--playpilot-detail-title-font-size-small, margin(1.125));
+    }
 
-  .compact h1 {
-    margin-top: 0;
+    .compact & {
+      margin-top: 0;
+    }
   }
 
   .content {
     z-index: 1;
     position: relative;
-    padding: 1rem;
+    padding: margin(1);
     color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
     font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
     font-weight: var(--playpilot-detail-font-weight, normal);
     font-size: var(--playpilot-detail-font-size, 14px);
-  }
+    line-height: normal;
+    font-style: normal;
 
-  .content.small {
-    font-size: var(--playpilot-detail-font-size, 12px);
-    line-height: 1.45;
-    padding-bottom: 0.5rem;
+    &.small {
+      font-size: var(--playpilot-detail-font-size, 12px);
+      line-height: 1.45;
+      padding-bottom: margin(0.5);
+    }
   }
 
   .header {
-    padding: 2rem 0 1rem;
-  }
+    padding: margin(2) 0 margin(1);
 
-  .small .header {
-    padding-top: 1rem;
-  }
+    .small & {
+      padding-top: margin(1);
+    }
 
-  .compact .header {
-    padding: 0 0 1rem;
+    .compact & {
+      padding: 0 0 margin(1);
+    }
   }
 
   .top {
@@ -107,10 +111,10 @@
 
   .poster {
     display: block;
-    width: 4.5rem;
+    width: margin(4.5);
     margin: 0;
     aspect-ratio: 2 / 3;
-    border-radius: var(--playpilot-detail-image-border-radius, 0.5rem);
+    border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
     background: var(--playpilot-detail-image-background, var(--playpilot-content));
     box-shadow: var(--playpilot-detail-image-shadow, var(--playpilot-shadow));
   }
@@ -119,27 +123,27 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.5rem 1rem;
-  }
+    gap: margin(0.5) margin(1);
 
-  .small .info {
-    gap: 0.5rem 0.75rem;
+    .small & {
+      gap: margin(0.5) margin(0.75);
+    }
   }
 
   .imdb {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
-  }
+    gap: margin(0.25);
 
-  .imdb :global(svg) {
-    margin-top: -0.125rem;
-  }
+    :global(svg) {
+      margin-top: margin(-0.125);
 
-  .small .imdb :global(svg) {
-    margin-top: 0;
-    width: 0.75rem;
-    height: 0.75rem;
+      .small & {
+        margin-top: 0;
+        width: margin(0.75);
+        height: margin(0.75);
+      }
+    }
   }
 
   .background {
@@ -147,28 +151,28 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 12rem;
+    height: margin(12);
     overflow: hidden;
     background: var(--playpilot-detail-background, var(--playpilot-lighter));
-  }
 
-  .background::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(to top, var(--playpilot-detail-background, var(--playpilot-light)), transparent 40%);
-  }
-
-  .background img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    margin: 0;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to top, var(--playpilot-detail-background, var(--playpilot-light)), transparent 40%);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      margin: 0;
+    }
   }
 
   .faded {

package/src/tests/lib/linkInjection.test.js

@@ -617,9 +617,10 @@ describe('linkInjection.js', () => {
     it('Should return elements in the same order they were given', () => {
       document.body.innerHTML = `<section>
         <div>
-          <p>Button inside header</p>
+          <p><span><strong>Some first text</strong></span></p>
           <div>
-            <strong>Header inside link</strong>
+            <em>Some empasized</em>
+            <main><p><em><i>Some deeply nested text</i></em></p></main>
             <div>Some text</div>
           </div>
         </div>
@@ -628,9 +629,11 @@ describe('linkInjection.js', () => {
       const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
       const elements = getLinkInjectionElements(parent)
 
-      expect(elements[0].nodeName === 'P')
-      expect(elements[1].nodeName === 'STRONG')
-      expect(elements[2].nodeName === 'DIV')
+      expect(elements).toHaveLength(4)
+      expect(elements[0].nodeName).toBe('STRONG')
+      expect(elements[1].nodeName).toBe('EM')
+      expect(elements[2].nodeName).toBe('I')
+      expect(elements[3].nodeName).toBe('DIV')
     })
   })
 

package/src/tests/lib/playlink.test.js

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import { mergePlaylinks } from '$lib/playlink'
+
+describe('$lib/playlink', () => {
+  describe('mergePlaylinks', () => {
+    it('Should return an array with RENT and BUY categories of the same provider as one entry', () => {
+      /** @type {PlaylinkData[]} */
+      const playlinks = [{
+        sid: '1',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'RENT',
+        },
+      }, {
+        sid: '2',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'BUY',
+        },
+      }]
+
+      expect(mergePlaylinks(playlinks)).toHaveLength(1)
+      expect(mergePlaylinks(playlinks)[0].extra_info.category).toBe('TVOD')
+    })
+
+    it('Should not merge playlinks if they do not share the same name', () => {
+      /** @type {PlaylinkData[]} */
+      const playlinks = [{
+        sid: '1',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'RENT',
+        },
+      }, {
+        sid: '2',
+        name: 'Apple',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'BUY',
+        },
+      }]
+
+      expect(mergePlaylinks(playlinks)).toHaveLength(2)
+    })
+
+    it('Should not merge playlinks if one of the categories is not RENT or BUY', () => {
+      /** @type {PlaylinkData[]} */
+      const playlinks = [{
+        sid: '1',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'RENT',
+        },
+      }, {
+        sid: '2',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'SVOD',
+        },
+      }]
+
+      expect(mergePlaylinks(playlinks)).toHaveLength(2)
+    })
+
+    it('Should return an empty array if given', () => {
+      /** @type {PlaylinkData[]} */
+      const playlinks = []
+      expect(mergePlaylinks(playlinks)).toEqual([])
+    })
+  })
+})

package/src/tests/lib/url.test.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { getFullUrlPath } from '$lib/url'
+
+describe('getFullUrlPath', () => {
+  const originalLocation = window.location
+
+  beforeEach(() => {
+    // @ts-expect-error: we're mocking window.location
+    delete window.location
+
+    // @ts-expect-error
+    window.location = {
+      protocol: 'https:',
+      host: 'example.com',
+      pathname: '/some/path',
+    }
+  })
+
+  afterEach(() => {
+    // @ts-expect-error
+    window.location = originalLocation
+  })
+
+  it('Should return the full URL path including protocol, host and pathname', () => {
+    const result = getFullUrlPath()
+    expect(result).toBe('https://example.com/some/path')
+  })
+
+  it('Should exclude search params', () => {
+    window.location.search = '?ignore=me'
+
+    const result = getFullUrlPath()
+    expect(result).toBe('https://example.com/some/path')
+  })
+})

package/src/tests/routes/components/Editorial/Editor.test.js

@@ -50,15 +50,21 @@ describe('Editor.svelte', () => {
     expect(queryByText('Loading...')).not.toBeTruthy()
   })
 
-  it('Should not show save button in enlarged view if no injections are present', async () => {
+  it('Should not show save button if no injections are present', async () => {
     const { queryByText } = render(Editor, { linkInjections: [], loading: false })
 
     expect(queryByText('Save links')).not.toBeTruthy()
   })
 
-  it('Should show save button in enlarged view if injections are present', async () => {
+  it('Should show save button if injections are present', async () => {
     const { queryByText } = render(Editor, { linkInjections, loading: false })
 
     expect(queryByText('Save links')).toBeTruthy()
   })
+
+  it('Should show empty state if no links are found', async () => {
+    const { queryByText } = render(Editor, { linkInjections: [], loading: false })
+
+    expect(queryByText('No links available', { exact: false })).toBeTruthy()
+  })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -26,6 +26,7 @@ describe('TitleSearch.svelte', () => {
         startOffset: 0,
         endOffset: 0,
       }),
+      anchorNode: container,
     }))
   })
 
@@ -93,6 +94,7 @@ describe('TitleSearch.svelte', () => {
         startOffset: 0,
         endOffset: 0,
       }),
+      anchorNode: container,
     }))
 
     const onsave = vi.fn()
@@ -111,4 +113,53 @@ describe('TitleSearch.svelte', () => {
       title_details: title,
     })
   })
+
+  it('Should not select content if it is outside of given parent', async () => {
+    vi.mocked(searchTitles).mockResolvedValueOnce([title])
+
+    document.body.innerHTML = '<div>Some text <main><p>in a sentence</p></main></div>'
+
+    let container = document.querySelector('div')
+
+    const onsave = vi.fn()
+    const { unmount } = render(TitleSearch, { htmlString: document.body.innerHTML, onsave })
+
+    // @ts-ignore
+    window.getSelection = vi.fn(() => ({
+      toString: () => 'Some text',
+      getRangeAt: () => ({
+        commonAncestorContainer: container,
+        startContainer: container,
+        startOffset: 0,
+        endOffset: 0,
+      }),
+      anchorNode: container,
+    }))
+
+    await fireEvent.click(window)
+
+    expect(searchTitles).not.toHaveBeenCalled()
+
+    unmount()
+
+    container = document.querySelector('p')
+
+    // @ts-ignore
+    window.getSelection = vi.fn(() => ({
+      toString: () => 'in a sentence',
+      getRangeAt: () => ({
+        commonAncestorContainer: container,
+        startContainer: container,
+        startOffset: 0,
+        endOffset: 0,
+      }),
+      anchorNode: container,
+    }))
+
+    ;(render(TitleSearch, { htmlString: document.body.innerHTML, onsave }))
+
+    await fireEvent.click(window)
+
+    await waitFor(() => expect(searchTitles).toHaveBeenCalled())
+  })
 })

package/src/typedefs.js

@@ -26,7 +26,7 @@
  */
 
 /**
- * @typedef {'SVOD' | 'BUY' | 'RENT'} PlaylinkCategory
+ * @typedef {'SVOD' | 'BUY' | 'RENT' | 'TVOD'} PlaylinkCategory
  */
 
 /**

package/svelte.config.js

@@ -1,7 +1,16 @@
 import adapter from '@sveltejs/adapter-auto'
+import { sveltePreprocess  } from 'svelte-preprocess'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  preprocess: sveltePreprocess({
+    scss: {
+      includePaths: ['src'],
+      prependData: `
+        @use "src/lib/scss/_functions.scss" as *;
+      `,
+    },
+  }),
   kit: {
     // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
     // If your environment is not supported, or you settled on a specific environment, switch out the adapter.

package/src/lib/global.css

@@ -1,69 +0,0 @@
-[data-playpilot-injection-key] {
-  position: relative;
-}
-
-[data-playpilot-injection-key].injection-highlight {
-  outline: 0.25rem solid var(--playpilot-primary) !important;
-  outline-offset: 0.5rem !important;
-  border-radius: 0.05rem;
-  scroll-margin: 5rem;
-}
-
-.playpilot-styled-scrollbar {
-  scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
-  scrollbar-width: thin;
-}
-
-.playpilot-styled-scrollbed::-webkit-scrollbar {
-  width: 0.75rem;
-}
-
-.playpilot-styled-scrollbed::-webkit-scrollbar-track {
-  background: var(--playpilot-light);
-}
-
-.playpilot-styled-scrollbed::-webkit-scrollbar-thumb {
-  border: 2px solid var(--playpilot-light);
-  border-radius: 1rem;
-  background: var(--playpilot-lighter)
-}
-
-.playpilot-styled-scrollbed::-webkit-scrollbar-thumb:hover {
-  background: var(--playpilot-content-light);
-}
-
-.playpilot-styled-scrollbed::-webkit-scrollbar-thumb:active {
-  background: var(--playpilot-text-color-alt);
-}
-
-/*
-  Styling for individual CSS variables, with a selector for each variable.
-  This is very verbose, but necessary in order to only use the CSS variable when they are actually set.
-*/
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-font-weight"] {
-  font-weight: var(--playpilot-injection-font-weight);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-text-color"] {
-  color: var(--playpilot-injection-text-color);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-text-color-hover"]:hover {
-  color: var(--playpilot-injection-text-color-hover);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-text-decoration"] {
-  text-decoration: var(--playpilot-injection-text-decoration);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-text-decoration-hover"]:hover {
-  text-decoration: var(--playpilot-injection-text-decoration-hover);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-background-color"] {
-  background-color: var(--playpilot-injection-background-color);
-}
-
-[data-playpilot-injection-key][data-used-css-variables*="--playpilot-injection-background-color-hover"]:hover {
-  background-color: var(--playpilot-injection-background-color-hover);
-}