feed with latest posts

static/css/sb.css

@@ -42,3 +42,16 @@
     z-index: 10000;
 }
 
+.feed-images {
+    max-height: 120px;
+}
+
+#right-col-container {
+    max-height: 640px;
+    overflow: hidden;
+}
+
+/* Firefox camera indicator */
+#webrtcIndicator {
+    display: none;
+}

static/index.html

@@ -33,7 +33,7 @@
                             </button>
                         </p>
                         <p>
-                            <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
+                            <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto(true)">
                                 <i class="material-icons left">cancel</i>Cancel photo
                             </button>
                         </p>
@@ -48,10 +48,18 @@
                 <div id="video-info-container" class="col center-align">
                     <div id="izi-container"></div>
                     <div id="canvas-container">
+                        use the button at the left to grant camera permissions
                         <video id="sb-video" autoplay muted></video>
                         <canvas id="sb-canvas"></canvas>
                     </div>
                 </div>
+
+                <div id="right-col-container" class="col center-align s3">
+                    <div id="header" class="row center-align">
+                        <h1>latest</h1>
+                    </div>
+                    <div id="images-container"></div>
+                </div>
             </div>
         </div>
     </body>

static/js/sb.js

@@ -1,4 +1,5 @@
 var DEFAULT_DELAY = 20;
+var ACCOUNT_ID = "133328";
 
 var Countdown = {
     _timeout: null,
@@ -149,6 +150,7 @@ function sendData(data) {
                 "progressBarColor": "red",
                 "position": "topCenter"
             });
+            updateFeed();
         } else {
             msg = json.message;
             console.log(msg);
@@ -166,7 +168,7 @@ function sendData(data) {
             });
         }
     }).catch(function(err) {
-        console.log(msg);
+        console.log(err);
         iziToast.error({
             "title": "😭 error connecting to the server 😭",
             "target": "#izi-container",
@@ -184,7 +186,7 @@ function sendData(data) {
 }
 
 
-function cancelPhoto() {
+function cancelPhoto(clearToast) {
     console.log("cancel photo");
     document.querySelector("#send-photo-btn").classList.add("disabled");
     document.querySelector("#cancel-photo-btn").classList.add("disabled");
@@ -192,7 +194,9 @@ function cancelPhoto() {
     var context = canvas.getContext("2d");
     context.clearRect(0, 0, canvas.width, canvas.height);
     Countdown.stop();
-    iziToast.destroy();
+    if (clearToast) {
+        iziToast.destroy();
+    }
 }
 
 
@@ -290,7 +294,40 @@ function _takePhoto(message) {
 
 
 function takePhoto(msg) {
-    window.setTimeout(function() { _takePhoto(msg); }, 1000);
+    _takePhoto(msg);
+    // in case we need to introduce a delay:
+    // window.setTimeout(function() { _takePhoto(msg); }, 1000);
+}
+
+
+function loadMedia(url) {
+    fetch(url)
+    .then((response) => response.text())
+    .then((jdata) => {
+        var data = JSON.parse(jdata);
+        var imgCont = document.getElementById("images-container");
+        imgCont.innerHTML = "";
+        for (var i = 0 ; i < data.length; i++) {
+            var elem = data[i];
+            if (!(elem.media_attachments && elem.media_attachments.length > 0)) {
+                continue;
+            }
+            var imgData = elem.media_attachments[0];
+            if (imgData.type != "image" || !imgData.preview_url) {
+                continue;
+            }
+            var imgUrl = imgData.preview_url;
+            imgCont.innerHTML += "<p><img class=\"feed-images\" src=" + imgUrl + "></p>";
+        }
+    })
+    .catch((error) => {
+        console.warn(error);
+    });
+}
+
+
+function updateFeed() {
+    loadMedia("https://chaos.social/api/v1/accounts/" + ACCOUNT_ID + "/statuses");
 }
 
 
@@ -324,6 +361,7 @@ function initCamera() {
             "position": "topCenter"
         });
     });
+
 }
 
 
@@ -332,3 +370,8 @@ function resizeCanvas(el, canvasID) {
     canvas.width = el.offsetWidth;
     canvas.height = el.offsetHeighth;
 }
+
+
+window.onload = function(e) {
+    updateFeed();
+}