tiktok-live-api 1.2.15 → 1.2.16

package/bin/demo.mjs

@@ -11,75 +11,82 @@ import path from 'path';
 const REACT_TEMPLATE = [
   '"use client";',
   "import React, { useEffect, useState, useRef } from 'react';",
-  "import { TikTokLive } from 'tiktok-live-api';",
   "",
   "export default function TikTokLiveComponent() {",
   "  const [events, setEvents] = useState([]);",
-  "  const [username, setUsername] = useState('gbnews');",
-  "  const [apiKey, setApiKey] = useState('demo_tiktokliveapi_public_2026');",
   "  const [inputUsername, setInputUsername] = useState('gbnews');",
+  "  const [apiKey, setApiKey] = useState('demo_tiktokliveapi_public_2026');",
   "  const [connected, setConnected] = useState(false);",
-  "  const clientRef = useRef(null);",
+  "  const wsRef = useRef(null);",
   "",
-  "  useEffect(() => {",
-  "    if (!username) return;",
-  "    if (clientRef.current) { clientRef.current.disconnect(); }",
+  "  function addEvent(str) {",
+  "    setEvents(prev => [...prev.slice(-50), str]);",
+  "  }",
+  "",
+  "  function connectStream(e) {",
+  "    if (e) e.preventDefault();",
+  "    if (wsRef.current) { wsRef.current.close(); wsRef.current = null; }",
   "    setEvents([]);",
   "    setConnected(false);",
-  "    ",
-  "    const client = new TikTokLive(username, { apiKey });",
-  "    clientRef.current = client;",
-  "    ",
-  "    client.on('chat', (e) => setEvents(prev => [...prev.slice(-40), \"💬 \" + e.user.uniqueId + \": \" + e.comment]));",
-  "    client.on('gift', (e) => setEvents(prev => [...prev.slice(-40), \"🎁 \" + e.user.uniqueId + \" sent \" + e.giftName]));",
-  "    client.on('member', (e) => setEvents(prev => [...prev.slice(-40), \"👋 \" + e.user.uniqueId + \" joined\"]));",
-  "    client.on('like', (e) => setEvents(prev => [...prev.slice(-40), \"❤️ \" + e.user.uniqueId + \" liked\"]));",
-  "    client.on('connected', () => setConnected(true));",
-  "    client.on('disconnected', () => setConnected(false));",
-  "    ",
-  "    client.connect().catch(() => setConnected(false));",
-  "    ",
-  "    return () => { if (clientRef.current) { clientRef.current.disconnect(); } };",
-  "  }, [username, apiKey]);",
+  "    const user = (inputUsername || '').replace(/^@/, '');",
+  "    if (!user) return;",
+  "    try {",
+  "      const ws = new WebSocket('wss://api.tik.tools?uniqueId=' + user + '&apiKey=' + apiKey);",
+  "      wsRef.current = ws;",
+  "      ws.onopen = () => { setConnected(true); addEvent('Connected to @' + user); };",
+  "      ws.onclose = () => { setConnected(false); wsRef.current = null; };",
+  "      ws.onerror = () => { addEvent('WebSocket error'); };",
+  "      ws.onmessage = (evt) => {",
+  "        try {",
+  "          const msg = JSON.parse(evt.data);",
+  "          const t = msg.event || '';",
+  "          const d = msg.data || {};",
+  "          const u = d.user ? d.user.uniqueId : '';",
+  "          if (t === 'chat') addEvent('[chat] ' + u + ': ' + d.comment);",
+  "          else if (t === 'gift') addEvent('[gift] ' + u + ' sent ' + (d.giftName || 'a gift'));",
+  "          else if (t === 'like') addEvent('[like] ' + u + ' liked');",
+  "          else if (t === 'member') addEvent('[join] ' + u + ' joined');",
+  "          else if (t === 'roomUserSeq') addEvent('[viewers] ' + (d.viewerCount || 0));",
+  "        } catch (err) {}",
+  "      };",
+  "    } catch (err) { addEvent('Connection failed: ' + err.message); }",
+  "  }",
   "",
-  "  const handleConnect = (e) => {",
-  "    e.preventDefault();",
-  "    setUsername(inputUsername);",
-  "  };",
+  "  useEffect(() => { return () => { if (wsRef.current) wsRef.current.close(); }; }, []);",
   "",
   "  return (",
   "    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 600, margin: '40px auto', border: '1px solid #e5e7eb', borderRadius: '12px', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)', background: '#fff' }}>",
   "      <div style={{ padding: '24px', borderBottom: '1px solid #e5e7eb' }}>",
-  "        <h2 style={{ margin: '0 0 8px 0', fontSize: '1.5rem', fontWeight: 600 }}>TikTok Live SDK</h2>",
-  "        <p style={{ margin: 0, fontSize: '0.875rem', color: '#6b7280' }}>",
-  "          Get your own API key and unlock unlimited connections at <a href=\"https://tik.tools\" target=\"_blank\" style={{ color: '#3b82f6', textDecoration: 'none' }}>tik.tools</a>",
+  "        <h2 style={{ margin: '0 0 8px 0', fontSize: '1.5rem', fontWeight: 700, color: '#111827' }}>TikTok Live SDK</h2>",
+  "        <p style={{ margin: 0, fontSize: '0.875rem', color: '#4b5563' }}>",
+  '          Get your own API key at <a href="https://tik.tools" target="_blank" style={{ color: \'#3b82f6\', textDecoration: \'none\' }}>tik.tools</a>',
   "        </p>",
   "      </div>",
   "      <div style={{ padding: '24px' }}>",
-  "        <form onSubmit={handleConnect} style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '24px' }}>",
+  "        <form onSubmit={connectStream} style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '24px' }}>",
   "          <div>",
-  "            <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: 500, marginBottom: '6px' }}>TikTok Username</label>",
-  "            <input type=\"text\" value={inputUsername} onChange={(e) => setInputUsername(e.target.value)} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid #d1d5db', boxSizing: 'border-box' }} placeholder=\"e.g. gbnews\" />",
+  "            <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '6px', color: '#111827' }}>TikTok Username</label>",
+  '            <input type="text" value={inputUsername} onChange={(e) => setInputUsername(e.target.value)} style={{ width: \'100%\', padding: \'8px 12px\', borderRadius: \'6px\', border: \'1px solid #d1d5db\', boxSizing: \'border-box\', color: \'#111827\' }} placeholder="e.g. gbnews" />',
   "          </div>",
   "          <div>",
-  "            <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: 500, marginBottom: '6px' }}>API Key</label>",
-  "            <input type=\"text\" value={apiKey} onChange={(e) => setApiKey(e.target.value)} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid #d1d5db', boxSizing: 'border-box', fontFamily: 'monospace' }} />",
-  "            <p style={{ margin: '4px 0 0 0', fontSize: '0.75rem', color: '#9ca3af' }}>The demo key is rate-limited. Replace with your own key for production.</p>",
+  "            <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '6px', color: '#111827' }}>API Key</label>",
+  '            <input type="text" value={apiKey} onChange={(e) => setApiKey(e.target.value)} style={{ width: \'100%\', padding: \'8px 12px\', borderRadius: \'6px\', border: \'1px solid #d1d5db\', boxSizing: \'border-box\', fontFamily: \'monospace\', color: \'#111827\' }} />',
+  "            <p style={{ margin: '4px 0 0 0', fontSize: '0.75rem', color: '#6b7280' }}>The demo key is rate-limited. Replace with your own key for production.</p>",
   "          </div>",
-  "          <button type=\"submit\" style={{ background: '#000', color: '#fff', padding: '10px 16px', borderRadius: '6px', border: 'none', fontWeight: 500, cursor: 'pointer' }}>Connect Stream</button>",
+  '          <button type="submit" style={{ background: \'#111827\', color: \'#fff\', padding: \'10px 16px\', borderRadius: \'6px\', border: \'none\', fontWeight: 600, cursor: \'pointer\', fontSize: \'0.875rem\' }}>Connect Stream</button>',
   "        </form>",
   "        <div style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>",
   "          <div style={{ width: 10, height: 10, borderRadius: '50%', background: connected ? '#10b981' : '#ef4444', transition: 'background 0.3s' }}></div>",
-  "          <span style={{ fontSize: '0.875rem', color: '#374151', fontWeight: 500 }}>{connected ? 'Connected to @' + username : 'Disconnected'}</span>",
+  "          <span style={{ fontSize: '0.875rem', color: '#111827', fontWeight: 600 }}>{connected ? 'Connected' : 'Disconnected'}</span>",
   "        </div>",
   "        <div style={{ height: 350, overflowY: 'auto', background: '#f9fafb', padding: '12px', borderRadius: '8px', border: '1px solid #e5e7eb', fontSize: '0.875rem', display: 'flex', flexDirection: 'column' }}>",
-  "          {events.map((e, i) => <div key={i} style={{ padding: '6px 0', borderBottom: '1px solid #f3f4f6', wordBreak: 'break-word' }}>{e}</div>)}",
-  "          {events.length === 0 && <div style={{ color: '#9ca3af', textAlign: 'center', margin: 'auto 0' }}>{connected ? 'Waiting for events...' : 'Connect to a valid stream to see events'}</div>}",
+  "          {events.map((e, i) => <div key={i} style={{ padding: '6px 0', borderBottom: '1px solid #f3f4f6', wordBreak: 'break-word', color: '#374151' }}>{e}</div>)}",
+  "          {events.length === 0 && <div style={{ color: '#9ca3af', textAlign: 'center', margin: 'auto 0' }}>{connected ? 'Waiting for events...' : 'Connect to see events'}</div>}",
   "        </div>",
   "      </div>",
   "    </div>",
   "  );",
-  "}"
+  "}",
 ].join('\n') + "\n";
 
 const VUE_TEMPLATE = [
@@ -466,47 +473,46 @@ function runScaffold(choice, targetDir, pm) {
         '</template>'
       ].join('\n') + '\n');
     } else {
-      console.log("\n  " + B + "📦 Installing " + C.cyan + "tiktok-live-api" + B + " SDK..." + R + "\n");
-      execSync(installCmd, { cwd: fullPath, stdio: 'inherit' });
-
       if (isNext) {
         const compDir = path.join(fullPath, 'src', 'components');
         if (!fs.existsSync(compDir)) fs.mkdirSync(compDir, { recursive: true });
         fs.writeFileSync(path.join(compDir, 'TikTokLive.jsx'), REACT_TEMPLATE);
 
-        const pageJs = path.join(fullPath, 'src', 'app', 'page.js');
-        if (fs.existsSync(pageJs)) {
-          fs.writeFileSync(pageJs, [
-            "import TikTokLive from '@/components/TikTokLive';",
-            "",
-            "export default function Home() {",
-            "  return (",
-            '    <main style={{ minHeight: "100vh", background: "#f9fafb", paddingTop: "40px" }}>',
-            "      <TikTokLive />",
-            "    </main>",
-            "  );",
-            "}"
-          ].join('\n') + '\n');
-        }
+        // Write page.js — create the directory if needed
+        const pageDir = path.join(fullPath, 'src', 'app');
+        if (!fs.existsSync(pageDir)) fs.mkdirSync(pageDir, { recursive: true });
+        fs.writeFileSync(path.join(pageDir, 'page.js'), [
+          "import TikTokLive from '@/components/TikTokLive';",
+          "",
+          "export default function Home() {",
+          "  return (",
+          '    <main style={{ minHeight: "100vh", background: "#f9fafb", paddingTop: "40px" }}>',
+          "      <TikTokLive />",
+          "    </main>",
+          "  );",
+          "}",
+        ].join('\n') + '\n');
       } else if (isVite) {
         const compDir = path.join(fullPath, 'src', 'components');
         if (!fs.existsSync(compDir)) fs.mkdirSync(compDir, { recursive: true });
         fs.writeFileSync(path.join(compDir, 'TikTokLive.jsx'), REACT_TEMPLATE);
 
-        const appJsx = path.join(fullPath, 'src', 'App.jsx');
-        if (fs.existsSync(appJsx)) {
-          fs.writeFileSync(appJsx, [
-            "import TikTokLive from './components/TikTokLive';",
-            "",
-            "export default function App() {",
-            "  return (",
-            '    <main style={{ minHeight: "100vh", background: "#f9fafb", paddingTop: "40px" }}>',
-            "      <TikTokLive />",
-            "    </main>",
-            "  );",
-            "}"
-          ].join('\n') + '\n');
-        }
+        // Write App.jsx — overwrite whatever create-vite generated (could be .jsx or .tsx)
+        const appContent = [
+          "import TikTokLive from './components/TikTokLive';",
+          "",
+          "export default function App() {",
+          "  return (",
+          '    <main style={{ minHeight: "100vh", background: "#f9fafb", paddingTop: "40px" }}>',
+          "      <TikTokLive />",
+          "    </main>",
+          "  );",
+          "}",
+        ].join('\n') + '\n';
+        fs.writeFileSync(path.join(fullPath, 'src', 'App.jsx'), appContent);
+        // Also remove App.tsx if it exists (create-vite sometimes uses TypeScript)
+        const appTsx = path.join(fullPath, 'src', 'App.tsx');
+        if (fs.existsSync(appTsx)) fs.unlinkSync(appTsx);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiktok-live-api",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "description": "Unofficial TikTok LIVE API Client — Real-time chat, gifts, viewers, battles, and AI live captions from any TikTok livestream. Managed WebSocket API with 99.9% uptime.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",