Refactor a bit

pico.js

@@ -5,7 +5,7 @@ const State = {
     online: [],
     posts: [],
     rpcs: {},
-    media: {},
+    streams: {},
     options: {},
 }
 const markedOptions = {
@@ -49,7 +49,7 @@ const getOrCreateRpc = (username) => {
     if(State.username === username) {
         return
     }
-    const myStream = State.media[State.username]
+    const myStream = State.streams[State.username]
     if(!State.rpcs[username] && myStream) {
         const rpc = new RTCPeerConnection({iceServers: [{urls: 'stun:stun.sipgate.net:3478'}]})
         myStream.getTracks().forEach(track => rpc.addTrack(track, myStream))
@@ -59,7 +59,7 @@ const getOrCreateRpc = (username) => {
             }
         }
         rpc.ontrack = (e) => {
-            State.media[username] = e.streams[0]
+            State.streams[username] = e.streams[0]
             m.redraw()
         }
         rpc.onclose = (e) => {
@@ -122,9 +122,9 @@ const onPeerInfo = async ({detail: message}) => {
         rpc.addIceCandidate(candidate)
     }
     else if(message.value.type === 'stop') {
-        if(State.media[message.source]) {
-            State.media[message.source].getTracks().map(track => track.stop())
-            delete State.media[message.source]
+        if(State.streams[message.source]) {
+            State.streams[message.source].getTracks().map(track => track.stop())
+            delete State.streams[message.source]
         }
         if(State.rpcs[message.source]) {
             State.rpcs[message.source].close()
@@ -257,10 +257,10 @@ const VideoOptions = {
 }
 const Video = {
     keepRatio: {observe: () => {}},
-    appendStream: ({username, stream}) => ({dom}) => {
+    appendStream: ({username}) => ({dom}) => {
         dom.autoplay = true
         dom.muted = (username === State.username)
-        dom.srcObject = stream
+        dom.srcObject = State.streams[username]
     },
     view({attrs}) {
         const classList = VideoOptions.getClassListFor(attrs.username)
@@ -287,7 +287,7 @@ const Media = {
     },
     turnOn: async () => {
         const media = await getSelectedMedia()
-        State.media[State.username] = media
+        State.streams[State.username] = media
         wire({kind: 'peerInfo', value: {type: 'request'}})
         m.redraw()
     },
@@ -298,7 +298,7 @@ const Media = {
     view() {
         return m('.media',
             m('.media-settings',
-                State.media[State.username]
+                State.streams[State.username]
                 ? m('button', {onclick: Media.turnOff}, 'turn off')
                 : m('button', {onclick: Media.turnOn}, 'turn on')
                 ,
@@ -306,8 +306,8 @@ const Media = {
                 m('label', m('input#mute-check', {type: 'checkbox'}), 'mute'),
             ),
             m('.videos',
-                Object.entries(State.media).map(([username, stream]) =>
-                    m(Video, {username, stream})
+                Object.keys(State.streams).map((username) =>
+                    m(Video, {username})
                 ),
             ),
         )