split component & page.

src/component/types/events.ts

@@ -0,0 +1,72 @@
+export const EVENT = {
+  SYSTEM: {
+    DISCONNECT: 'system/disconnect',
+  },
+  SIGNAL: {
+    ANSWER: 'signal/answer',
+    PROVIDE: 'signal/provide',
+  },
+  MEMBER: {
+    LIST: 'member/list',
+    CONNECTED: 'member/connected',
+    DISCONNECTED: 'member/disconnected',
+  },
+  CONTROL: {
+    LOCKED: 'control/locked',
+    RELEASE: 'control/release',
+    REQUEST: 'control/request',
+    REQUESTING: 'control/requesting',
+    GIVE: 'control/give',
+    CLIPBOARD: 'control/clipboard',
+    KEYBOARD: 'control/keyboard',
+  },
+  SCREEN: {
+    CONFIGURATIONS: 'screen/configurations',
+    RESOLUTION: 'screen/resolution',
+    SET: 'screen/set',
+  },
+  BROADCAST: {
+    STATUS: 'broadcast/status',
+    CREATE: 'broadcast/create',
+    DESTROY: 'broadcast/destroy',
+  },
+  ADMIN: {
+    CONTROL: 'admin/control',
+    RELEASE: 'admin/release',
+    GIVE: 'admin/give',
+  },
+} as const
+
+export type Events = typeof EVENT
+
+export type WebSocketEvents =
+  | SystemEvents
+  | SignalEvents
+  | MemberEvents
+  | ControlEvents
+  | ScreenEvents
+  | BroadcastEvents
+  | AdminEvents
+
+export type SystemEvents = typeof EVENT.SYSTEM.DISCONNECT
+
+export type SignalEvents = typeof EVENT.SIGNAL.ANSWER | typeof EVENT.SIGNAL.PROVIDE
+
+export type MemberEvents = typeof EVENT.MEMBER.LIST | typeof EVENT.MEMBER.CONNECTED | typeof EVENT.MEMBER.DISCONNECTED
+
+export type ControlEvents =
+  | typeof EVENT.CONTROL.LOCKED
+  | typeof EVENT.CONTROL.RELEASE
+  | typeof EVENT.CONTROL.REQUEST
+  | typeof EVENT.CONTROL.GIVE
+  | typeof EVENT.CONTROL.CLIPBOARD
+  | typeof EVENT.CONTROL.KEYBOARD
+
+export type ScreenEvents = typeof EVENT.SCREEN.CONFIGURATIONS | typeof EVENT.SCREEN.RESOLUTION | typeof EVENT.SCREEN.SET
+
+export type BroadcastEvents =
+  | typeof EVENT.BROADCAST.STATUS
+  | typeof EVENT.BROADCAST.CREATE
+  | typeof EVENT.BROADCAST.DESTROY
+
+export type AdminEvents = typeof EVENT.ADMIN.CONTROL | typeof EVENT.ADMIN.RELEASE | typeof EVENT.ADMIN.GIVE

src/component/types/messages.ts

@@ -0,0 +1,182 @@
+import {
+  EVENT,
+  WebSocketEvents,
+  SystemEvents,
+  SignalEvents,
+  MemberEvents,
+  ControlEvents,
+  ScreenEvents,
+  BroadcastEvents,
+  AdminEvents,
+} from './events'
+
+import {
+  Member,
+  ScreenConfigurations,
+  ScreenResolution
+} from './structs'
+
+export type WebSocketMessages =
+  | WebSocketMessage
+  | SignalProvideMessage
+  | SignalAnswerMessage
+  | MemberListMessage
+  | MemberConnectMessage
+  | MemberDisconnectMessage
+  | ControlMessage
+  | ScreenResolutionMessage
+  | ScreenConfigurationsMessage
+
+export type WebSocketPayloads =
+  | SignalProvidePayload
+  | SignalAnswerPayload
+  | MemberListPayload
+  | Member
+  | ControlPayload
+  | ControlClipboardPayload
+  | ControlKeyboardPayload
+  | ScreenResolutionPayload
+  | ScreenConfigurationsPayload
+  | AdminPayload
+  | BroadcastStatusPayload
+  | BroadcastCreatePayload
+
+export interface WebSocketMessage {
+  event: WebSocketEvents | string
+}
+
+/*
+  SYSTEM MESSAGES/PAYLOADS
+*/
+// system/disconnect
+export interface DisconnectMessage extends WebSocketMessage, DisconnectPayload {
+  event: typeof EVENT.SYSTEM.DISCONNECT
+}
+export interface DisconnectPayload {
+  message: string
+}
+
+/*
+  SIGNAL MESSAGES/PAYLOADS
+*/
+// signal/provide
+export interface SignalProvideMessage extends WebSocketMessage, SignalProvidePayload {
+  event: typeof EVENT.SIGNAL.PROVIDE
+}
+export interface SignalProvidePayload {
+  id: string
+  lite: boolean
+  ice: string[]
+  sdp: string
+}
+
+// signal/answer
+export interface SignalAnswerMessage extends WebSocketMessage, SignalAnswerPayload {
+  event: typeof EVENT.SIGNAL.ANSWER
+}
+export interface SignalAnswerPayload {
+  sdp: string
+}
+
+/*
+  MEMBER MESSAGES/PAYLOADS
+*/
+// member/list
+export interface MemberListMessage extends WebSocketMessage, MemberListPayload {
+  event: typeof EVENT.MEMBER.LIST
+}
+export interface MemberListPayload {
+  members: Member[]
+}
+
+// member/connected
+export interface MemberConnectMessage extends WebSocketMessage, MemberPayload {
+  event: typeof EVENT.MEMBER.CONNECTED
+}
+export type MemberPayload = Member
+
+// member/disconnected
+export interface MemberDisconnectMessage extends WebSocketMessage, MemberPayload {
+  event: typeof EVENT.MEMBER.DISCONNECTED
+}
+export interface MemberDisconnectPayload {
+  id: string
+}
+
+/*
+  CONTROL MESSAGES/PAYLOADS
+*/
+// control/locked & control/release & control/request
+export interface ControlMessage extends WebSocketMessage, ControlPayload {
+  event: ControlEvents
+}
+export interface ControlPayload {
+  id: string
+}
+
+export interface ControlTargetPayload {
+  id: string
+  target: string
+}
+
+export interface ControlClipboardPayload {
+  text: string
+}
+
+export interface ControlKeyboardPayload {
+  layout?: string
+  capsLock?: boolean
+  numLock?: boolean
+  scrollLock?: boolean
+}
+
+/*
+  SCREEN PAYLOADS
+*/
+export interface ScreenResolutionMessage extends WebSocketMessage, ScreenResolutionPayload {
+  event: ScreenEvents
+}
+
+export interface ScreenResolutionPayload extends ScreenResolution {
+  id?: string
+}
+
+export interface ScreenConfigurationsMessage extends WebSocketMessage, ScreenConfigurationsPayload {
+  event: ScreenEvents
+}
+
+export interface ScreenConfigurationsPayload {
+  configurations: ScreenConfigurations
+}
+
+/*
+  BROADCAST PAYLOADS
+*/
+export interface BroadcastCreatePayload {
+  url:   string
+}
+
+export interface BroadcastStatusPayload {
+  url:      string
+  isActive: boolean
+}
+
+/*
+  ADMIN PAYLOADS
+*/
+export interface AdminMessage extends WebSocketMessage, AdminPayload {
+  event: AdminEvents
+}
+
+export interface AdminPayload {
+  id: string
+}
+
+export interface AdminTargetMessage extends WebSocketMessage, AdminTargetPayload {
+  event: AdminEvents
+}
+
+export interface AdminTargetPayload {
+  id: string
+  target?: string
+}

src/component/types/state.ts

@@ -0,0 +1,76 @@
+export default interface State {
+  connection: Connection
+  video: Video
+  control: Control
+  screen: Screen
+  member: Member
+  members: Member[]
+}
+
+/////////////////////////////
+// Connection
+/////////////////////////////
+export interface Connection {
+  websocket: 'disconnected' | 'connecting' | 'connected'
+  webrtc: 'disconnected' | 'connecting' | 'connected'
+  type: 'webrtc' | 'fallback' | 'none'
+  can_watch: boolean
+  can_control: boolean
+  clipboard_access: boolean   
+}
+
+/////////////////////////////
+// Video
+/////////////////////////////
+export interface Video {
+  playable: boolean
+  playing: boolean
+  volume: number 
+  fullscreen: boolean
+}
+
+/////////////////////////////
+// Control
+/////////////////////////////
+export interface Control {
+  scroll: Scroll
+  clipboard: Clipboard
+  host: Member | null
+}
+
+export interface Scroll {
+  inverse: boolean
+  sensitivity: number
+}
+
+export interface Clipboard {
+  data: string | null
+}
+
+/////////////////////////////
+// Screen
+/////////////////////////////
+export interface Screen {
+  size: ScreenSize
+  configurations: ScreenSize[]
+}
+
+export interface ScreenSize {
+  width: number
+  height: number
+  rate: number
+}
+
+/////////////////////////////
+// Member
+/////////////////////////////
+export interface Member {
+  id: string | null
+  name: string | null
+  is_admin: boolean
+  is_watching: boolean
+  is_controlling: boolean
+  can_watch: boolean
+  can_control: boolean
+  clipboard_access: boolean
+}

src/component/types/structs.ts

@@ -0,0 +1,25 @@
+export interface Member {
+  id: string
+  name: string
+  admin: boolean
+  connected?: boolean
+  ignored?: boolean
+}
+
+export interface ScreenConfigurations {
+  [index: string]: ScreenConfiguration
+}
+
+export interface ScreenConfiguration {
+  width: number
+  height: number
+  rates: {
+    [index: string]: number
+  }
+}
+
+export interface ScreenResolution {
+  width: number
+  height: number
+  rate: number
+}