feat: add parameters prop (#29)

* feat: add parameters prop

* feat: correct parameters type

* chore(demo): test parameters

* test: fix parameters prop tests

* fix: do not incluide enablejsapi=0 by default

* fix: setInterval types

* docs: provide better parameters prop description

* docs: doing linkable parameters prop in the readme

* docs: remove deprecated messages

Co-authored-by: andrewvasilchuk <[email protected]>

Author: franciscorode

README.md

@@ -139,6 +139,7 @@ The list of available `props` (with their types, default values and descriptions
 [2]: https://developers.google.com/youtube/player_parameters#enablejsapi
 [3]: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
 [4]: https://developers.google.com/youtube/player_parameters#IFrame_Player_API
+[5]: https://developers.google.com/youtube/player_parameters#Parameters
 
 | Property             | Required | Type                                     | Default                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | -------------------- | -------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -155,6 +156,7 @@ The list of available `props` (with their types, default values and descriptions
 | `enablejsapi`        | `false`  | `boolean`                                | `false`                                                                                                                       | Include [`'enablejapi=1'`][2] parameter to the generated `src` attribute of the `<iframe />` element. This will allow you to listen to the `init:player` event as well as access the `YT.Player` instance via the `getPlayerInstance` method. **Make sure** you have injected the proper YouTube [`<script />`](https://developers.google.com/youtube/player_parameters#IFrame_Player_API) tag or passed the `injectPlayerScript` prop |
 | `playerOptions`      | `false`  | `Partial<YT.PlayerOptions>`              | `{}`                                                                                                                          | Options the will be passed to the [`YT.Player`][3] constructor                                                                                                                                                                                                                                                                                                                                                                         |
 | `injectPlayerScript` | `false`  | `boolean`                                | `false`                                                                                                                       | Will auto inject the proper YouTube [`<script />`][4] when `enablejapi` is passed and there is no `window.YT.Player`                                                                                                                                                                                                                                                                                                                   |
+| `parameters`         | `false`  | `YT.Parameters`                          | `{}`                                                                                                                          | [YouTube Parameters][5] that will be injected into the generated `<iframe />` `src` attribute                                                                                                                                                                                                                                                                                                                                          |
 
 ### Events
 

demo/App.ts

@@ -51,6 +51,9 @@ export default Vue.extend({
             src: 'https://www.youtube.com/embed/4JS70KB9GS0',
             aspectRatio: '1:1',
             previewImageSize: 'default',
+            parameters: {
+              start: 32,
+            },
           },
         }),
       ]),

src/VueLazyYoutubeVideo.ts

@@ -76,12 +76,16 @@ export default (Vue as WithRefs<Refs, WithEvents<Events>>).extend({
       type: Boolean,
       default: false,
     },
+    parameters: {
+      type: Object as PropType<YT.PlayerVars>,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       activated: this.autoplay,
       playerInstance: null as YT.Player | null,
-      __interval__: null as NodeJS.Timeout | null,
+      __interval__: null as number | null,
     }
   },
   computed: {
@@ -95,11 +99,15 @@ export default (Vue as WithRefs<Refs, WithEvents<Events>>).extend({
       }
     },
     srcAttribute(): string {
-      const hasQuestionMark =
-        typeof this.src === 'string' && this.src.indexOf('?') !== -1
-      return `${this.src}${hasQuestionMark ? '&' : '?'}autoplay=1${
+      const hasQuestionMark = this.src.indexOf('?') !== -1
+      const src = `${this.src}${hasQuestionMark ? '&' : '?'}autoplay=1${
         this.enablejsapi ? '&enablejsapi=1' : ''
       }`
+
+      return Object.entries(this.parameters).reduce(
+        (acc, [key, value]) => acc + `&${key}=${value}`,
+        src
+      )
     },
     styleObj(): object {
       return {
@@ -179,7 +187,7 @@ export default (Vue as WithRefs<Refs, WithEvents<Events>>).extend({
       script.setAttribute('src', PLAYER_SCRIPT_SRC)
 
       script.onload = () => {
-        this.__interval__ = setInterval(() => {
+        this.__interval__ = window.setInterval(() => {
           this.checkPlayer()
         }, PLAYER_CHECK_MS)
       }

test/index.test.ts

@@ -478,6 +478,37 @@ describe('VueLazyYoutubeVideo', () => {
         })
       })
     })
+
+    describe('parameters', () => {
+      it('should correctly set `parameters` to `src` attribute of the `<iframe />` element', async () => {
+        const parameters = { rel: 0, color: 'white' as const }
+        const wrapper = TestManager.createWrapper({
+          propsData: { parameters },
+        })
+        const iframe = await TestManager.clickAndGetIframe(wrapper)
+        expect(iframe.element.getAttribute('src')).toBe(
+          `${defaultProps.src}?autoplay=1&rel=0&color=white`
+        )
+      })
+
+      it('should be `Object` and have default value', (done) => {
+        const definition = TestManager.getPropDefinition('parameters')
+        expect(definition).toMatchObject({
+          type: Object,
+        })
+        if (typeof definition === 'object' && !Array.isArray(definition)) {
+          const { default: d } = definition
+          if (d && typeof d === 'function') {
+            expect(d()).toMatchObject({})
+            done()
+          } else {
+            done.fail('Invalid prop definition')
+          }
+        } else {
+          done.fail('Invalid prop definition')
+        }
+      })
+    })
   })
 
   describe('events', () => {

types/index.d.ts

@@ -23,4 +23,5 @@ export interface Props {
   enablejsapi?: boolean
   playerOptions?: Partial<YT.PlayerOptions>
   injectPlayerScript?: boolean
+  parameters?: YT.PlayerVars
 }