forked from lavender/watch-party
		
	add /ping feature
this is useful for ready checks
This commit is contained in:
		
							parent
							
								
									1944b2824c
								
							
						
					
					
						commit
						852270c63f
					
				
					 10 changed files with 60 additions and 17 deletions
				
			
		|  | @ -3,7 +3,7 @@ | |||
|   <head> | ||||
|     <meta charset="utf-8" /> | ||||
|     <title>watch party :D</title> | ||||
|     <link rel="stylesheet" href="/styles.css?v=5" /> | ||||
|     <link rel="stylesheet" href="/styles.css?v=8" /> | ||||
|   </head> | ||||
| 
 | ||||
|   <body> | ||||
|  | @ -47,6 +47,6 @@ | |||
|       </p> | ||||
|     </div> | ||||
| 
 | ||||
|     <script type="module" src="/create.mjs?v=7"></script> | ||||
|     <script type="module" src="/create.mjs?v=8"></script> | ||||
|   </body> | ||||
| </html> | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import { setupCreateSessionForm } from "./lib/create-session.mjs?v=7"; | ||||
| import { setupCreateSessionForm } from "./lib/create-session.mjs?v=8"; | ||||
| 
 | ||||
| const main = () => { | ||||
|   setupCreateSessionForm(); | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
|   <head> | ||||
|     <meta charset="utf-8" /> | ||||
|     <title>watch party :D</title> | ||||
|     <link rel="stylesheet" href="/styles.css?v=5" /> | ||||
|     <link rel="stylesheet" href="/styles.css?v=8" /> | ||||
|   </head> | ||||
| 
 | ||||
|   <body> | ||||
|  | @ -61,6 +61,6 @@ | |||
|       </form> | ||||
|     </div> | ||||
| 
 | ||||
|     <script type="module" src="/main.mjs?v=7"></script> | ||||
|     <script type="module" src="/main.mjs?v=8"></script> | ||||
|   </body> | ||||
| </html> | ||||
|  |  | |||
|  | @ -12,12 +12,24 @@ const setupChatboxEvents = (socket) => { | |||
|     if (content.trim().length) { | ||||
|       input.value = ""; | ||||
| 
 | ||||
|       socket.send( | ||||
|         JSON.stringify({ | ||||
|           op: "ChatMessage", | ||||
|           data: content, | ||||
|         }) | ||||
|       ); | ||||
|       if ( | ||||
|         content.toLowerCase() == "/ping" || | ||||
|         content.toLowerCase().startsWith("/ping ") | ||||
|       ) { | ||||
|         socket.send( | ||||
|           JSON.stringify({ | ||||
|             op: "Ping", | ||||
|             data: content.slice(5).trim(), | ||||
|           }) | ||||
|         ); | ||||
|       } else { | ||||
|         socket.send( | ||||
|           JSON.stringify({ | ||||
|             op: "ChatMessage", | ||||
|             data: content, | ||||
|           }) | ||||
|         ); | ||||
|       } | ||||
|     } | ||||
|   }); | ||||
| }; | ||||
|  | @ -212,5 +224,34 @@ export const logEventToChat = (event) => { | |||
|       printChatMessage("set-playing", event.user, event.colour, messageContent); | ||||
|       break; | ||||
|     } | ||||
|     case "Ping": { | ||||
|       const messageContent = document.createElement("span"); | ||||
|       if (event.data) { | ||||
|         messageContent.appendChild(document.createTextNode("pinged saying: ")); | ||||
|         messageContent.appendChild(document.createTextNode(event.data)); | ||||
|       } else { | ||||
|         messageContent.appendChild(document.createTextNode("pinged")); | ||||
|       } | ||||
| 
 | ||||
|       printChatMessage("ping", event.user, event.colour, messageContent); | ||||
|       beep(); | ||||
|       break; | ||||
|     } | ||||
|   } | ||||
| }; | ||||
| 
 | ||||
| const beep = () => { | ||||
|   const context = new AudioContext(); | ||||
| 
 | ||||
|   const gain = context.createGain(); | ||||
|   gain.connect(context.destination); | ||||
|   gain.gain.value = 0.1; | ||||
|    | ||||
|   const oscillator = context.createOscillator(); | ||||
|   oscillator.connect(gain); | ||||
|   oscillator.frequency.value = 520; | ||||
|   oscillator.type = "square"; | ||||
|    | ||||
|   oscillator.start(context.currentTime); | ||||
|   oscillator.stop(context.currentTime + 0.22); | ||||
| }; | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import { createSession } from "./watch-session.mjs?v=7"; | ||||
| import { createSession } from "./watch-session.mjs?v=8"; | ||||
| 
 | ||||
| export const setupCreateSessionForm = () => { | ||||
|   const form = document.querySelector("#create-session-form"); | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import { joinSession } from "./watch-session.mjs?v=7"; | ||||
| import { joinSession } from "./watch-session.mjs?v=8"; | ||||
| 
 | ||||
| /** | ||||
|  * @param {HTMLInputElement} field | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| import { setupVideo } from "./video.mjs?v=7"; | ||||
| import { setupChat, logEventToChat } from "./chat.mjs?v=7"; | ||||
| import { setupVideo } from "./video.mjs?v=8"; | ||||
| import { setupChat, logEventToChat } from "./chat.mjs?v=8"; | ||||
| 
 | ||||
| /** | ||||
|  * @param {string} sessionId | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import { setupJoinSessionForm } from "./lib/join-session.mjs?v=7"; | ||||
| import { setupJoinSessionForm } from "./lib/join-session.mjs?v=8"; | ||||
| 
 | ||||
| const main = () => { | ||||
|   setupJoinSessionForm(); | ||||
|  |  | |||
|  | @ -138,7 +138,8 @@ button.small-button { | |||
| } | ||||
| 
 | ||||
| .chat-message.user-join, | ||||
| .chat-message.user-leave { | ||||
| .chat-message.user-leave, | ||||
| .chat-message.ping { | ||||
|   font-style: italic; | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ pub enum WatchEventData { | |||
|     UserJoin, | ||||
|     UserLeave, | ||||
|     ChatMessage(String), | ||||
|     Ping(String) | ||||
| } | ||||
| 
 | ||||
| #[derive(Clone, Serialize, Deserialize)] | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue