alberanid/toot-my-t-shirt
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: alberanid:3d99780464dbc39954f586b3c3cf73c9471825d8
Branches Tags
alberanid:master
...
compare: alberanid:8ba9b7f90e76666748b914480de0b43e88b4e955
Branches Tags
alberanid:master

2 commits
3d99780464 ... 8ba9b7f90e

Author SHA1 Message Date
Davide Alberani
8ba9b7f90e feed with latest posts 2019-12-22 13:12:12 +01:00
Davide Alberani
03b882cd1d multiple columns 2019-12-22 10:46:03 +01:00
3 changed files with 132 additions and 29 deletions
Show stats Expand all files Collapse all files

22
static/css/sb.css
View file

@ -7,6 +7,15 @@
margin: 0 auto; margin: 0 auto;
} }
#video-info-container {
padding-top: 0.2em;
}
#izi-container {
height: 4em;
width: 100%;
}
#header { #header {
margin-left: 15px; margin-left: 15px;
} }
@ -33,3 +42,16 @@
z-index: 10000; z-index: 10000;
} }
.feed-images {
max-height: 120px;
}
#right-col-container {
max-height: 640px;
overflow: hidden;
}
/* Firefox camera indicator */
#webrtcIndicator {
display: none;
}

29
static/index.html
View file

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

72
static/js/sb.js
View file

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