Skip to content

Commit

Permalink
Initial Vimeo Support
Browse files Browse the repository at this point in the history 
Vimeo player has rough functionality. Need to work on smoothing out the
edges with the async functions.
  • Loading branch information
@kyle8998
kyle8998 committed Feb 12, 2018
1 parent 641f721 commit 745bf5b
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 4 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ Vynchronize is a online video synchronization platform where you can watch video

This is a work in progress, and it is only in the beta stages. Don't expect it to be perfect!

Vynchronize currently supports YouTube, Daily Motion, and Vimeo!

[![forthebadge](https://forthebadge.com/badges/60-percent-of-the-time-works-every-time.svg)](http://forthebadge.com)

[![Build Status](https://travis-ci.org/kyle8998/Vynchronize.svg?branch=master)](https://travis-ci.org/kyle8998/Vynchronize)
Expand Down
68 changes: 66 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
#dailyArea{
display:none;
}
#vimeoArea{
display:none;
}
</style>


Expand Down Expand Up @@ -130,7 +133,8 @@
</button>
<div class="form-control dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" onclick="changePlayer(roomnum, 0)"><i class="fab fa-youtube"></i> YouTube</a>
<a class="dropdown-item" onclick="changePlayer(roomnum, 1)">Daily Motion</a>
<a class="dropdown-item" onclick="changePlayer(roomnum, 1)"><img width="16px" height="16px" src="http://static1.dmcdn.net/images/dailymotion-logo-ogtag.png.v2779e025da411e7f2" alt="Daily Motion Logo"> Daily Motion</a>
<a class="dropdown-item" onclick="changePlayer(roomnum, 2)"><i class="fab fa-vimeo"></i> Vimeo (Beta)</a>
</div>
</div>

Expand All @@ -157,6 +161,9 @@
src="//www.dailymotion.com/embed/video/VIDEO_ID?PARAMS"
allowfullscreen allow="autoplay"></iframe>
</div>
<div id='vimeoArea'>
<iframe id="player-vimeo" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<!-- Daily motion -->
<!-- <iframe frameborder="0" width="480" height="270"
Expand Down Expand Up @@ -315,6 +322,9 @@ <h2>About Vynchronize</h2>
case 1:
dailyPlay()
break;
case 2:
vimeoPlay()
break;
default:
console.log("Error invalid player id")
}
Expand All @@ -328,6 +338,9 @@ <h2>About Vynchronize</h2>
case 1:
dailyPlayer.pause();
break;
case 2:
vimeoPlayer.pause();
break;
default:
console.log("Error invalid player id")
}
Expand Down Expand Up @@ -388,6 +401,31 @@ <h2>About Vynchronize</h2>
}
break;

case 2:
vimeoPlayer.setCurrentTime(currTime).then(function(seconds) {
// seconds = the actual time that the player seeked to
if (state) {
vimeoPlayer.pause()
}
else {
vimeoPlayer.play()
}

}).catch(function(error) {
switch (error.name) {
case 'RangeError':
// the time was less than 0 or greater than the video’s duration
console.log("the time was less than 0 or greater than the video’s duration")
break;

default:
// some other error occurred
break;
}
});

break;

default:
console.log("Error invalid player id")
}
Expand All @@ -411,6 +449,30 @@ <h2>About Vynchronize</h2>
autoplay: true
});
break;
case 2:
vimeoPlayer.loadVideo(videoId).then(function(id) {
// the video successfully loaded
}).catch(function(error) {
switch (error.name) {
case 'TypeError':
// the id was not a number
break;

case 'PasswordError':
// the video is password-protected and the viewer needs to enter the
// password first
break;

case 'PrivacyError':
// the video is password-protected or private
break;

default:
// some other error occurred
break;
}
});
break;
default:
console.log("Error invalid player id")
}
Expand Down Expand Up @@ -532,7 +594,9 @@ <h2>About Vynchronize</h2>
<!-- Daily Motion -->
<script src="https://api.dmcdn.net/all.js"></script>
<script src="js/dm.js"></script>

<!-- Vimeo -->
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="js/vimeo.js"></script>

</body>

Expand Down
30 changes: 30 additions & 0 deletions js/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ var currPlayer = 0

// 0 - YouTube
// 1 - Daily Motion
// 2 - Vimeo

// Create Youtube Player
socket.on('createYoutube', function(data) {
Expand All @@ -14,6 +15,9 @@ socket.on('createYoutube', function(data) {
var daily = document.getElementById('dailyArea');
daily.style.display='none';

var vimeo = document.getElementById('vimeoArea');
vimeo.style.display='none';

var you = document.getElementById('playerArea');
you.style.display='block';
currPlayer = 0
Expand All @@ -33,6 +37,9 @@ socket.on('createDaily', function(data) {
var you = document.getElementById('playerArea');
you.style.display='none';

var vimeo = document.getElementById('vimeoArea');
vimeo.style.display='none';

var daily = document.getElementById('dailyArea');
daily.style.display='block';
currPlayer = 1
Expand All @@ -43,6 +50,29 @@ socket.on('createDaily', function(data) {
}
});

// Create Vimeo Player
socket.on('createVimeo', function(data) {
if (currPlayer != 2) {
// var playerIn = document.getElementById("playerArea")
// console.log(playerIn.innerHTML)
// playerIn.innerHTML = "<iframe id=\"player-daily\" frameborder=\"0\" width=\"640\" height=\"360\"src=\"//www.dailymotion.com/embed/video/x26m1j4\"allowfullscreen allow=\"autoplay\"></iframe>"

var you = document.getElementById('playerArea');
you.style.display='none';

var daily = document.getElementById('dailyArea');
daily.style.display='none';

var vimeo = document.getElementById('vimeoArea');
vimeo.style.display='block';
currPlayer = 2

// Special call to pause youtube player
// Only have to do on youtube player as it is the default player that autoplays
player.pauseVideo();
}
});


// changeSinglePlayer(roomnum, playerId){
//
Expand Down
29 changes: 27 additions & 2 deletions js/sync.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Calls the play video function on the server
function playVideo(roomnum){
// dailyPlayer.play();
//vimeoPlayer.play()
socket.emit('play video', { room: roomnum });

// Doesn't work well unless called in server
Expand All @@ -11,6 +12,7 @@ function playVideo(roomnum){
function syncVideo(roomnum){
var currTime = 0
var state
var videoId = id

// var syncText = document.getElementById("syncbutton")
// console.log(syncText.innerHTML)
Expand All @@ -25,12 +27,35 @@ function syncVideo(roomnum){
currTime = dailyPlayer.currentTime;
state = dailyPlayer.paused;
break;
case 2:
vimeoPlayer.getCurrentTime().then(function(seconds) {
// seconds = the current playback position
currTime = seconds

// Need to nest async functions
vimeoPlayer.getPaused().then(function(paused) {
// paused = whether or not the player is paused
state = paused
console.log("state="+state)
socket.emit('sync video', { room: roomnum, time: currTime, state: state, videoId: videoId });
}).catch(function(error) {
// an error occurred
console.log("Error: Could not retrieve Vimeo Player state")
});

}).catch(function(error) {
// an error occurred
console.log("Error: Could not retrieve Vimeo player current time")
});
break;
default:
console.log("Error invalid player id")
}

var videoId = id
socket.emit('sync video', { room: roomnum, time: currTime, state: state, videoId: videoId });
// Required due to vimeo asyncronous functionality
if (currPlayer != 2) {
socket.emit('sync video', { room: roomnum, time: currTime, state: state, videoId: videoId });
}
}

// Change playVideo
Expand Down
26 changes: 26 additions & 0 deletions js/vimeo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
var vimeoPlayer = new Vimeo.Player('player-vimeo');


// player.on('play', function() {
// console.log('played the video!');
// });
//
// player.getVideoTitle().then(function(title) {
// console.log('title:', title);
// });

function vimeoPlay(){
vimeoPlayer.getPaused().then(function(paused) {
// paused = whether or not the player is paused
if (paused){
vimeoPlayer.play();
}
else {
vimeoPlayer.pause();
}

}).catch(function(error) {
// an error occurred
console.log("Error: Could not retrieve Vimeo Player state")
});
}
6 changes: 6 additions & 0 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ io.sockets.on('connection', function(socket){
case 1:
io.sockets.in("room-"+roomnum).emit('createDaily', {});
break;
case 2:
io.sockets.in("room-"+roomnum).emit('createVimeo', {});
break;
default:
console.log("Error invalid player id")
}
Expand All @@ -111,6 +114,9 @@ io.sockets.on('connection', function(socket){
case 1:
socket.emit('createDaily', {});
break;
case 2:
socket.emit('createVimeo', {});
break;
default:
console.log("Error invalid player id")
}
Expand Down

0 comments on commit 745bf5b

Please sign in to comment.