react-chromecast-caf 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -12
- package/dist/types/cast-shim.d.ts +10 -0
- package/dist/useChromecastCafReceiver.d.ts +4 -2
- package/dist/useChromecastCafReceiver.js +3 -1
- package/dist/useChromecastCafReceiver.js.map +1 -1
- package/dist/useChromecastCafSender.d.ts +5 -2
- package/dist/useChromecastCafSender.js +4 -1
- package/dist/useChromecastCafSender.js.map +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,26 +1,88 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-chromecast-caf ⚛️📺
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/react-chromecast-caf)
|
|
4
|
+
|
|
5
|
+
[](https://opensource.org/licenses/ISC)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
A collection of React hooks designed to simplify integration with the Google Chromecast CAF (Cast Application Framework) Sender and Receiver SDKs. Build Chromecast-enabled web applications with ease, leveraging React's declarative power.
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
- **`useChromecastCafSender`**: Seamlessly integrate the Chromecast Web Sender SDK into your React components.
|
|
12
|
+
- **`useChromecastCafReceiver`**: Easily develop custom Chromecast Receiver applications using the Web Receiver SDK.
|
|
13
|
+
- **TypeScript Support**: Fully typed for a robust development experience.
|
|
14
|
+
|
|
15
|
+
## 🚀 Installation
|
|
16
|
+
|
|
17
|
+
Install the package using npm:
|
|
6
18
|
|
|
7
19
|
```bash
|
|
8
|
-
npm install
|
|
20
|
+
npm install react-chromecast-caf
|
|
9
21
|
```
|
|
10
22
|
|
|
11
|
-
## How to
|
|
23
|
+
## 📖 How to Use
|
|
24
|
+
|
|
25
|
+
### Chromecast Sender
|
|
26
|
+
|
|
27
|
+
The `useChromecastCafSender` hook loads the Chromecast Web Sender SDK and provides access to the `cast` object once it's ready.
|
|
12
28
|
|
|
13
29
|
```jsx
|
|
14
|
-
import
|
|
30
|
+
import React from 'react'
|
|
31
|
+
import { useChromecastCafSender } from 'react-chromecast-caf'
|
|
15
32
|
|
|
16
|
-
const
|
|
17
|
-
const { cast } =
|
|
33
|
+
const SenderComponent = () => {
|
|
34
|
+
const { cast, chrome } = useChromecastCafSender()
|
|
18
35
|
|
|
19
|
-
|
|
36
|
+
if (!cast) {
|
|
37
|
+
return <div>Loading Chromecast Sender SDK...</div>
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div>
|
|
42
|
+
<h1>Chromecast Sender Example</h1>
|
|
43
|
+
<p>Chromecast Sender SDK is loaded.</p>
|
|
44
|
+
{/* You can now use the 'cast' object */}
|
|
45
|
+
</div>
|
|
46
|
+
)
|
|
20
47
|
}
|
|
21
48
|
```
|
|
22
49
|
|
|
23
|
-
|
|
50
|
+
### Chromecast Receiver
|
|
51
|
+
|
|
52
|
+
The `useChromecastCafReceiver` hook initializes the Chromecast Web Receiver SDK.
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
55
|
+
import React from 'react'
|
|
56
|
+
import { useChromecastCafReceiver } from 'react-chromecast-caf'
|
|
57
|
+
|
|
58
|
+
const ReceiverComponent = () => {
|
|
59
|
+
const { cast } = useChromecastCafReceiver()
|
|
60
|
+
|
|
61
|
+
if (!cast) {
|
|
62
|
+
return <div>Loading Chromecast Receiver SDK...</div>
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<div>
|
|
67
|
+
<h1>Chromecast Receiver Example</h1>
|
|
68
|
+
<p>Chromecast Receiver SDK is loaded.</p>
|
|
69
|
+
{/* You can now use the 'cast' object to handle receiver events */}
|
|
70
|
+
</div>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## ⚙️ API
|
|
76
|
+
|
|
77
|
+
### `useChromecastCafSender(): { chrome: Chrome | null, cast: Cast | null }`
|
|
78
|
+
|
|
79
|
+
A React hook that loads the Chromecast Web Sender SDK.
|
|
80
|
+
|
|
81
|
+
- **`chrome`**: The `chrome` object from the SDK, or `null` otherwise.
|
|
82
|
+
- **`cast`**: The `cast` object from the SDK, or `null` otherwise.
|
|
83
|
+
|
|
84
|
+
### `useChromecastCafReceiver(): { cast: Cast | null }`
|
|
85
|
+
|
|
86
|
+
A React hook that initializes the Chromecast Web Receiver SDK.
|
|
24
87
|
|
|
25
|
-
-
|
|
26
|
-
- Build the package: `npm run dev`
|
|
88
|
+
- **`cast`**: The `cast` object from the SDK, or `null` otherwise.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare module 'chromecast-caf-receiver-module' {
|
|
2
|
+
import '@types/chromecast-caf-receiver'
|
|
3
|
+
export type Cast = typeof window.cast
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
declare module 'chromecast-caf-sender-module' {
|
|
7
|
+
import '@types/chromecast-caf-sender'
|
|
8
|
+
export type Cast = typeof window.cast
|
|
9
|
+
export type Chrome = typeof window.chrome
|
|
10
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { type Cast } from '
|
|
1
|
+
import { type Cast } from 'chromecast-caf-receiver-module';
|
|
2
2
|
type Receiver = {
|
|
3
3
|
cast: Cast;
|
|
4
4
|
};
|
|
5
|
-
export declare const useChromecastCafReceiver: () => Receiver |
|
|
5
|
+
export declare const useChromecastCafReceiver: () => Receiver | {
|
|
6
|
+
cast: null;
|
|
7
|
+
};
|
|
6
8
|
export {};
|
|
@@ -27,7 +27,9 @@ const load = (() => {
|
|
|
27
27
|
};
|
|
28
28
|
})();
|
|
29
29
|
const useChromecastCafReceiver = () => {
|
|
30
|
-
const [receiver, setReceiver] = useState(
|
|
30
|
+
const [receiver, setReceiver] = useState({
|
|
31
|
+
cast: null,
|
|
32
|
+
});
|
|
31
33
|
useEffect(() => {
|
|
32
34
|
load().then((sender) => {
|
|
33
35
|
setReceiver(sender);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChromecastCafReceiver.js","sources":["../src/useChromecastCafReceiver.ts"],"sourcesContent":["import { type Cast } from '
|
|
1
|
+
{"version":3,"file":"useChromecastCafReceiver.js","sources":["../src/useChromecastCafReceiver.ts"],"sourcesContent":["import { type Cast } from 'chromecast-caf-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 | { cast: null }>({\n\t\tcast: null,\n\t})\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;AAC5C,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA4B;AACnE,QAAA,IAAI,EAAE,IAAI;AACV,KAAA,CAAC;IAEF,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;;;;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import type { Cast, Chrome } from '
|
|
1
|
+
import type { Cast, Chrome } from 'chromecast-caf-sender-module';
|
|
2
2
|
type Sender = {
|
|
3
3
|
chrome: Chrome;
|
|
4
4
|
cast: Cast;
|
|
5
5
|
};
|
|
6
|
-
export declare const useChromecastCafSender: () => Sender |
|
|
6
|
+
export declare const useChromecastCafSender: () => Sender | {
|
|
7
|
+
chrome: null;
|
|
8
|
+
cast: null;
|
|
9
|
+
};
|
|
7
10
|
export {};
|
|
@@ -23,7 +23,10 @@ const load = (() => {
|
|
|
23
23
|
};
|
|
24
24
|
})();
|
|
25
25
|
const useChromecastCafSender = () => {
|
|
26
|
-
const [sender, setSender] = useState(
|
|
26
|
+
const [sender, setSender] = useState({
|
|
27
|
+
chrome: null,
|
|
28
|
+
cast: null,
|
|
29
|
+
});
|
|
27
30
|
useEffect(() => {
|
|
28
31
|
load().then((sender) => {
|
|
29
32
|
setSender(sender);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChromecastCafSender.js","sources":["../src/useChromecastCafSender.ts"],"sourcesContent":["import type { Cast, Chrome } from '
|
|
1
|
+
{"version":3,"file":"useChromecastCafSender.js","sources":["../src/useChromecastCafSender.ts"],"sourcesContent":["import type { Cast, Chrome } from 'chromecast-caf-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<\n\t\t| Sender\n\t\t| {\n\t\t\t\tchrome: null\n\t\t\t\tcast: null\n\t\t }\n\t>({\n\t\tchrome: null,\n\t\tcast: null,\n\t})\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;AAC1C,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAMlC;AACD,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,IAAI,EAAE,IAAI;AACV,KAAA,CAAC;IAEF,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-chromecast-caf",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "React hooks to use the Chromecast sender and receiver SDK in your project.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -46,14 +46,15 @@
|
|
|
46
46
|
"@types/react": "^18.0.26",
|
|
47
47
|
"react": "^18.2.0",
|
|
48
48
|
"rollup": "^4.59.0",
|
|
49
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
49
50
|
"rollup-plugin-delete": "^3.0.2",
|
|
50
51
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
51
52
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
52
|
-
"typescript": "^5.9.3"
|
|
53
|
+
"typescript": "^5.9.3",
|
|
54
|
+
"tslib": "^2.8.1"
|
|
53
55
|
},
|
|
54
56
|
"dependencies": {
|
|
55
57
|
"@types/chromecast-caf-receiver": "^6.0.25",
|
|
56
|
-
"@types/chromecast-caf-sender": "^1.0.11"
|
|
57
|
-
"tslib": "^2.8.1"
|
|
58
|
+
"@types/chromecast-caf-sender": "^1.0.11"
|
|
58
59
|
}
|
|
59
60
|
}
|