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;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,31 +13,52 @@
|
||||||
<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 id="header" class="row center-align">
|
<div class="row">
|
||||||
<h1>toot-my-t-shirt</h1>
|
<div class="col s3">
|
||||||
Share the love for your geek t-shirt.
|
<div id="header" class="row center-align">
|
||||||
</div>
|
<h1>toot-my-t-shirt</h1>
|
||||||
|
Share the love for your geek t-shirt.
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="button-containers" class="row center-align">
|
<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()">
|
<p>
|
||||||
<i class="material-icons left">camera</i>Take photo <small>(1 sec delay)</small>
|
<button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
|
||||||
</button>
|
<i class="material-icons left">camera</i>Take photo
|
||||||
<button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
|
</button>
|
||||||
<i class="material-icons left">share</i>Share photo
|
</p>
|
||||||
</button>
|
<p>
|
||||||
<button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
|
<button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
|
||||||
<i class="material-icons left">cancel</i>Cancel photo
|
<i class="material-icons left">share</i>Share photo
|
||||||
</button>
|
</button>
|
||||||
<button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
|
</p>
|
||||||
<i class="material-icons left">photo_camera</i>Grant camera permissions
|
<p>
|
||||||
</button>
|
<button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto(true)">
|
||||||
</div>
|
<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="video-info-container" class="col center-align">
|
||||||
<div id="canvas-container">
|
<div id="izi-container"></div>
|
||||||
<video id="sb-video" autoplay muted></video>
|
<div id="canvas-container">
|
||||||
<canvas id="sb-canvas"></canvas>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue