room avatars

app.js

@@ -86,7 +86,7 @@ let App = create({
     }
     return (
       <>
-        <Sidebar rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
+        <Sidebar client={this.state.client} rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
         <div className="main">
           <Info />
           <Chat client={this.state.client} roomId={this.state.roomId}/>

components/events/image.js

@@ -11,9 +11,9 @@ let Event = create({
 
   getInitialState: function() {
     let hs = this.props.client.baseUrl
-    let event = this.props.event;
-    let media_mxc = event.content.url.slice(7);
-    let thumb_mxc = event.content.info.thumbnail_url.slice(6);
+    let event = this.props.event
+    let media_mxc = event.content.url.slice(6)
+    let thumb_mxc = event.content.info.thumbnail_url.slice(6)
     let base = `${hs}/_matrix/media/v1/download`
     return {
       url: {

components/filterList.js

@@ -41,12 +41,13 @@ let FilterList = create({
     let items = keys.map((itemKey, id) => {
       let item = this.props.items[itemKey]
       let props = {
-        selected:  this.state.selection == itemKey,
-        filter:  this.state.filter,
-        content: item,
-        key:     itemKey,
-        listId:  itemKey,
-        select:  this.select,
+        selected:   this.state.selection == itemKey,
+        filter:     this.state.filter,
+        content:    item,
+        key:        itemKey,
+        listId:     itemKey,
+        select:     this.select,
+        properties: this.props.properties
       }
       return React.createElement(this.props.element, props)
     })

components/sidebar.js

@@ -12,13 +12,29 @@ let RoomListItem = create({
   displayName: "RoomListItem",
 
   getInitialState: function() {
+    let room = this.props.content
+    let client = this.props.properties.client
+    let avatar = <svg id="avatar" ref={this.jdenticonRef}/>
+
+    let roomState = room.getLiveTimeline().getState('f')
+    let avatarState = roomState.getStateEvents('m.room.avatar')
+    console.log(avatarState)
+    if (avatarState.length > 0) {
+      let event = avatarState[avatarState.length-1].event
+      let hs = client.baseUrl
+      let media_mxc = event.content.url.slice(6)
+      let url = `${hs}/_matrix/media/v1/thumbnail/${media_mxc}?width=128&height=128&method=scale`
+      avatar = <img id="avatar" src={url}></img>
+    }
+
     return {
-      filterName: this.props.content.name.toUpperCase(),
-      unread: Math.random() > 0.7
+      filterName: room.name.toUpperCase(),
+      unread: Math.random() > 0.7,
+      avatar: avatar
     }
   },
 
-  avatarRef: function(ref) {
+  jdenticonRef: function(ref) {
     jdenticon.update(ref, this.props.content.roomId)
   },
 
@@ -42,7 +58,7 @@ let RoomListItem = create({
       className += " unread"
     }
     return <div className={className} ref={this.setRef}>
-      <svg id="avatar" ref={this.avatarRef}/>
+      {this.state.avatar}
       <span id="name">{this.props.content.name}</span>
     </div>
   }
@@ -61,13 +77,11 @@ let Sidebar = create({
     this.setState({
       filter: filter.toUpperCase()
     })
-    console.log("setting", filter)
   },
 
   render: function() {
-    console.log(this.props.rooms)
     return <div className="sidebar">
-      <FilterList items={this.props.rooms} element={RoomListItem} callback={(roomId) => {this.props.selectRoom(roomId)}}/>
+      <FilterList items={this.props.rooms} properties={{client: this.props.client}} element={RoomListItem} callback={(roomId) => {this.props.selectRoom(roomId)}}/>
     </div>
   }
 })