Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Fixed merge conflicts with master
Browse files Browse the repository at this point in the history
  • Loading branch information
ArsalaBangash committed Nov 28, 2019
2 parents 5f4d8b6 + 1044bac commit 8bcfe81
Show file tree
Hide file tree
Showing 4 changed files with 510 additions and 120 deletions.
103 changes: 70 additions & 33 deletions client/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<template>
<v-app id="app-container">
<v-app id="app-container" dark>
<v-content id="v-content" @mousemove="enablePlayback">
<v-text-field style="color: white;" v-model="room" :autofocus="true" placeholder="Room Key"
label="Connect" outlined rounded @keyup.enter="checkstream"/>

<div class="title-container">
<a class="title-text" style="font-size: 130%; font-weight: 300;" ref="title"></a>
</div>
<img src='./icon.png' id="logo" style="width: 8%; float: right; margin-right: 4%; margin-top: -7%;"/>

<v-btn id="connect-btn" @click="checkstream" rounded>Toonin</v-btn>
<v-btn ref="playBtn" @click="manualPlay" style="margin-left: 2%;" rounded hidden>Play</v-btn>
<v-btn id="disconnect-btn" ref="disconnectBtn" @click="disconnectStream" style="margin-left: 2%;" rounded hidden>
Disconnect
</v-btn>

<div style="float: left; margin-top: 5%; margin-right: 0%;" id='timeline-container'>

<div style="float: left; margin-top: 2%; margin-right: 0%;" id='timeline-container'>
<a id="timelineHeader">Status</a>

<v-timeline>
Expand Down Expand Up @@ -41,16 +43,31 @@
</v-timeline-item>

</v-timeline>

</div>

<div>
<audio ref="audio"/>
</div>

<img src='./icon.png' id="logo"/>
<v-bottom-navigation id="bottomBar">
<v-icon style="margin-left: 2%; margin-right: 0%; color: white;">mdi-volume-high</v-icon>
<v-container fluid id="volumeContainer" style="width: 20%; margin-left: -1%;">
<v-slider
v-model="volume"
color="#E3F2FD"
@change="updateVolume"
style="margin-left: 5%;"
></v-slider>
</v-container>

<div class="title-container">
<a class="title-text" style="font-size: 130%; font-weight: 300; color: white; cursor: default" ref="title">
</a>
</div>

</v-bottom-navigation>

<!--<div class="title">{{Timeline}}</div>-->

</v-content>
</v-app>
</template>
Expand All @@ -61,12 +78,12 @@
div.v-text-field {
width: 45%;
margin-right: 0%;
}
img#logo {
height: 20%;
margin-left: 20.5%;
margin-top: 10%;
width: 30% !important;
margin-top: -20% !important;
}
div#timeline-container {
Expand All @@ -75,11 +92,10 @@
div.title-container {
padding: 5%;
float: right;
margin-top: -23%;
margin-left: 5%;
margin-top: -2%;
margin-left: 3%;
width: 50%;
margin-right: 2%;
margin-right: 4%;
overflow: hidden;
white-space: nowrap;
}
Expand All @@ -89,30 +105,54 @@
padding-left: 100%;
animation: title-text 15s linear infinite;
}
#connect-btn {
margin-left: 2% !important;
}
#disconnect-btn {
visibility: hidden !important;
}
#volumeContainer {
width: 38% !important;
margin-left: -3% !important;
margin-right: 0%;
}
}
#v-content {
margin-left: 4%;
margin-top: 4%;
}
#app-container {
/* #app-container {
background-color: rgb(253, 253, 253);
}
} */
.v-text-field {
width: 25%;
}
#bottomBar {
width: 90%;
height: 20%;
margin-left: 5.5%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: fixed;
float: bottom;
background-color: #1976D2;
}
.title-container {
padding: 5%;
float: right;
margin-top: -10%;
padding: 1%;
margin-left: 5%;
width: 30%;
margin-right: 42%;
width: 40%;
overflow: hidden;
white-space: nowrap;
margin-right: 30%;
text-align: center;
}
.title-text {
Expand All @@ -135,13 +175,7 @@
}
#connect-btn {
margin-left: 1.5%;
}
#logo {
height: 35%;
margin-left: 15%;
margin-top: 6%;
margin-left: -23%;
}
.statusCard {
Expand All @@ -159,7 +193,7 @@

<script>
import {init, logMessage, checkstream, enablePlayback, manualPlay} from './app';
import {init, logMessage, checkstream, enablePlayback, manualPlay, updateVolume, disconnectStream} from './app';
export default {
name: "App",
Expand All @@ -171,14 +205,17 @@ export default {
rtcConn: null,
isPlaying: false,
stream: null,
streamTitle: ""
streamTitle: "",
volume: 100
}),
methods: {
logMessage,
checkstream,
enablePlayback,
manualPlay
manualPlay,
updateVolume,
disconnectStream
},
mounted: function() { init(this, this.$refs.audio, this.$refs.playBtn, this.$refs.title); }
mounted: function() { init(this, this.$refs.audio, this.$refs.playBtn, this.$refs.title, this.$refs.disconnectBtn); }
};
</script>
47 changes: 40 additions & 7 deletions client/src/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import io from "socket.io-client";

const ENDPOINT = "https://www.toonin.ml:8443/";
//const ENDPOINT = "http://138.51.171.230:8100/";

const servers = {
iceServers: [
Expand All @@ -23,9 +22,7 @@ const FAILED = "failed";
var socket = io(ENDPOINT, { secure: true });

var incomingStream = null;
var audioElem;
var playBtn;
var titleTag;
var audioElem, playBtn, titleTag, disconnectBtn;
var state = null;

/**
Expand All @@ -34,11 +31,12 @@ var state = null;
* @param {HTMLAudioElement} audioElement reference to <audio> tag on page for playback
* @param {any} playRef <v-btn> for manual audio playback by the user, revealed when auto playback is not possible
*/
export function init(vueDataRef, audioElement, playRef, titleRef) {
export function init(vueDataRef, audioElement, playRef, titleRef, disconnectRef) {
playBtn = playRef;
audioElem = audioElement;
titleTag = titleRef;
state = vueDataRef;
disconnectBtn = disconnectRef;
// bind window close event to handler to notify backend of client
// disconnection
window.onbeforeunload = (event) => { onCloseHandler(); }
Expand Down Expand Up @@ -73,6 +71,30 @@ function updateState(newState) {

export function enablePlayback() { this.$refs.audio.muted = false; }

export function updateVolume() { audioElem.volume = state.volume / 100; }

/**
* Callback for disconnect button to disconnect from the current stream.
* Resets the state of the app.
*/
export function disconnectStream() {
socket.emit('logoff', { from: socket.id, to: state.room });
state.rtcConn.close();
audioElem.srcObject = null;
incomingStream = null;
disconnectBtn.$refs.link.hidden = true;
updateState({
established: false,
room: "",
roomFound: false,
peerID: "",
streamTitle: "",
isPlaying: false
});

titleTag.innerText = state.streamTitle;
}

/**
* callback for <v-btn>.onclick for manual audio playback
*/
Expand All @@ -81,6 +103,7 @@ export function manualPlay() {
audioElem.srcObject = incomingStream;
audioElem.play();
updateState({isPlaying: audioElem.srcObject.active });
disconnectBtn.$refs.link.hidden = false;
}

/**
Expand Down Expand Up @@ -143,7 +166,7 @@ function onDataChannelMsg(messageEvent) {
updateState({ streamTitle: mediaDescription.title });

if(state.streamTitle.length > 0) {
titleTag.innerText = 'Playing: ' + state.streamTitle;
titleTag.innerText = state.streamTitle;
if(state.streamTitle.length <= 41) {
titleTag.classList.remove('title-text');
titleTag.classList.add('title-text-no-animation');
Expand Down Expand Up @@ -182,8 +205,15 @@ function attachRTCliteners(rtcConn) {
rtcConn.connectionState == FAILED) {
updateState({
established: false,
isPlaying: false
isPlaying: false,
streamTitle: ""
});

titleTag.classList.remove('title-text');
titleTag.classList.add('title-text-no-animation');
titleTag.innerText = "";

disconnectBtn.$refs.link.hidden = true;
}
}

Expand All @@ -197,6 +227,7 @@ function attachRTCliteners(rtcConn) {
rtcConn.onaddstream = event => {
logMessage("Stream added");
incomingStream = event.stream;
disconnectBtn.$refs.link.hidden = false;
audioElem.oncanplay = () => {
audioElem.srcObject = incomingStream;
audioElem.onplay = () => {
Expand All @@ -216,6 +247,7 @@ function attachRTCliteners(rtcConn) {

logMessage('track added');
incomingStream = new MediaStream([event.track]);

var _iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad|Macintosh|MacIntel/);
if(_iOSDevice) {
playBtn.$refs.link.hidden = false;
Expand All @@ -240,6 +272,7 @@ function attachRTCliteners(rtcConn) {
audioElem.play().catch = (err) => { playBtn.$refs.link.hidden = false; }
}

disconnectBtn.$refs.link.hidden = false;
}
}

Expand Down
Loading

0 comments on commit 8bcfe81

Please sign in to comment.