From 7b10308f16fdbbd6cf16788faf2a063df13c5433 Mon Sep 17 00:00:00 2001 From: Daniel Esteves Date: Tue, 1 Mar 2022 01:58:53 -0400 Subject: [PATCH] feat: get types to pass params for iframe --- package-lock.json | 13 +++++++++ package.json | 5 ++-- .../react-youtube-lite/react-youtube-lite.tsx | 12 +++++--- src/types/index.ts | 12 ++++++++ src/utils/get-src-search.ts | 29 +++++++++++++++++++ 5 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 src/utils/get-src-search.ts diff --git a/package-lock.json b/package-lock.json index 4174246..9e8c56f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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", @@ -1332,6 +1333,12 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "node_modules/@types/youtube-player": { + "version": "5.5.5", + "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.5.tgz", + "integrity": "sha512-BuasP4ZumO2W/MSrL2eOFD5wG35kBRpkoFSwuCvdwAcjTyJAgMWBodu2KW6jud6o3IE03MoeOSRNHmWyC5LeNA==", + "dev": true + }, "node_modules/abortcontroller-polyfill": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", @@ -3970,6 +3977,12 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "@types/youtube-player": { + "version": "5.5.5", + "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.5.tgz", + "integrity": "sha512-BuasP4ZumO2W/MSrL2eOFD5wG35kBRpkoFSwuCvdwAcjTyJAgMWBodu2KW6jud6o3IE03MoeOSRNHmWyC5LeNA==", + "dev": true + }, "abortcontroller-polyfill": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", diff --git a/package.json b/package.json index cd40c99..57e8ab7 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "url": "git+https://github.com/danestves/react-youtube-lite.git" }, "license": "MIT", - "author": "Daniel Esteves (@danestves)", + "author": "Daniel Esteves (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", diff --git a/src/components/react-youtube-lite/react-youtube-lite.tsx b/src/components/react-youtube-lite/react-youtube-lite.tsx index 7e47d50..bb90815 100644 --- a/src/components/react-youtube-lite/react-youtube-lite.tsx +++ b/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} diff --git a/src/types/index.ts b/src/types/index.ts index 865e980..397796d 100644 --- a/src/types/index.ts +++ b/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 * diff --git a/src/utils/get-src-search.ts b/src/utils/get-src-search.ts new file mode 100644 index 0000000..da3df92 --- /dev/null +++ b/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 };