{"_id":"@4players/odin-communicator","_rev":"4-5ad17a27a02d3fed6a560e932b22d793","name":"@4players/odin-communicator","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@4players/odin-communicator","version":"1.0.0","_id":"@4players/odin-communicator@1.0.0","maintainers":[{"name":"svenpaulsen","email":"info@sven-paulsen.de"},{"name":"pschuster","email":"pschuster@me.com"}],"dist":{"shasum":"d146dbf316b4159c584618f7730a7ead93a378d4","tarball":"https://registry.npmjs.org/@4players/odin-communicator/-/odin-communicator-1.0.0.tgz","fileCount":4,"integrity":"sha512-enPe+wY5iQjjLb+R9/Y87+xUQ0cYFoIGIX9RX79oCNaT9asOz3GA/FSfIB1gx0lt0D7hZ+ljfxvrSbnuK8a73Q==","signatures":[{"sig":"MEYCIQDqa2qNjA/SffQ1HJYeYKknVXcGOQoM5oCb8YfuxvTnFAIhAI/c+/71gFg/gh3/LqmrcmtfhVT4YUh+YZ1c54RsZB19","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4870425},"main":"./dist/odin-communicator.umd.cjs","type":"module","unpkg":"dist/odin-communicator.umd.cjs","module":"./dist/odin-communicator.js","exports":{".":{"import":"./dist/odin-communicator.js","require":"./dist/odin-communicator.umd.cjs"}},"gitHead":"2c896d15e0f38fae66095488cb26dbed561d2a6e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"pschuster","email":"pschuster@me.com"},"jsdelivr":"dist/odin-communicator.umd.cjs","_npmVersion":"10.9.2","description":"ODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"^18.2.0","tslib":"^2.8.1","react-dom":"^18.2.0","@4players/odin":"^1.2.0","@4players/odin-plugin-web":"^1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0","postcss":"^8.4.38","tailwindcss":"^3.4.3","@types/react":"^18.2.66","autoprefixer":"^10.4.19","@types/react-dom":"^18.2.22","@vitejs/plugin-react":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/odin-communicator_1.0.0_1764607388199_0.7463777967589142","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@4players/odin-communicator","version":"1.1.0","_id":"@4players/odin-communicator@1.1.0","maintainers":[{"name":"svenpaulsen","email":"info@sven-paulsen.de"},{"name":"pschuster","email":"pschuster@me.com"}],"dist":{"shasum":"9fa4b96cdd5618b096e5936deee85ebd41d656a5","tarball":"https://registry.npmjs.org/@4players/odin-communicator/-/odin-communicator-1.1.0.tgz","fileCount":4,"integrity":"sha512-RLvQS0offqMMrUbOh2/5hQkhPAz2EflSY5LljibCvOVXFm7rYIV5n5uSTusl5heuGobjVs91ugO4wDnA7o5xMA==","signatures":[{"sig":"MEYCIQCxK2F/eVdkv+FzvQG/DSdRWxzCCrtlgVqatzsUcxeACAIhAM7X8VjtNyzvH1kgDQqqsvCmUqvNKn0fsirrzKGiBC7v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4870818},"main":"./dist/odin-communicator.umd.cjs","type":"module","unpkg":"dist/odin-communicator.umd.cjs","module":"./dist/odin-communicator.js","exports":{".":{"import":"./dist/odin-communicator.js","require":"./dist/odin-communicator.umd.cjs"}},"gitHead":"9558aeb85595cff1ea991324a5c5351af79704b8","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"pschuster","email":"pschuster@me.com"},"jsdelivr":"dist/odin-communicator.umd.cjs","_npmVersion":"10.9.2","description":"ODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"^18.2.0","tslib":"^2.8.1","react-dom":"^18.2.0","@4players/odin":"^1.2.0","@4players/odin-plugin-web":"^1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0","postcss":"^8.4.38","tailwindcss":"^3.4.3","@types/react":"^18.2.66","autoprefixer":"^10.4.19","@types/react-dom":"^18.2.22","@vitejs/plugin-react":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/odin-communicator_1.1.0_1764760437018_0.058189414121575744","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@4players/odin-communicator","version":"1.1.1","_id":"@4players/odin-communicator@1.1.1","maintainers":[{"name":"svenpaulsen","email":"info@sven-paulsen.de"},{"name":"pschuster","email":"pschuster@me.com"}],"dist":{"shasum":"c4d097f5a81b07da70a4f61636e6a4ef0cf98e05","tarball":"https://registry.npmjs.org/@4players/odin-communicator/-/odin-communicator-1.1.1.tgz","fileCount":4,"integrity":"sha512-tMGRl4u5l9/lCqKLsSpeuO4zCP1D7DG/YVreHOL+BeJWVKuiUntGEAfDsul3U0xGRqklXQeErxFVdKCYZym7BQ==","signatures":[{"sig":"MEQCIFanrdULyZPOwbdjKRPib4KqbUgp5iVFXRDyTmIQ4p/tAiA9bPV1ahk4THVfK0SQIdIcddqyfnWRv9bOH3lB4Ft56A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4870532},"main":"./dist/odin-communicator.umd.cjs","type":"module","unpkg":"dist/odin-communicator.umd.cjs","module":"./dist/odin-communicator.js","exports":{".":{"import":"./dist/odin-communicator.js","require":"./dist/odin-communicator.umd.cjs"}},"gitHead":"a6a9eb7db0be46c71a6999e4a39ea6bf7a4fdb5e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"pschuster","email":"pschuster@me.com"},"jsdelivr":"dist/odin-communicator.umd.cjs","_npmVersion":"10.9.2","description":"ODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"^18.2.0","tslib":"^2.8.1","react-dom":"^18.2.0","@4players/odin":"^1.2.0","@4players/odin-plugin-web":"^1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0","postcss":"^8.4.38","tailwindcss":"^3.4.3","@types/react":"^18.2.66","autoprefixer":"^10.4.19","@types/react-dom":"^18.2.22","@vitejs/plugin-react":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/odin-communicator_1.1.1_1764763559097_0.04325308315465337","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-12-01T16:43:08.118Z","modified":"2026-07-23T15:34:47.192Z","1.0.0":"2025-12-01T16:43:08.426Z","1.1.0":"2025-12-03T11:13:57.274Z","1.1.1":"2025-12-03T12:05:59.326Z"},"description":"ODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real","maintainers":[{"email":"info@sven-paulsen.de","name":"svenpaulsen"},{"email":"pschuster@me.com","name":"pschuster"},{"email":"acc@zinomedia.de","name":"zino1337"}],"readme":"# ODIN Communicator\n\nODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real-time.\n\n## Features\n\n- **Real-time Voice Chat**: Crystal clear audio communication.\n- **Room-based**: Users can join different rooms by simply changing the Room ID.\n- **Modern UI**: Built with React and TailwindCSS for a sleek, responsive design.\n- **Visual Feedback**: Audio visualizers and talking indicators.\n- **Easy Integration**: Designed to be easily embedded into existing projects as a standalone widget.\n- **Customizable**: Supports custom color themes to match your branding.\n\n## Prerequisites\n\n- Node.js (v16 or higher recommended)\n- npm (Node Package Manager)\n\n## Installation\n\n1.  Clone the repository:\n    ```bash\n    git clone <repository-url>\n    ```\n2.  Navigate to the project directory:\n    ```bash\n    cd odin-communicator\n    ```\n3.  Install dependencies:\n    ```bash\n    npm install\n    ```\n\n## Building the Widget\n\nTo create the standalone widget file that can be embedded in other websites, run the build command:\n\n```bash\nnpm run build\n```\n\nThis will generate a `dist/` folder containing the `odin-communicator.js` file (and other formats).\n\n## NPM Installation & Usage\n\nYou can install the package via NPM to integrate it into your React, Vue, or other web applications (including Docusaurus).\n\n```bash\nnpm install @4players/odin-communicator\n```\n\n### React / Docusaurus Example\n\n```jsx\nimport React, { useEffect } from \"react\";\nimport { mountOdinCommunicator } from \"@4players/odin-communicator\";\n\nconst VoiceChatWidget = () => {\n  useEffect(() => {\n    // Mount the communicator when the component mounts\n    const unmount = mountOdinCommunicator(\"odin-widget-container\", {\n      apiKey: \"YOUR_API_KEY\",\n      roomId: \"my-room\",\n    });\n\n    // Cleanup when the component unmounts\n    return () => {\n      if (unmount) unmount();\n    };\n  }, []);\n\n  return <div id=\"odin-widget-container\" style={{ height: \"500px\" }}></div>;\n};\n\nexport default VoiceChatWidget;\n```\n\n## Manual Integration (Script Tag)\n\nYou can easily integrate the ODIN Communicator into any HTML page.\n\n1.  **Include the Script**: Import the `mountOdinCommunicator` function from the built file.\n2.  **Create a Container**: Add a `div` element where you want the widget to appear.\n3.  **Initialize**: Call the mount function with your configuration.\n\n### Example\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>My Website</title>\n  </head>\n  <body>\n    <!-- 1. The Container -->\n    <div id=\"odin-widget-container\"></div>\n\n    <!-- 2. The Script -->\n    <script type=\"module\">\n      import { mountOdinCommunicator } from \"./dist/odin-communicator.js\";\n\n      // 3. Mount the widget\n      mountOdinCommunicator(\n        \"odin-widget-container\",\n        {\n          // Configuration\n          apiKey: \"YOUR_ROOMS_API_KEY\",\n          secret: \"YOUR_ROOMS_SECRET\",\n          gateway: \"https://gateway.odin.4players.io\",\n          roomId: \"my-community-room\",\n          title: \"Join Our Voice Chat\", // Optional: Custom title\n          description: \"Connect with other players now!\", // Optional: Custom description\n          connectBtnText: \"Start Chatting\", // Optional: Custom connect button text\n        },\n        {\n          // Optional: Custom Styles\n          colors: {\n            primary: \"#ff00ff\", // Custom primary color\n            secondary: \"#00ffff\", // Custom secondary color\n          },\n        }\n      );\n    </script>\n  </body>\n</html>\n```\n\n## Configuration\n\n### API Key and Secret\n\nYou need an **Rooms API Key** to use this widhet. You can get a free key by creating a Rooms instance at [www.rooms.chat](https://www.rooms.chat).\n\nAfter the Rooms instance is created, you can navigate to the following URL to get your Rooms API-Key: [https://app.netplay-config.4players.de/rooms](https://app.netplay-config.4players.de/rooms)\n\n### Gateway\n\nThe `gateway` determines the ODIN gateway to connect to. It's required for token creation. Make sure you use the same\ngateway as configured in the Rooms instance (when setting it up).\n\n### Room ID\n\nThe `roomId` determines the channel users join. You can set this dynamically to create different rooms for different pages or groups.\n\n### UI Configuration\n\nYou can customize the initial text and appearance displayed in the widget by passing `title`, `description`, `connectBtnText`, and `height` in the configuration object (the second argument).\n\n- **title**: The main heading text (default: \"Join Channel\").\n- **description**: The subtext below the heading (default: \"Experience next-gen voice chat.\").\n- **connectBtnText**: The text displayed on the connect button (default: \"Connect\").\n- **height**: The height of the widget (default: \"500px\").\n\n### Customization Options\n\nThe third argument to `mountOdinCommunicator` allows you to customize the appearance.\n\n```javascript\n{\n    colors: {\n        primary: '#...',    // Main accent color\n        secondary: '#...',  // Secondary accent color\n        background: '#...', // Background color\n        panel: '#...',      // Panel background color\n        red: '#...'         // Error/Hangup color\n    }\n}\n```\n\n## Development\n\nTo run the project locally for development purposes:\n\n```bash\nnpm run dev\n```\n\nThis will start a development server where you can work on the React components directly.\n\n## ODIN Web SDK\n\nThis project is built on top of the ODIN Web SDK. For more deep-dive information on how ODIN works and advanced configuration options, please refer to the official documentation:\n\n[ODIN Web SDK Documentation](https://docs.4players.io/voice/web/)\n","readmeFilename":"README.md"}