Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Broadcasting mode for instructors #6

Closed
wants to merge 5 commits into from
Closed

Broadcasting mode for instructors #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e71c7bf
Created new NPM package `peerinstruction`
pbanaszkiewicz Jun 8, 2014
9023312
Removed NPM package, admin~>instructor, some UI tweaks
pbanaszkiewicz Jun 11, 2014
879a6c7
Introducing instructor's broadcasting mode. With bugs.
pbanaszkiewicz Jun 14, 2014
612de85
Fixing "../app.js" ~> "/app.js" within HTML templates
pbanaszkiewicz Jun 15, 2014
7bf6f8c
Fixing students mode (split mode)
pbanaszkiewicz Jun 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
app.js
node_modules/
client/app.js
client/third_party/peer.js
27 changes: 0 additions & 27 deletions client/html/admin.html
View file
Open in desktop

This file was deleted.

42 changes: 42 additions & 0 deletions client/html/instructor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Instructor's dashboard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">

<script type="text/javascript" src="/third_party/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/third_party/peer.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/app.js"></script>

<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="/styles/styles.css" />

<script>
$(function() {
var is_admin = true,
el_my_video = $('#my-video'),
el_their_video = $('#container-their-video'),
pittPeer = APP.newPP(is_admin, el_my_video, el_their_video);
});
</script>
</head>

<body>
<h1>Instructor's view</h1>
<h3>Current mode: <span id="current_mode"></span></h3>
<input type="button" id="broadcast" value="Start broadcasting"><br>
or change mode to:
<input type="button" id="bMode" value="Few" />

<div id="main">
You are: <span id="you_are"> </span>
<div id="list_users"></div>
<div id="video_chat_area">
<div id="local_video"> <video id="my-video" muted="true" autoplay></video> </div>
<div id="container-their-video" class=""> </div>
</div>
</div>
</body>

</html>
56 changes: 29 additions & 27 deletions client/html/user.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,36 @@
<!DOCTYPE HTML>
<!-- vim: set ts=2 et:-->
<html lang="en">
<head>
<title>peerjs playground</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Student's dashboard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">

<script type="text/javascript" src="/third_party/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/third_party/peer.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/app.js"></script>
<script type="text/javascript" src="/third_party/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/third_party/peer.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/app.js"></script>

<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="/styles/styles.css" />
<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="/styles/styles.css" />

<script>
$(function() {
var is_admin = false,
el_my_video = $('#my-video'),
el_their_video = $('#container-their-video'),
pittPeer = APP.newPP(is_admin, el_my_video, el_their_video);
});
</script>

<div id="main">
You are: <span id="you_are"> </span>
<div id="list_users"> </div>
<div id="video_chat_area">
<div id="local_video"> <video id="my-video" muted="true" autoplay></video> </div>
<div id="container-their-video" class=""> </div>
</div>
</div>
<script>
$(function() {
var is_admin = false,
el_my_video = $('#my-video'),
el_their_video = $('#container-their-video'),
pittPeer = APP.newPP(is_admin, el_my_video, el_their_video);
});
</script>
</head>

<body>
<h1>Students's view</h1>
<div id="main">
<p>You are: <span id="you_are"> </span></p>
<div id="list_users"> </div>
<div id="video_chat_area">
<div id="local_video"> <video id="my-video" muted="true" autoplay></video> </div>
<div id="container-their-video" class=""> </div>
</div>
</div>
</body>

</html>
72 changes: 58 additions & 14 deletions client/js/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,71 @@
APP.newPP = function(isAdmin, el_my_video, el_their_video) {
var my_id, iface = {},
socket = io.connect('http://localhost:8111'),
mode = NOT_WORKING,
mode_display_element = "#current_mode",
change_mode_element = "#bMode",
students = Array(),
v_chat; // All the video chat logic

// some "constants"
var NOT_WORKING = 0;
var BROADCAST_MODE = 2;
var GROUP_MODE = 3;

function set_click_mode_change() {
$('#bMode').click(function() {
var b = $('#bMode'),
$(change_mode_element).click(function() {
var b = $(change_mode_element),
currVal = b.val(),
newVal = (currVal === "All") ? "Few" : "All";

b.attr('value', newVal);
socket.emit('mode_change', currVal);
b.attr('value', newVal);
socket.emit('mode_change', currVal);
mode = (currVal === "All") ? BROADCAST_MODE : GROUP_MODE;
show_mode(mode);
});
}

function show_mode(mode_n) {
console.log("changing mode!")
$(mode_display_element).text(
(mode_n === BROADCAST_MODE) ? "Broadcasting" : "Working in groups"
)
}

function set_click_start_broadcasting() {
$("#broadcast").click(function() {
in_groups = false; // to bypass something ugly
broadcast_mode = true; // to enable broadcast mode
v_chat.start(broadcast_mode, in_groups, function() {
console.log("I'm calling: ", students)
v_chat.make_1way_calls(students)
});
})
}

function for_admin() {
console.log("Admin mode.");
console.log("You're now an instructor.");
socket.on('list_rooms', function(listRooms) {
console.log(listRooms);
students = Array();

// console.log(listRooms);
var r = $('#list_users');
r.empty();
Object.keys(listRooms).forEach(function(name, i, a) {
r.append("<ul>" + name);
listRooms[name].forEach(function(user, _i, _a) {
r.append("<li>" + user);
r.append("<li>" + user + "</li>");
students.push(user)
});
r.append("</ul>");
});
});

set_click_mode_change();
set_click_start_broadcasting();
socket.emit('mode_change', "All");
mode = BROADCAST_MODE;
show_mode("#current_mode");
}

function for_peer() {
Expand All @@ -45,39 +81,47 @@ APP.newPP = function(isAdmin, el_my_video, el_their_video) {
});

if (change_type === 'few') {
v_chat.end_calls();
console.log("We are in a room, video time!")
console.log("Calling to: " + listUsers)
v_chat.start(function() { v_chat.make_calls(listUsers); });
in_groups = true;
broadcast_mode = false;
v_chat.start(broadcast_mode, in_groups, function() {
v_chat.make_calls(listUsers);
});
}

if (change_type === 'all') {
console.log("Out of video chat mode!");
v_chat.end_calls();
v_chat.start(false, false, function() {})
console.log("Out of video chat mode! Now teacher can broadcast");
}
});
}

function for_both() {
socket.on('connect', function() {
v_chat = APP.videoChat(el_my_video, el_their_video, function() {
my_id = v_chat.peer_id();
$("#you_are").html(my_id);
v_chat = APP.videoChat(el_my_video, el_their_video, function(peer) {
my_id = peer.id
// my_id = v_chat.peer_id();
$("#you_are").text(my_id);
if (isAdmin)
socket.emit('newadmin', my_id);
else
socket.emit('newpeer', my_id);
});
});

// XXX: this never happens?
socket.on('mode_change', function(data) {
console.log('mode_change: ' + data);
});
}

for_both()

if (isAdmin) for_admin();
else for_peer();

for_both()

return iface;
};
Loading