Skip to content

Commit bcbfca0

Browse files
codercatdevcodercatdev
committed
add firebase titles
1 parent 465d591 commit bcbfca0

File tree

12 files changed

+10274
-2717
lines changed

12 files changed

+10274
-2717
lines changed

‎backend/firebase/firestore.rules

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ service cloud.firestore {
114114
allow read: if true;
115115
}
116116
}
117+
//For Overlay Level
118+
match /overlays/{userId} {
119+
allow read: if true;
120+
}
117121
}
118122

119123
function isAlex(){

‎frontend/overlay/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,6 @@ yarn-error.log*
3333

3434
# typescript
3535
*.tsbuildinfo
36+
37+
# environments
38+
.env*

‎frontend/overlay/components/Coding.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,39 @@ import { createSocketStudioClient, SocketStudioProvider } from '@socket-studio/p
22
import AJPrimary from '@/components/AJPrimary';
33
import { Chat } from '@/components/Chat';
44
import { TagDrop } from '@/components/TagDrop';
5+
import LowerThird from './LowerThird';
6+
import Layout from './Layout';
57

68
export default function Coding() {
79
const client = createSocketStudioClient('https://codingcat-twitch.onrender.com/graphql');
810
return (
911
<SocketStudioProvider client={client}>
10-
<main className="grid grid-cols-[1fr_180px] w-full">
11-
<section className="grid grid-rows-[1fr_8px_100px] h-screen overflow-hidden">
12-
<div />
13-
<div className="w-full h-2 bg-purple-900" />
14-
<div className="grid grid-cols-[1fr_100px] w-full bg-gradient-to-r to-purple-700 via-purple-500 from-pink-500">
15-
<div></div>
16-
<div className="p-1">
17-
<AJPrimary className="block w-20 h-20" />
12+
<Layout>
13+
<main className="grid grid-cols-[1fr_180px] w-full">
14+
<section className="grid grid-rows-[1fr_8px_100px] h-screen overflow-hidden">
15+
<div />
16+
<div className="w-full h-2 bg-purple-900" />
17+
<div className="grid grid-cols-[1fr_100px] w-full bg-gradient-to-r to-purple-700 via-purple-500 from-pink-500">
18+
<div className="flex items-center justify-center">
19+
<LowerThird />
20+
</div>
21+
<div className="p-1">
22+
<AJPrimary className="block w-20 h-20" />
23+
</div>
24+
</div>
25+
</section>
26+
<div className="grid grid-rows-[198px_1fr]">
27+
<div />
28+
<div className="relative overflow-hidden bg-purple-700 text-purple-50">
29+
<ul className="absolute bottom-0 left-0 pt-0 pb-2 pl-2 pr-5 m-0 list-none">
30+
{' '}
31+
<Chat chatMessageClass="p-[1px] grid text-xs gap-1 grid-row-[1fr]" />
32+
</ul>
1833
</div>
1934
</div>
20-
</section>
21-
<div className="grid grid-rows-[198px_1fr]">
22-
<div />
23-
<div className="relative overflow-hidden bg-purple-700 text-purple-50">
24-
<ul className="absolute bottom-0 left-0 pt-0 pb-2 pl-2 pr-5 m-0 list-none">
25-
{' '}
26-
<Chat chatMessageClass="p-[1px] grid text-xs gap-1 grid-row-[1fr]" />
27-
</ul>
28-
</div>
29-
</div>
30-
</main>
31-
<TagDrop />
35+
</main>
36+
<TagDrop />
37+
</Layout>
3238
</SocketStudioProvider>
3339
);
3440
}

‎frontend/overlay/components/Home.tsx

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,33 @@ import { createSocketStudioClient, SocketStudioProvider } from '@socket-studio/p
22
import AJPrimary from '@/components/AJPrimary';
33
import { Chat } from '@/components/Chat';
44
import { TagDrop } from '@/components/TagDrop';
5+
import LowerThird from './LowerThird';
6+
import Layout from './Layout';
57

68
export default function Home() {
79
const client = createSocketStudioClient('https://codingcat-twitch.onrender.com/graphql');
810
return (
911
<SocketStudioProvider client={client}>
10-
<main className="grid grid-rows-[1fr_8px_144px] h-screen overflow-hidden">
11-
<div className="w-full h-full overlay-top" />
12-
<div className="w-full h-2 bg-purple-900" />
13-
<div className="grid grid-cols-[400px_minmax(500px,_1fr)_140px] w-full bg-gradient-to-r to-purple-700 via-purple-500 from-pink-500">
14-
<div className="relative overflow-hidden text-purple-50">
15-
<ul className="absolute bottom-0 left-0 pt-0 pb-2 pl-2 pr-5 m-0 list-none">
16-
<Chat chatMessageClass="p-[1px] flex text-xs" />
17-
</ul>
12+
<Layout>
13+
<main className="grid grid-rows-[1fr_8px_144px] h-screen overflow-hidden">
14+
<div className="w-full h-full overlay-top" />
15+
<div className="w-full h-2 bg-purple-900" />
16+
<div className="grid grid-cols-[400px_minmax(500px,_1fr)_140px] w-full bg-gradient-to-r to-purple-700 via-purple-500 from-pink-500">
17+
<div className="relative overflow-hidden text-purple-50">
18+
<ul className="absolute bottom-0 left-0 pt-0 pb-2 pl-2 pr-5 m-0 list-none">
19+
<Chat chatMessageClass="p-[1px] flex text-xs" />
20+
</ul>
21+
</div>
22+
<div className="flex items-center">
23+
<LowerThird />
24+
</div>
25+
<div className="p-2 w-36 h-36">
26+
<AJPrimary className="block w-32 h-32" />
27+
</div>
1828
</div>
19-
<div></div>
20-
<div className="p-2 w-36 h-36">
21-
<AJPrimary className="block w-32 h-32" />
22-
</div>
23-
</div>
24-
</main>
25-
<TagDrop />
29+
</main>
30+
<TagDrop />
31+
</Layout>
2632
</SocketStudioProvider>
2733
);
2834
}

‎frontend/overlay/components/Layout.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { FirebaseFirestoreProvider, FirebaseProvider } from './wrappers';
2+
3+
const Layout = ({ children }: any) => {
4+
return (
5+
<>
6+
<FirebaseProvider>
7+
<FirebaseFirestoreProvider>
8+
<>{children}</>
9+
</FirebaseFirestoreProvider>
10+
</FirebaseProvider>
11+
</>
12+
);
13+
};
14+
export default Layout;

‎frontend/overlay/components/LowerThird.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useFirebaseApp, useFirestore, useFirestoreDocData } from 'reactfire';
2+
import { doc, DocumentReference, getFirestore } from 'firebase/firestore';
3+
4+
export default function LowerThird() {
5+
const app = useFirebaseApp();
6+
const firestore = getFirestore(app);
7+
8+
const ref = doc(firestore, 'overlays/alex') as unknown as DocumentReference<any>;
9+
const { status, data: overlay, error } = useFirestoreDocData(ref);
10+
return (
11+
<>
12+
<section className="flex flex-col">
13+
{status === 'loading' && <>Loading...</>}
14+
{status === 'success' && overlay && (
15+
<>
16+
<>{overlay?.title && <div className="text-4xl text-purple-50">{overlay.title}</div>}</>
17+
<>
18+
{overlay?.subtitle && (
19+
<div
20+
className="text-xl text-purple-50"
21+
dangerouslySetInnerHTML={{ __html: overlay.subtitle }}
22+
></div>
23+
)}
24+
</>
25+
</>
26+
)}
27+
</section>
28+
</>
29+
);
30+
}

‎frontend/overlay/components/wrappers.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { connectAuthEmulator, getAuth, getIdToken, onIdTokenChanged } from '@firebase/auth';
2+
import {
3+
connectFirestoreEmulator,
4+
Firestore,
5+
FirestoreSettings,
6+
getFirestore
7+
} from '@firebase/firestore';
8+
import {
9+
useFirebaseApp,
10+
AuthProvider,
11+
FirestoreProvider,
12+
FirebaseAppProvider,
13+
FunctionsProvider,
14+
PerformanceProvider,
15+
AnalyticsProvider
16+
} from 'reactfire';
17+
import { config, emulation } from '@/config/firebase';
18+
import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
19+
20+
import { getPerformance } from '@firebase/performance';
21+
import { getAnalytics } from '@firebase/analytics';
22+
interface FirestoreExt extends Firestore {
23+
_settings: FirestoreSettings;
24+
}
25+
26+
export const FirebaseProvider = ({ children }: { children: JSX.Element }) => {
27+
return <FirebaseAppProvider firebaseConfig={config}>{children}</FirebaseAppProvider>;
28+
};
29+
30+
export const FirebasePerformanceProvider = ({ children }: { children: JSX.Element }) => {
31+
const app = useFirebaseApp();
32+
const perf = getPerformance(app);
33+
return <PerformanceProvider sdk={perf}>{children}</PerformanceProvider>;
34+
};
35+
36+
export const FirebaseAnalyticsProvider = ({ children }: { children: JSX.Element }) => {
37+
const app = useFirebaseApp();
38+
const analytics = getAnalytics();
39+
return <AnalyticsProvider sdk={analytics}>{children}</AnalyticsProvider>;
40+
};
41+
42+
export const FirebaseAuthProvider = ({ children }: { children: JSX.Element }) => {
43+
const app = useFirebaseApp();
44+
const auth = getAuth(app);
45+
if (emulation.authEmulatorHost && !auth.emulatorConfig) {
46+
connectAuthEmulator(auth, emulation.authEmulatorHost);
47+
}
48+
49+
return <AuthProvider sdk={auth}>{children}</AuthProvider>;
50+
};
51+
52+
export const FirebaseFirestoreProvider = ({ children }: { children: JSX.Element }) => {
53+
const app = useFirebaseApp();
54+
const firestore = getFirestore(app) as FirestoreExt;
55+
if (
56+
emulation.firestoreEmulatorHost &&
57+
firestore?._settings?.host != emulation.firestoreEmulatorHost
58+
) {
59+
const { urn, port } = hostSplitter(emulation.firestoreEmulatorHost);
60+
if (urn && port) {
61+
connectFirestoreEmulator(firestore, urn, port);
62+
}
63+
}
64+
return <FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>;
65+
};
66+
67+
export const FirebaseFunctionsProvider = ({ children }: { children: JSX.Element }) => {
68+
const functions = getFunctions();
69+
if (emulation.cloudFunctionsEmulatorHost) {
70+
const { urn, port } = hostSplitter(emulation.cloudFunctionsEmulatorHost);
71+
if (urn && port) {
72+
connectFunctionsEmulator(functions, urn, port);
73+
}
74+
}
75+
return <FunctionsProvider sdk={functions}>{children}</FunctionsProvider>;
76+
};
77+
78+
const hostSplitter = (host: string) => {
79+
const split = host.split(':');
80+
let urn = '';
81+
let port = 0;
82+
if (split && split.length == 2) {
83+
urn = split[0];
84+
port = parseInt(split[1]);
85+
if (isNaN(port)) {
86+
port = 0;
87+
}
88+
}
89+
return { urn, port };
90+
};

‎frontend/overlay/config/firebase.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const config = {
2+
apiKey: process.env.NEXT_PUBLIC_FB_CONFIG_APIKEY,
3+
authDomain: process.env.NEXT_PUBLIC_FB_CONFIG_AUTHDOMAIN,
4+
databaseURL: process.env.NEXT_PUBLIC_FB_CONFIG_DATABASEURL,
5+
projectId: process.env.NEXT_PUBLIC_FB_CONFIG_PROJECTID,
6+
storageBucket: process.env.NEXT_PUBLIC_FB_CONFIG_STORAGEBUCKET,
7+
messagingSenderId: process.env.NEXT_PUBLIC_FB_CONFIG_MESSAGINGSENDERID,
8+
appId: process.env.NEXT_PUBLIC_FB_CONFIG_APPID,
9+
measurementId: process.env.NEXT_PUBLIC_FB_CONFIG_MEASUREMENTID
10+
};
11+
12+
export const emulation = {
13+
authEmulatorHost: process.env.NEXT_PUBLIC_FB_AUTH_HOST,
14+
databaseEmulatorHost: process.env.NEXT_PUBLIC_FB_DB_HOST,
15+
firestoreEmulatorHost: process.env.NEXT_PUBLIC_FB_FS_HOST,
16+
cloudStorageEmulatorHost: process.env.NEXT_PUBLIC_CS_HOST,
17+
cloudFunctionsEmulatorHost: process.env.NEXT_PUBLIC_FB_FN_HOST
18+
};

0 commit comments

Comments
 (0)