Compare commits
2 commits
3d99780464
...
8ba9b7f90e
| Author | SHA1 | Date | |
|---|---|---|---|
| 8ba9b7f90e | |||
| 03b882cd1d |
3 changed files with 132 additions and 29 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 class="row center-align">
|
||||
<div id="canvas-container">
|
||||
<video id="sb-video" autoplay muted></video>
|
||||
<canvas id="sb-canvas"></canvas>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue