fetch list of streams

packages/app/src/pages/streams/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import axios from "axios"
+import React from "react"
 import * as antd from "antd"
 import { SelectableList, ActionsBar } from "components"
 
+import "./index.less"
+
 export default class Streams extends React.Component {
     state = {
         list: [],
@@ -15,38 +16,69 @@ export default class Streams extends React.Component {
     }
 
     updateStreamsList = async () => {
-        const streams = await this.api.get.streams().catch(error => {
+        let streams = await this.api.get.streams().catch(error => {
             console.error(error)
             antd.message.error(error)
-            
+
             return false
         })
 
+        if (streams && Array.isArray(streams)) {
+            // resolve user_id with user basic data
+            streams = streams.map(async (stream) => {
+                const userData = await this.api.get.user(undefined, { user_id: stream.user_id }).catch((error) => {
+                    console.error(error)
+                    antd.message.error(error)
+
+                    return false
+                })
+
+                if (userData) {
+                    stream.userData = userData
+                }
+
+                return stream
+            })
+
+            streams = await Promise.all(streams)
+        }
+
         this.setState({ list: streams })
     }
 
-
     onClickItem = (item) => {
         window.app.setLocation(`/streams/viewer?key=${item}`)
     }
 
     renderListItem = (stream) => {
-        stream.StreamPath = stream.StreamPath.replace(/^\/live\//, "")
-        
-        return <div key={stream.id} onClick={() => this.onClickItem(stream.StreamPath)}>
-            <h1>@{stream.StreamPath} #{stream.id}</h1>
+        return <div
+            key={stream.id}
+            onClick={() => this.onClickItem(stream.username)}
+            className="streaming-item"
+        >
+            <div className="thumbnail">
+                <img src={stream.userData.avatar} alt={stream.userData.username} />
+            </div>
+            <div className="details">
+                <div className="title">
+                    <h1>@{stream.userData.username}</h1>
+                    <span>
+                        #{stream.id}
+                    </span>
+                </div>
+            </div>
         </div>
     }
 
     render() {
-        return <div>
+        return <div className="streams">
             <ActionsBar mode="float">
                 <div>
                     <antd.Button onClick={this.updateStreamsList}>Refresh</antd.Button>
                 </div>
             </ActionsBar>
             <div>
-                <SelectableList 
+                <SelectableList
                     selectionEnabled={false}
                     renderItem={this.renderListItem}
                     items={this.state.list}

packages/app/src/pages/streams/index.less

@@ -0,0 +1,49 @@
+.streams {
+    .selectableList_content {
+        display: flex;
+        flex-wrap: wrap;
+
+        .selectableList_item {
+            max-width: 20vw;
+        }
+
+        .streaming-item {
+            display: flex;
+            flex-direction: column;
+
+            align-items: center;
+            justify-content: center;
+
+            padding: 10px;
+
+            .thumbnail {
+                width: 15vw;
+                height: 100px;
+                background-size: cover;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .details {
+                .title {
+                    display: inline-flex;
+                    align-items: center;
+
+                    h1{
+                        font-size: 1.5em;
+                        font-weight: bold;
+                        margin-right: 10px;
+                        margin-bottom: 0;
+                    }
+
+                    span {
+                        font-size: 0.8em;
+                    }
+                }
+            }
+        }
+    }
+}