diff --git a/web-service/server/public/css/index.css b/web-service/server/public/css/index.css
index fd1cbba53e2e8efafcfd90eb95a0926ed70146e3..1a1d01a1a9152da2700863fbc2a4b3e565467623 100644
--- a/web-service/server/public/css/index.css
+++ b/web-service/server/public/css/index.css
@@ -36,17 +36,22 @@ body {
}
.ftlab-card-component {
- width: 150px;
+ width: 250px;
height: auto;
margin: auto;
text-align: center;
border: 1px solid black;
}
- .thumbnail-img {
- width: 150px;
- }
-
#container {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
display: flex;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/web-service/server/public/js/index.js b/web-service/server/public/js/index.js
index 12b529f17d65fa0f3c0dcc3f832b1279edb185a7..0f9ca0e384bab661d84948799756662ff4526035 100644
--- a/web-service/server/public/js/index.js
+++ b/web-service/server/public/js/index.js
@@ -1,24 +1,24 @@
const checkIfLoggedIn = async () => {
-// const token = window.localStorage.getItem('token')
-// console.log(token)
-// if(!token){
-// console.log("You need to login")
-// renderLogin()
-// }else{
+ const token = window.localStorage.getItem('token')
+ console.log(token)
+ if(!token){
+ console.log("You need to login")
+ renderLogin()
+ }else{
-// //Check if the token is valid
-// const response = await fetch('http://localhost:8080/auth/validation', {
-// method: 'POST',
-// headers: {'Authorization': token}
-// })
-// console.log('RESPONSE', response)
+ //Check if the token is valid
+ const response = await fetch('http://localhost:8080/auth/validation', {
+ method: 'POST',
+ headers: {'Authorization': token}
+ })
+ console.log('RESPONSE', response)
-// //Token is valid, show available streams
-// if(response.status === 200){
-// console.log("SUCCESS")
- renderThumbnails()
- // }
- // }
+ //Token is valid, show available streams
+ if(response.status === 200){
+ console.log("SUCCESS")
+ renderThumbnails()
+ }
+ }
}
//Redirects the user to google authentication
@@ -48,28 +48,29 @@ const videoPlayer = () => {
* Creates thumbnail (image) for all available streams and adds them to div class='container'
*/
const renderThumbnails = async () => {
- const thumbnails = await getAvailableStreams();
- console.log('THUMBNAILS', thumbnails)
+ // const thumbnails = await getAvailableStreams();
+ //console.log('THUMBNAILS', thumbnails)
const containerDiv = document.getElementById('container')
containerDiv.innerHTML = '';
console.log(containerDiv)
- for(var i=0; i<thumbnails.length; i++){
- const encodedURI = encodeURIComponent(thumbnails[i])
- console.log("THUMBNAIL[i]", thumbnails[i])
- try{
- const someData = await fetch(`http://localhost:8080/stream/rgb?uri=${encodedURI}`)
- console.log('SOME DATA', someData)
- if(!someData.ok){
- throw new Error('Image not found')
- }
- const myBlob = await someData.blob();
- console.log('BLOB', myBlob)
- const objectURL = URL.createObjectURL(myBlob);
- containerDiv.innerHTML += createCard(objectURL, i+4, encodedURI)
- }catch(err){
- console.log("Couldn't create thumbnail");
- console.log(err)
- }
+ for(var i=0; i<2; i++){
+ // const encodedURI = encodeURIComponent(thumbnails[i])
+ // console.log("THUMBNAIL[i]", thumbnails[i])
+ // try{
+ // const someData = await fetch(`http://localhost:8080/stream/rgb?uri=${encodedURI}`)
+ // console.log('SOME DATA', someData)
+ // if(!someData.ok){
+ // throw new Error('Image not found')
+ // }
+ // const myBlob = await someData.blob();
+ // console.log('BLOB', myBlob)
+ // const objectURL = URL.createObjectURL(myBlob);
+ containerDiv.innerHTML += createCard()
+ // containerDiv.innerHTML += createCard(objectURL, i+4, encodedURI)
+ // }catch(err){
+ // console.log("Couldn't create thumbnail");
+ // console.log(err)
+ // }
}
}
@@ -100,11 +101,19 @@ const renderLogin = () => {
</div>`
}
-const createCard = (url, viewers, uri) => {
- return `<div class='ftlab-card-component' >
- <img src='${url}' class="thumbnail-img" alt="Hups" width='500px'></img>
- <p>Viewers: ${viewers}</p>
- <button onclick="window.location.href='/stream/${uri}'">button</button>
+// const createCard = (url, viewers, uri) => {
+// return `<div class='ftlab-card-component' >
+// <img src='${url}' class="thumbnail-img" alt="Hups"></img>
+// <p>Viewers: ${viewers}</p>
+// <button onclick="window.location.href='/stream/${uri}'">button</button>
+// </div>`
+// }
+
+const createCard = () => {
+ return `<div class='ftlab-card-component'>
+ <img src='https://via.placeholder.com/250x150' class="thumbnail-img" width="250px" alt="Hups"></img>
+ <p>Viewers: yes</p>
+ <button onclick="window.location.href='/stream/URI'">button</button>
</div>`
}
diff --git a/web-service/server/src/index.js b/web-service/server/src/index.js
index cf8c88e1010d463b7a1d07fa7475d48c271f1ad5..a1c03df13bcbfa85d8a61a6fd3517678f2042635 100644
--- a/web-service/server/src/index.js
+++ b/web-service/server/src/index.js
@@ -12,7 +12,7 @@ const User = require('./models/users')
const Configs = require('./models/generic')
const Disparity = require('./models/disparity')
const bodyParser = require('body-parser')
-const cors = require('cors')
+//const cors = require('cors')
// ---- INDEXES ----------------------------------------------------------------
app.use(passport.initialize());
@@ -29,13 +29,13 @@ passport.deserializeUser((userDataFromCookie, done) => {
done(null, userDataFromCookie);
})
-// mongoose.connect(config.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
-// .then(() => {
-// console.log('Connected to MongoDB');
-// })
-// .catch((err) => {
-// console.log(err);
-// })
+mongoose.connect(config.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
+ .then(() => {
+ console.log('Connected to MongoDB');
+ })
+ .catch((err) => {
+ console.log(err);
+ })
let peer_by_id = {};
//let uri_to_peer = {};
@@ -314,6 +314,12 @@ app.get('/stream/config', async(req, res) => {
app.get('/stream', (req, res) => {
let uri = req.query.uri;
+
+
+ /**
+ * It should render a new html page that has it's own dedicated js-file
+ * The js-file should do everything related to the decoding of bitstream.
+ */
console.log(uri)
})