react-chromecast-caf 0.0.1

package/README.md

@@ -0,0 +1,26 @@
+# Use Chromecast sender [![npm](https://img.shields.io/npm/v/use-chromecast-caf-sender.svg)](https://www.npmjs.com/package/use-chromecast-caf-sender) ![npm type definitions](https://img.shields.io/npm/types/use-chromecast-caf-sender.svg)
+
+React hook to use the [Chromecast sender SDK](https://developers.google.com/cast/docs/web_sender/integrate) in your project.
+
+## Installation
+
+```bash
+npm install use-chromecast-caf-sender
+```
+
+## How to use
+
+```jsx
+import { useChromecastSender } from 'use-chromecast-caf-sender'
+
+const Component = () => {
+	const { cast } = useChromecastSender()
+
+	return <div>{cast === null ? 'Loading' : 'Cast sender sdk is loaded'}</div>
+}
+```
+
+## Development
+
+- Install dependencies: `npm ci`
+- Build the package: `npm run dev`

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useChromecastCafReceiver';
+export * from './useChromecastCafSender';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { useChromecastCafReceiver } from './useChromecastCafReceiver.js';
+export { useChromecastCafSender } from './useChromecastCafSender.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/useChromecastCafReceiver.d.ts

@@ -0,0 +1,6 @@
+import { type Cast } from 'cast-receiver-module';
+type Receiver = {
+    cast: Cast;
+};
+export declare const useChromecastCafReceiver: () => Receiver | null;
+export {};

package/dist/useChromecastCafReceiver.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+const load = (() => {
+    let promise = null;
+    return () => {
+        if (promise === null) {
+            promise = new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.src =
+                    'https://www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js';
+                document.body.appendChild(script);
+                const loop = () => {
+                    if ('cast' in window && 'framework' in cast) {
+                        resolve({
+                            cast,
+                        });
+                        return;
+                    }
+                    setTimeout(() => {
+                        loop();
+                    }, 100);
+                };
+                loop();
+            });
+        }
+        return promise;
+    };
+})();
+const useChromecastCafReceiver = () => {
+    const [receiver, setReceiver] = useState(null);
+    useEffect(() => {
+        load().then((sender) => {
+            setReceiver(sender);
+        });
+    }, []);
+    return receiver;
+};
+
+export { useChromecastCafReceiver };
+//# sourceMappingURL=useChromecastCafReceiver.js.map

package/dist/useChromecastCafReceiver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChromecastCafReceiver.js","sources":["../src/useChromecastCafReceiver.ts"],"sourcesContent":["import { type Cast } from 'cast-receiver-module'\nimport { useEffect, useState } from 'react'\n\ntype Receiver = {\n\tcast: Cast\n}\n\nconst load = (() => {\n\tlet promise: Promise<Receiver> | null = null\n\n\treturn () => {\n\t\tif (promise === null) {\n\t\t\tpromise = new Promise((resolve) => {\n\t\t\t\tconst script = document.createElement('script')\n\t\t\t\tscript.src =\n\t\t\t\t\t'https://www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js'\n\t\t\t\tdocument.body.appendChild(script)\n\n\t\t\t\tconst loop = () => {\n\t\t\t\t\tif ('cast' in window && 'framework' in cast) {\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tcast,\n\t\t\t\t\t\t})\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tloop()\n\t\t\t\t\t}, 100)\n\t\t\t\t}\n\t\t\t\tloop()\n\t\t\t})\n\t\t}\n\t\treturn promise\n\t}\n})()\n\nexport const useChromecastCafReceiver = () => {\n\tconst [receiver, setReceiver] = useState<Receiver | null>(null)\n\n\tuseEffect(() => {\n\t\tload().then((sender) => {\n\t\t\tsetReceiver(sender)\n\t\t})\n\t}, [])\n\n\treturn receiver\n}\n"],"names":[],"mappings":";;AAOA,MAAM,IAAI,GAAG,CAAC,MAAK;IAClB,IAAI,OAAO,GAA6B,IAAI;AAE5C,IAAA,OAAO,MAAK;AACX,QAAA,IAAI,OAAO,KAAK,IAAI,EAAE;AACrB,YAAA,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;gBACjC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,gBAAA,MAAM,CAAC,GAAG;AACT,oBAAA,kFAAkF;AACnF,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;gBAEjC,MAAM,IAAI,GAAG,MAAK;oBACjB,IAAI,MAAM,IAAI,MAAM,IAAI,WAAW,IAAI,IAAI,EAAE;AAC5C,wBAAA,OAAO,CAAC;4BACP,IAAI;AACJ,yBAAA,CAAC;wBACF;oBACD;oBACA,UAAU,CAAC,MAAK;AACf,wBAAA,IAAI,EAAE;oBACP,CAAC,EAAE,GAAG,CAAC;AACR,gBAAA,CAAC;AACD,gBAAA,IAAI,EAAE;AACP,YAAA,CAAC,CAAC;QACH;AACA,QAAA,OAAO,OAAO;AACf,IAAA,CAAC;AACF,CAAC,GAAG;AAEG,MAAM,wBAAwB,GAAG,MAAK;IAC5C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC;IAE/D,SAAS,CAAC,MAAK;AACd,QAAA,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;YACtB,WAAW,CAAC,MAAM,CAAC;AACpB,QAAA,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,QAAQ;AAChB;;;;"}

package/dist/useChromecastCafSender.d.ts

@@ -0,0 +1,7 @@
+import type { Cast, Chrome } from 'cast-sender-module';
+type Sender = {
+    chrome: Chrome;
+    cast: Cast;
+};
+export declare const useChromecastCafSender: () => Sender | null;
+export {};

package/dist/useChromecastCafSender.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+const load = (() => {
+    let promise = null;
+    return () => {
+        if (promise === null) {
+            promise = new Promise((resolve) => {
+                const script = document.createElement('script');
+                script.src =
+                    'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
+                window.__onGCastApiAvailable = (isAvailable) => {
+                    if (isAvailable) {
+                        resolve({
+                            chrome,
+                            cast,
+                        });
+                    }
+                };
+                document.body.appendChild(script);
+            });
+        }
+        return promise;
+    };
+})();
+const useChromecastCafSender = () => {
+    const [sender, setSender] = useState(null);
+    useEffect(() => {
+        load().then((sender) => {
+            setSender(sender);
+        });
+    }, []);
+    return sender;
+};
+
+export { useChromecastCafSender };
+//# sourceMappingURL=useChromecastCafSender.js.map

package/dist/useChromecastCafSender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChromecastCafSender.js","sources":["../src/useChromecastCafSender.ts"],"sourcesContent":["import type { Cast, Chrome } from 'cast-sender-module'\nimport { useEffect, useState } from 'react'\n\ntype Sender = {\n\tchrome: Chrome\n\tcast: Cast\n}\n\nconst load = (() => {\n\tlet promise: Promise<Sender> | null = null\n\n\treturn () => {\n\t\tif (promise === null) {\n\t\t\tpromise = new Promise((resolve) => {\n\t\t\t\tconst script = document.createElement('script')\n\t\t\t\tscript.src =\n\t\t\t\t\t'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'\n\t\t\t\twindow.__onGCastApiAvailable = (isAvailable) => {\n\t\t\t\t\tif (isAvailable) {\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tchrome,\n\t\t\t\t\t\t\tcast,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tdocument.body.appendChild(script)\n\t\t\t})\n\t\t}\n\t\treturn promise\n\t}\n})()\n\nexport const useChromecastCafSender = () => {\n\tconst [sender, setSender] = useState<Sender | null>(null)\n\n\tuseEffect(() => {\n\t\tload().then((sender) => {\n\t\t\tsetSender(sender)\n\t\t})\n\t}, [])\n\n\treturn sender\n}\n"],"names":[],"mappings":";;AAQA,MAAM,IAAI,GAAG,CAAC,MAAK;IAClB,IAAI,OAAO,GAA2B,IAAI;AAE1C,IAAA,OAAO,MAAK;AACX,QAAA,IAAI,OAAO,KAAK,IAAI,EAAE;AACrB,YAAA,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;gBACjC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,gBAAA,MAAM,CAAC,GAAG;AACT,oBAAA,4EAA4E;AAC7E,gBAAA,MAAM,CAAC,qBAAqB,GAAG,CAAC,WAAW,KAAI;oBAC9C,IAAI,WAAW,EAAE;AAChB,wBAAA,OAAO,CAAC;4BACP,MAAM;4BACN,IAAI;AACJ,yBAAA,CAAC;oBACH;AACD,gBAAA,CAAC;AACD,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;AAClC,YAAA,CAAC,CAAC;QACH;AACA,QAAA,OAAO,OAAO;AACf,IAAA,CAAC;AACF,CAAC,GAAG;AAEG,MAAM,sBAAsB,GAAG,MAAK;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IAEzD,SAAS,CAAC,MAAK;AACd,QAAA,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;YACtB,SAAS,CAAC,MAAM,CAAC;AAClB,QAAA,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,MAAM;AACd;;;;"}

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "react-chromecast-caf",
+	"version": "0.0.1",
+	"description": "React hooks to use the Chromecast sender and receiver SDK in your project.",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"scripts": {
+		"start": "rollup -c -w",
+		"dev": "npm start",
+		"build": "rollup -c",
+		"prepare": "npm run build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/FilipChalupa/react-chromecast-caf.git"
+	},
+	"keywords": [
+		"chromecast",
+		"sender",
+		"receiver",
+		"typescript",
+		"react"
+	],
+	"author": {
+		"name": "Filip Chalupa",
+		"email": "chalupa.filip@gmail.com",
+		"url": "https://www.npmjs.com/~onset"
+	},
+	"license": "ISC",
+	"peerDependencies": {
+		"react": "18 || 19"
+	},
+	"files": [
+		"/dist/"
+	],
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.8",
+		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@types/react": "^18.0.26",
+		"react": "^18.2.0",
+		"rollup": "^4.59.0",
+		"rollup-plugin-delete": "^3.0.2",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"@types/chromecast-caf-receiver": "^6.0.25",
+		"@types/chromecast-caf-sender": "^1.0.11",
+		"tslib": "^2.8.1"
+	}
+}