Merge pull request #82 from danestves/v2

feat: get types to pass params for iframe

package.json

@@ -16,7 +16,7 @@
     "url": "git+https://github.com/danestves/react-youtube-lite.git"
   },
   "license": "MIT",
-  "author": "Daniel Esteves <[email protected]> (@danestves)",
+  "author": "Daniel Esteves <[email protected]> (https://danestves.com)",
   "main": "dist/index.js",
   "module": "dist/react-youtube-lite.mjs",
   "source": "src/index.ts",
@@ -30,7 +30,7 @@
   "scripts": {
     "prebuild": "npm run clean",
     "build": "NODE_ENV=production parcel build",
-    "clean": "rimraf .parcel-cache dist",
+    "clean": "rimraf .parcel-cache dist types",
     "prestart": "npm run clean",
     "start": "parcel watch",
     "test": "jest"
@@ -44,6 +44,7 @@
     "@parcel/packager-ts": "^2.3.2",
     "@parcel/transformer-typescript-types": "^2.3.2",
     "@types/react": "^17.0.39",
+    "@types/youtube-player": "^5.5.5",
     "parcel": "^2.3.2",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",

src/components/react-youtube-lite/react-youtube-lite.tsx

@@ -6,6 +6,7 @@ import { StyledAspectRatio, StyledYouTubeIcon } from './react-youtube-lite.style
 import { addPrefetch } from '../../utils/add-prefetch';
 import { getYouTubeId } from '../../utils/get-youtube-id';
 import type { ReactYouTubeLiteProps } from '../../types';
+import { getSrcSearch } from '../../utils/get-src-search';
 
 function RenderReactYouTubeLite(
   {
@@ -15,6 +16,7 @@ function RenderReactYouTubeLite(
     customThumbnail,
     iframeProps,
     noCookie,
+    playerParameters,
     playlist,
     poster,
     title,
@@ -29,9 +31,7 @@ function RenderReactYouTubeLite(
   let posterUrl =
     typeof customThumbnail === 'string' ? customThumbnail : `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`;
   let youtubeUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
-  let iframeSrc = !playlist
-    ? `${youtubeUrl}/embed/${videoId}?autoplay=1`
-    : `${youtubeUrl}/embed/videoseries?list=${videoId}`;
+  let iframeSrc = !playlist ? `${youtubeUrl}/embed/${videoId}` : `${youtubeUrl}/embed/videoseries`;
 
   const warmConnections = () => {
     if (preconnected) return;
@@ -73,7 +73,11 @@ function RenderReactYouTubeLite(
           width={560}
           height={315}
           title={title}
-          src={iframeSrc}
+          src={getSrcSearch({
+            url: iframeSrc,
+            videoId,
+            isPlaylist: playlist,
+          })}
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
           {...iframeProps}

src/types/index.ts

@@ -1,6 +1,7 @@
 // Dependencies
 import type * as React from 'react';
 import type * as Stitches from '@stitches/react';
+import type * as YouTube from 'youtube-player/dist/types';
 
 interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
@@ -33,6 +34,17 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
    * @default false
    */
   noCookie?: boolean;
+  /**
+   * By appending parameters to the IFrame URL, you can customize the playback experience in your application.
+   * For example, you can automatically play videos using the [`autoplay`](https://developers.google.com/youtube/player_parameters#autoplay)
+   * parameter or cause a video to play repeatedly using the [`loop`](https://developers.google.com/youtube/player_parameters#loop) parameter.
+   * You can also use the [`enablejsapi`](https://developers.google.com/youtube/player_parameters#enablejsapi) parameter to enable the player
+   * to be controlled via the [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference).
+   *
+   * List of available parameters:
+   * https://developers.google.com/youtube/player_parameters#Parameters
+   */
+  playerParameters?: YouTube.Options['playerVars'];
   /**
    * If the video URL contains a playlist or not
    *

src/utils/get-src-search.ts

@@ -0,0 +1,29 @@
+// Dependencies
+import type * as YouTube from 'youtube-player/dist/types';
+
+type GetSrcSearchProps = {
+  isPlaylist?: boolean;
+  url: string;
+  videoId: string;
+  opts?: YouTube.Options['playerVars'];
+};
+
+function getSrcSearch({ url, videoId, isPlaylist, opts }: GetSrcSearchProps) {
+  let options: YouTube.Options['playerVars'] = {
+    ...(!isPlaylist
+      ? {
+          autoplay: 1,
+        }
+      : {
+          list: videoId,
+        }),
+    ...opts,
+  };
+  // @ts-ignore: we can use numbers on the values
+  let params = new URLSearchParams(options);
+
+  return `${url}?${params.toString()}`;
+}
+
+export type { GetSrcSearchProps };
+export { getSrcSearch };