@@ -27,6 +27,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
27
27
const [ username , setUsername ] = useState < string | null > ( null ) ;
28
28
const [ selectionRange , setSelectionRange ] = useState ( null ) ;
29
29
const [ saving , setSaving ] = useState ( false ) ;
30
+ const [ peerOnline , setPeerOnline ] = useState ( false ) ;
30
31
const [ editorTheme , setEditorTheme ] = useState ( "dark-plus" ) ;
31
32
32
33
// Fetch username on component mount
@@ -88,6 +89,35 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
88
89
}
89
90
} , [ code ] ) ;
90
91
92
+ useEffect ( ( ) => {
93
+ const awarenessListener = ( {
94
+ added,
95
+ removed,
96
+ } : {
97
+ added : number [ ] ;
98
+ removed : number [ ] ;
99
+ } ) => {
100
+ added . forEach ( ( clientId ) => {
101
+ if ( clientId !== providerRef . current ?. awareness . clientID ) {
102
+ setPeerOnline ( true ) ;
103
+ }
104
+ } ) ;
105
+
106
+ removed . forEach ( ( clientId ) => {
107
+ if ( clientId !== providerRef . current ?. awareness . clientID ) {
108
+ setPeerOnline ( false ) ;
109
+ }
110
+ }
111
+ )
112
+ } ;
113
+
114
+ providerRef . current ?. awareness . on ( "change" , awarenessListener ) ;
115
+
116
+ return ( ) => {
117
+ providerRef . current ?. awareness . off ( "change" , awarenessListener ) ;
118
+ } ;
119
+ } , [ providerRef . current ] ) ;
120
+
91
121
async function initializeShiki ( monaco : any , editor : any ) {
92
122
const highlighter = await createHighlighter ( {
93
123
themes : [ "dark-plus" , "light-plus" ] ,
@@ -178,6 +208,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
178
208
theme = { editorTheme }
179
209
setTheme = { setEditorTheme }
180
210
saving = { saving }
211
+ peerOnline = { peerOnline }
181
212
/>
182
213
< div className = "w-full h-[1px] mx-auto my-2" > </ div >
183
214
< Editor
0 commit comments