2 Commits 3d99780464 ... 8ba9b7f90e

Author SHA1 Message Date
  Davide Alberani 8ba9b7f90e feed with latest posts 1 year ago
  Davide Alberani 03b882cd1d multiple columns 1 year ago
3 changed files with 132 additions and 29 deletions
  1. 22 0
      static/css/sb.css
  2. 44 23
      static/index.html
  3. 66 6
      static/js/sb.js

+ 22 - 0
static/css/sb.css

@@ -7,6 +7,15 @@
     margin: 0 auto;
 }
 
+#video-info-container {
+    padding-top: 0.2em;
+}
+
+#izi-container {
+    height: 4em;
+    width: 100%;
+}
+
 #header {
     margin-left: 15px;
 }
@@ -33,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;
+}

+ 44 - 23
static/index.html

@@ -13,31 +13,52 @@
         <script type="text/javascript" src="/static/js/sb.js"></script>
     </head>
     <body>
-        <div id="main" class="container">
-            <div id="header" class="row center-align">
-                <h1>toot-my-t-shirt</h1>
-                Share the love for your geek t-shirt.
-            </div>
+        <div id="main">
+            <div class="row">
+                <div class="col s3">
+                    <div id="header" class="row center-align">
+                        <h1>toot-my-t-shirt</h1>
+                        Share the love for your geek t-shirt.
+                    </div>
 
-            <div id="button-containers" class="row center-align">
-                <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
-                    <i class="material-icons left">camera</i>Take photo <small>(1 sec delay)</small>
-                </button>
-                <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
-                    <i class="material-icons left">share</i>Share photo
-                </button>
-                <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
-                    <i class="material-icons left">cancel</i>Cancel photo
-                </button>
-                <button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
-                    <i class="material-icons left">photo_camera</i>Grant camera permissions
-                </button>
-            </div>
+                    <div id="button-containers" class="row center-align">
+                        <p>
+                            <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
+                                <i class="material-icons left">camera</i>Take photo
+                            </button>
+                        </p>
+                        <p>
+                            <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
+                                <i class="material-icons left">share</i>Share photo
+                            </button>
+                        </p>
+                        <p>
+                            <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>
+                        <p>
+                            <button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
+                                <i class="material-icons left">photo_camera</i>Grant camera permissions
+                            </button>
+                        </p>
+                    </div>
+                </div>
+
+                <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 class="row center-align">
-                <div id="canvas-container">
-                    <video id="sb-video" autoplay muted></video>
-                    <canvas id="sb-canvas"></canvas>
+                <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>

+ 66 - 6
static/js/sb.js

@@ -1,4 +1,5 @@
-var DEFAULT_DELAY = 7;
+var DEFAULT_DELAY = 20;
+var ACCOUNT_ID = "133328";
 
 var Countdown = {
     _timeout: null,
@@ -118,12 +119,14 @@ function sendData(data) {
             console.log(msg);
             iziToast.error({
                 "title": "😭 something wrong sending the data 😭",
+                "target": "#izi-container",
                 "message": msg,
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
         }
@@ -138,37 +141,44 @@ function sendData(data) {
             iziToast.destroy();
             iziToast.success({
                 "title": msg,
+                "target": "#izi-container",
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
+            updateFeed();
         } else {
             msg = json.message;
             console.log(msg);
             iziToast.error({
                 "title": "😭 backend error 😭",
+                "target": "#izi-container",
                 "message": msg,
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
         }
     }).catch(function(err) {
-        console.log(msg);
+        console.log(err);
         iziToast.error({
             "title": "😭 error connecting to the server 😭",
+            "target": "#izi-container",
             "message": err,
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         cancelPhoto();
@@ -176,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");
@@ -184,6 +194,9 @@ function cancelPhoto() {
     var context = canvas.getContext("2d");
     context.clearRect(0, 0, canvas.width, canvas.height);
     Countdown.stop();
+    if (clearToast) {
+        iziToast.destroy();
+    }
 }
 
 
@@ -204,11 +217,13 @@ function sendPhoto() {
         console.log(msg);
         iziToast.warning({
             "title": msg,
+            "target": "#izi-container",
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         return;
@@ -225,12 +240,14 @@ function _takePhoto(message) {
         console.log(msg);
         iziToast.warning({
             "title": msg,
+            "target": "#izi-container",
             "message": "please grant camera permissions",
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         return;
@@ -260,21 +277,57 @@ function _takePhoto(message) {
     document.querySelector("#send-photo-btn").classList.remove("disabled");
     document.querySelector("#cancel-photo-btn").classList.remove("disabled");
     iziToast.question({
-        "title": "do you like what you see?",
+        "title": "do you like it?",
+        "timeout": DEFAULT_DELAY * 1000,
+        "target": "#izi-container",
         "message": message || "press \"share photo\" to publish!",
         "titleSize": "3em",
         "messageSize": "2em",
         "close": false,
         "drag": false,
         "pauseOnHover": false,
+        "progressBarColor": "red",
         "position": "topCenter"
     });
-    Countdown.start(5, cancelPhoto);
+    Countdown.start(DEFAULT_DELAY, cancelPhoto);
 }
 
 
 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");
 }
 
 
@@ -304,9 +357,11 @@ function initCamera() {
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
     });
+
 }
 
 
@@ -315,3 +370,8 @@ function resizeCanvas(el, canvasID) {
     canvas.width = el.offsetWidth;
     canvas.height = el.offsetHeighth;
 }
+
+
+window.onload = function(e) {
+    updateFeed();
+}