Joachim Bauch
12 years ago
7 changed files with 676 additions and 2 deletions
@ -0,0 +1,102 @@ |
|||||||
|
/* |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2014 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
.youtubevideo { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideopane { |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
overflow: auto; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#youtubecontainer { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
#youtubeplayerinfo { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 10%; |
||||||
|
opacity: 0; |
||||||
|
pointer-events: auto; |
||||||
|
text-align: center; |
||||||
|
transition-property: opacity; |
||||||
|
transition-duration: .2s; |
||||||
|
z-index: 10; |
||||||
|
&:hover { |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#youtubeplayerinfo div { |
||||||
|
background-color: #f9f2f4; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 20px 40px; |
||||||
|
display: inline-block; |
||||||
|
font-size: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .welcome { |
||||||
|
max-width: 700px; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .welcome-container { |
||||||
|
max-width: 700px; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .welcome-logo { |
||||||
|
font-size: 10em; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.mainYoutubevideo #youtubevideo { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .row { |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo label { |
||||||
|
color: white; |
||||||
|
text-shadow: 1px 1px 1px $text-color; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .overlaybar { |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.youtubevideo .overlaybar-content { |
||||||
|
width: 100%; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
@ -0,0 +1,483 @@ |
|||||||
|
/* |
||||||
|
* Spreed WebRTC. |
||||||
|
* Copyright (C) 2013-2014 struktur AG |
||||||
|
* |
||||||
|
* This file is part of Spreed WebRTC. |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU Affero General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU Affero General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU Affero General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
* |
||||||
|
*/ |
||||||
|
define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], function($, _, template, BigScreen) { |
||||||
|
|
||||||
|
return ["$window", "mediaStream", "alertify", "translation", "safeApply", "appData", function($window, mediaStream, alertify, translation, safeApply, appData) { |
||||||
|
|
||||||
|
var isYouTubeIframeAPIReady = $.Deferred(); |
||||||
|
$window.onYouTubeIframeAPIReady = function() { |
||||||
|
console.log("YouTube IFrame ready"); |
||||||
|
isYouTubeIframeAPIReady.resolve(); |
||||||
|
}; |
||||||
|
|
||||||
|
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { |
||||||
|
|
||||||
|
var addedIframeScript = false; |
||||||
|
var player = null; |
||||||
|
var playerReady = null; |
||||||
|
var isPublisher = null; |
||||||
|
var isPaused = null; |
||||||
|
var seekDetector = null; |
||||||
|
var prevTime = null; |
||||||
|
var prevNow = null; |
||||||
|
|
||||||
|
var stateEvents = { |
||||||
|
"-1": "youtube.unstarted", |
||||||
|
"0": "youtube.ended", |
||||||
|
"1": "youtube.playing", |
||||||
|
"2": "youtube.paused", |
||||||
|
"3": "youtube.buffering", |
||||||
|
"5": "youtube.videocued" |
||||||
|
}; |
||||||
|
var errorIds = { |
||||||
|
"2": "invalidParameter", |
||||||
|
"5": "htmlPlayerError", |
||||||
|
"100": "videoNotFound", |
||||||
|
"101": "notAllowedEmbedded", |
||||||
|
"150": "notAllowedEmbedded" |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.playbackActive = false; |
||||||
|
$scope.hideControlsBar = true; |
||||||
|
$scope.currentVideoUrl = null; |
||||||
|
$scope.youtubeurl = "http://www.youtube.com/watch?v=_C92v6uKCIU"; |
||||||
|
|
||||||
|
var onPlayerReady = function(event) { |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
playerReady.resolve(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
var onPlayerError = function(event) { |
||||||
|
var error = errorIds[event.data] || "unknownError"; |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
scope.$emit("youtube.error", error); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
var onPlayerStateChange = function(event) { |
||||||
|
var msg = stateEvents[event.data]; |
||||||
|
if (typeof msg === "undefined") { |
||||||
|
console.warn("Unknown YouTube player state", event) |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
$scope.$apply(function(scope) { |
||||||
|
console.log("State change", msg, event.target); |
||||||
|
scope.$emit(msg, event.target); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
var getYouTubeId = function(url) { |
||||||
|
/* |
||||||
|
* Supported URLs: |
||||||
|
* http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
|
||||||
|
* http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
|
||||||
|
* http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
|
||||||
|
* http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
|
||||||
|
* http://www.youtube.com/embed/0zM3nApSvMg?rel=0
|
||||||
|
* http://www.youtube.com/watch?v=0zM3nApSvMg
|
||||||
|
* http://youtu.be/0zM3nApSvMg
|
||||||
|
* |
||||||
|
* Source: http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTube
|
||||||
|
*/ |
||||||
|
if (!url) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; |
||||||
|
var match = url.match(regExp); |
||||||
|
if (match && match[7].length == 11) { |
||||||
|
return match[7]; |
||||||
|
} |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
var startDetectSeek = function() { |
||||||
|
var checkSeek = function() { |
||||||
|
if (!player) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var now = new Date(); |
||||||
|
var time = player.getCurrentTime(); |
||||||
|
if (prevTime === null) { |
||||||
|
prevTime = time; |
||||||
|
} |
||||||
|
if (prevNow === null) { |
||||||
|
prevNow = now; |
||||||
|
} |
||||||
|
var deltaTime = Math.abs(time - prevTime); |
||||||
|
var deltaNow = (now - prevNow) * 0.001; |
||||||
|
if (deltaTime > deltaNow * 1.1) { |
||||||
|
safeApply($scope, function(scope) { |
||||||
|
scope.$emit("youtube.seeked", time); |
||||||
|
}); |
||||||
|
} |
||||||
|
prevNow = now; |
||||||
|
prevTime = time; |
||||||
|
}; |
||||||
|
|
||||||
|
if (!seekDetector) { |
||||||
|
seekDetector = $window.setInterval(function() { |
||||||
|
checkSeek(); |
||||||
|
}, 1000); |
||||||
|
} |
||||||
|
checkSeek(); |
||||||
|
}; |
||||||
|
|
||||||
|
var stopDetectSeek = function() { |
||||||
|
if (seekDetector) { |
||||||
|
$window.clearInterval(seekDetector); |
||||||
|
seekDetector = null; |
||||||
|
} |
||||||
|
prevNow = null; |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.$on("youtube.playing", function() { |
||||||
|
prevTime = null; |
||||||
|
startDetectSeek(); |
||||||
|
if (isPaused) { |
||||||
|
isPaused = false; |
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
mediaStreamSendYouTubeVideo(peercall, currentToken, { |
||||||
|
Type: "Resume", |
||||||
|
Resume: true |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on("youtube.buffering", function() { |
||||||
|
startDetectSeek(); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on("youtube.paused", function() { |
||||||
|
stopDetectSeek(); |
||||||
|
if (!isPublisher || !currentToken) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!isPaused) { |
||||||
|
isPaused = true; |
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
mediaStreamSendYouTubeVideo(peercall, currentToken, { |
||||||
|
Type: "Pause", |
||||||
|
Pause: true |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on("youtube.ended", function() { |
||||||
|
stopDetectSeek(); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on("youtube.seeked", function($event, position) { |
||||||
|
if (!isPublisher || !currentToken) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
mediaStreamSendYouTubeVideo(peercall, currentToken, { |
||||||
|
Type: "Seek", |
||||||
|
Seek: { |
||||||
|
"position": position |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
var playVideo = function(id) { |
||||||
|
playerReady.done(function() { |
||||||
|
$("#youtubeplayer").show(); |
||||||
|
$scope.playbackActive = true; |
||||||
|
prevTime = null; |
||||||
|
prevNow = null; |
||||||
|
isPaused = null; |
||||||
|
player.loadVideoById(id); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
var createVideoPlayer = function(with_controls) { |
||||||
|
if (player && isPublisher !== with_controls) { |
||||||
|
player.destroy(); |
||||||
|
player = null; |
||||||
|
playerReady = null; |
||||||
|
} |
||||||
|
|
||||||
|
if (!playerReady) { |
||||||
|
playerReady = $.Deferred(); |
||||||
|
} |
||||||
|
|
||||||
|
isYouTubeIframeAPIReady.done(function() { |
||||||
|
if (!player) { |
||||||
|
var origin = $window.location.protocol + "//" + $window.location.host; |
||||||
|
player = new YT.Player("youtubeplayer", { |
||||||
|
height: "390", |
||||||
|
width: "640", |
||||||
|
playerVars: { |
||||||
|
"enablejsapi": "1", |
||||||
|
"hl": appData.language || "en", |
||||||
|
"autohide": "1", // hide all controls on playback
|
||||||
|
"rel": "0", // don't show related videos on end
|
||||||
|
"showinfo": "0", // don't show title/uploader before start
|
||||||
|
"playsinline": "1", // play inline on iOS if possible
|
||||||
|
"controls": with_controls ? "2" : "0", |
||||||
|
"disablekb": with_controls ? "0" : "1", |
||||||
|
"origin": origin |
||||||
|
}, |
||||||
|
events: { |
||||||
|
"onReady": onPlayerReady, |
||||||
|
"onStateChange": onPlayerStateChange |
||||||
|
} |
||||||
|
}); |
||||||
|
isPublisher = with_controls; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.shareVideo = function(url) { |
||||||
|
var id = getYouTubeId(url); |
||||||
|
if (!id) { |
||||||
|
alertify.dialog.alert(translation._("Unknown URL format. Please make sure to enter a valid YouTube URL.")); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
mediaStreamSendYouTubeVideo(peercall, currentToken, { |
||||||
|
Type: "Play", |
||||||
|
Play: { |
||||||
|
"url": url, |
||||||
|
"id": id |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
createVideoPlayer(true); |
||||||
|
$scope.youtubeurl = ""; |
||||||
|
$scope.currentVideoUrl = url; |
||||||
|
playVideo(id); |
||||||
|
}; |
||||||
|
|
||||||
|
mediaStream.api.e.on("received.youtubevideo", function(event, id, from, data, p2p) { |
||||||
|
if (!p2p) { |
||||||
|
console.warn("Received YouTubeVideo info without p2p. This should not happen!"); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (data.Type) { |
||||||
|
switch (data.Type) { |
||||||
|
case "Show": |
||||||
|
console.log("Received YouTubeVideo show request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
scope.layout.youtubevideo = true; |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
case "Hide": |
||||||
|
console.log("Received YouTubeVideo hide request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
scope.layout.youtubevideo = false; |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
case "Play": |
||||||
|
console.log("Received YouTubeVideo play request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
createVideoPlayer(false); |
||||||
|
scope.currentVideoUrl = data.Play.url; |
||||||
|
playVideo(data.Play.id); |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
case "Pause": |
||||||
|
console.log("Received YouTubeVideo pause request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
if (player) { |
||||||
|
player.pauseVideo(); |
||||||
|
} |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
case "Resume": |
||||||
|
console.log("Received YouTubeVideo resume request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
if (player) { |
||||||
|
player.playVideo(); |
||||||
|
} |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
case "Seek": |
||||||
|
console.log("Received YouTubeVideo seek request", data); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
if (player) { |
||||||
|
player.seekTo(data.Seek.position); |
||||||
|
} |
||||||
|
}); |
||||||
|
break; |
||||||
|
|
||||||
|
default: |
||||||
|
console.log("Received unknown YouTubeVideo event", data); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
var peers = {}; |
||||||
|
var youtubevideos = []; |
||||||
|
var youtubevideoCount = 0; |
||||||
|
var currentToken = null; |
||||||
|
var tokenHandler = null; |
||||||
|
|
||||||
|
var mediaStreamSendYouTubeVideo = function(peercall, token, params) { |
||||||
|
mediaStream.api.apply("sendYouTubeVideo", { |
||||||
|
send: function(type, data) { |
||||||
|
if (!peercall.peerconnection.datachannelReady) { |
||||||
|
return peercall.e.one("dataReady", function() { |
||||||
|
peercall.peerconnection.send(data); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
return peercall.peerconnection.send(data); |
||||||
|
} |
||||||
|
} |
||||||
|
})(peercall.id, token, params); |
||||||
|
}; |
||||||
|
|
||||||
|
var connector = function(token, peercall) { |
||||||
|
if (peers.hasOwnProperty(peercall.id)) { |
||||||
|
// Already got a connection.
|
||||||
|
return; |
||||||
|
} |
||||||
|
peers[peercall.id] = true; |
||||||
|
mediaStreamSendYouTubeVideo(peercall, token, { |
||||||
|
Type: "Show", |
||||||
|
Show: true |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// Updater function to bring in new calls.
|
||||||
|
var updater = function(event, state, currentcall) { |
||||||
|
switch (state) { |
||||||
|
case "completed": |
||||||
|
case "connected": |
||||||
|
connector(currentToken, currentcall); |
||||||
|
break; |
||||||
|
case "closed": |
||||||
|
delete peers[currentcall.id]; |
||||||
|
if (_.isEmpty(peers)) { |
||||||
|
console.log("All peers disconnected, stopping youtubevideo"); |
||||||
|
$scope.$apply(function(scope) { |
||||||
|
scope.hideYouTubeVideo(); |
||||||
|
}); |
||||||
|
} |
||||||
|
break; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.showYouTubeVideo = function() { |
||||||
|
if (!addedIframeScript) { |
||||||
|
$element.append($('<script src="https://www.youtube.com/iframe_api"></script>')); |
||||||
|
addedIframeScript = true; |
||||||
|
} |
||||||
|
$scope.layout.youtubevideo = true; |
||||||
|
$scope.$emit("mainview", "youtubevideo", true); |
||||||
|
if (currentToken) { |
||||||
|
mediaStream.tokens.off(currentToken, tokenHandler); |
||||||
|
} |
||||||
|
|
||||||
|
// Create token to register with us and send token out to all peers.
|
||||||
|
// Peers when connect to us with the token and we answer.
|
||||||
|
currentToken = "youtubevideo_" + $scope.id + "_" + (youtubevideoCount++); |
||||||
|
|
||||||
|
// Create callbacks are called for each incoming connections.
|
||||||
|
tokenHandler = mediaStream.tokens.create(currentToken, function(event, currenttoken, to, data, type, to2, from, peer) { |
||||||
|
console.log("YouTubeVideo create", currenttoken, data, type, peer); |
||||||
|
youtubevideos.push(peer); |
||||||
|
}, "youtubevideo"); |
||||||
|
|
||||||
|
// Connect all current calls.
|
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
connector(currentToken, peercall); |
||||||
|
}); |
||||||
|
// Catch later calls too.
|
||||||
|
mediaStream.webrtc.e.on("statechange", updater); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.hideYouTubeVideo = function() { |
||||||
|
$scope.$emit("mainview", "youtubevideo", false); |
||||||
|
$scope.layout.youtubevideo = false; |
||||||
|
if (currentToken) { |
||||||
|
mediaStream.webrtc.callForEachCall(function(peercall) { |
||||||
|
mediaStreamSendYouTubeVideo(peercall, currentToken, { |
||||||
|
Type: "Hide", |
||||||
|
Hide: true |
||||||
|
}); |
||||||
|
}); |
||||||
|
mediaStream.tokens.off(currentToken, tokenHandler); |
||||||
|
currentToken = null; |
||||||
|
} |
||||||
|
if (player) { |
||||||
|
player.destroy(); |
||||||
|
player = null; |
||||||
|
} |
||||||
|
isPublisher = null; |
||||||
|
$scope.playbackActive = false; |
||||||
|
peers = {}; |
||||||
|
stopDetectSeek(); |
||||||
|
playerReady = null; |
||||||
|
mediaStream.webrtc.e.off("statechange", updater); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.$watch("layout.youtubevideo", function(newval, oldval) { |
||||||
|
if (newval && !oldval) { |
||||||
|
$scope.showYouTubeVideo(); |
||||||
|
} else if (!newval && oldval) { |
||||||
|
$scope.hideYouTubeVideo(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$watch("layout.main", function(newval, oldval) { |
||||||
|
if (newval && newval !== "youtubevideo") { |
||||||
|
$scope.hideYouTubeVideo(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}]; |
||||||
|
|
||||||
|
var compile = function(tElement, tAttr) { |
||||||
|
return function(scope, iElement, iAttrs, controller) { |
||||||
|
$(iElement).on("dblclick", ".videoContainer", _.debounce(function(event) { |
||||||
|
scope.toggleFullscreen(event.delegateTarget); |
||||||
|
}, 100, true)); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
replace: true, |
||||||
|
scope: true, |
||||||
|
template: template, |
||||||
|
controller: controller, |
||||||
|
compile: compile |
||||||
|
}; |
||||||
|
|
||||||
|
}]; |
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
<div class="youtubevideo"> |
||||||
|
<div class="youtubevideopane nicescroll"> |
||||||
|
<form class="container-fluid form" role="form"> |
||||||
|
|
||||||
|
<div class="welcome container-fluid" ng-show="!playbackActive"> |
||||||
|
<div class="welcome-logo fa fa-youtube"></div> |
||||||
|
<h1>{{_("Share a video with everyone in the call")}}</h1> |
||||||
|
<div class="welcome-container"> |
||||||
|
<p> |
||||||
|
<div class="form-group welcome-input"> |
||||||
|
<input type="text" class="form-control input-lg" ng-model="youtubeurl" placeholder="{{_('YouTube URL')}}"> |
||||||
|
<div class="welcome-input-buttons"> |
||||||
|
<button class="btn btn-primary" type="button" ng-disabled="!youtubeurl" ng-click="shareVideo(youtubeurl)">{{_("Share")}}</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</p> |
||||||
|
<center> |
||||||
|
<p ng-show="roomdata.name"><i class="fa fa-external-link"></i> <a href="{{roomdata.link}}" ng-click="changeRoomToId(roomdata.name);$event.preventDefault()">{{roomdata.link}}</a></p> |
||||||
|
</center> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- |
||||||
|
<div class="row welcome" ng-show="!playbackActive"> |
||||||
|
<h1 class="fa fa-youtube"></h1> |
||||||
|
<div class="center-block"> |
||||||
|
<p>{{_('Videos are shared with everyone in this call.')}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
--> |
||||||
|
|
||||||
|
<div ng-show="playbackActive"> |
||||||
|
<div class="row" id="youtubecontainer"> |
||||||
|
<div class="embed-responsive embed-responsive-16by9"> |
||||||
|
<div id="youtubeplayer"></div> |
||||||
|
</div> |
||||||
|
<div id="youtubeplayerinfo"> |
||||||
|
<div>{{_('Currently playing')}}<br>{{ currentVideoUrl }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="overlaybar form-horizontal" ng-class="{notvisible: hideControlsBar}"> |
||||||
|
<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('YouTube controls')}}"><i class="fa fa-cogs"></i></a> |
||||||
|
<div class="overlaybar-content"> |
||||||
|
<div class="container-fluid form-horizontal"> |
||||||
|
<div class="form-group"> |
||||||
|
<label class="col-sm-2" for="youtubeurl">YouTube URL to share</label> |
||||||
|
<div class="col-sm-10"> |
||||||
|
<input type="text" class="form-control" id="youtubeurl" ng-model="youtubeurl" required placeholder="{{_('YouTube URL')}}"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<div class="col-sm-offset-2 col-sm-10"> |
||||||
|
<button type="button" class="btn btn-primary" ng-click="shareVideo(youtubeurl)" ng-disabled="youtubeurl === ''">{{_('Share')}}</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue