Skip to content

Commit

Permalink
adding video support for youtube!
Browse files Browse the repository at this point in the history
  • Loading branch information
@reaby
reaby committed Oct 3, 2020
1 parent e92930f commit 2c96a11
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 84 deletions.
1 change: 1 addition & 0 deletions locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"paste": "Paste",
"edit": "Edit",
"set": "Set",
"play": "Play",
"blackout": "Blackout",
"displayTime": "Display Time",
"startStream": "Start stream",
Expand Down
5 changes: 3 additions & 2 deletions locales/fi/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@
"copy": "Kopio",
"paste": "Liitä",
"set": "Aseta",
"play": "Toista",
"blackout": "Tummenna",
"displayTime": "Näytä aika",
"startStream": "Aloita suoratoisto",
"forceReload": "Lataa uudelleen",
"createNew": "Luo Uusi",
"createNew": "Luo Uusi",
"createNewSlide": "Luo uusi dia",
"addVideo": "Lisää Video",
"addWebPage": "Lisää Web-sivu",
Expand Down Expand Up @@ -98,7 +99,7 @@
"zoom": "Suurennus",
"duration": "Pituus (sekunneissa), tyhjä on oletusarvo",
"displayTime": "Näytä aika"
},
},
"addVideo": {
"name": "Name",
"url": "url",
Expand Down
2 changes: 1 addition & 1 deletion modules/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ class admin {
self.screenView.overrideSlide(data.json, null, data.duration, data.transition);
}
});

socket.on('admin.overrideVideo', function (data) {
if (data.displayId === null) {
dispatcher.emit("all.override", data);
Expand Down
81 changes: 54 additions & 27 deletions public/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ socket.on("callback.dashboard.sync", function (data) {

var transitionArray = [];
// var values = ["bars", "blinds", "blinds3d", "zip", "blocks", "blocks2", "concentric", "warp", "cube", "tiles3d", "tiles3dprev", "slide", "swipe", "dissolve"];

transitionArray.push({ name: "random", value: null });
for (var i in SupportedTransitions) {
transitionArray.push({ name: SupportedTransitions[i], value: SupportedTransitions[i] });
Expand All @@ -98,8 +98,8 @@ socket.on("callback.dashboard.sync", function (data) {

$('#currentTransition').text(serverOptions.transition || "random");

var preview = document.getElementById('preview');
preview.src = "/admin/preview?displayId=" + displayId + "&socket=" + encodeURIComponent(socket.id);
// var preview = document.getElementById('preview');
// preview.src = "/admin/preview?displayId=" + displayId + "&socket=" + encodeURIComponent(socket.id);
// updateBundleData(bundleDirs);
});

Expand Down Expand Up @@ -161,16 +161,17 @@ function updateBundleData(bundleDirs) {
bundleDirs.sort(sortByName);
for (var i in bundleDirs) {
let bundle = bundleDirs[i];
output += '<div class="ui green message item" id="bundle_' + simpleHash(bundle.dir) + '">' +
'<div class="right floated content">' +
'<button class="ui small basic inverted icon button" onclick="editBundleProperties(\'' + bundle.dir + '\')"><i class="edit icon"></i></button>' +
'<button class="ui small basic inverted icon button" onclick="editBundleSlides(\'' + bundle.dir + '\')"><i class="list icon"></i></button>' +
'<button class="ui small basic inverted icon button" onclick="changeBundle(\'' + bundle.dir + '\')"><i class="play icon"></i></button>' +
'</div>' +
'<div class="content">' +
'<div>' + bundle.name + '</div>' +
'</div>' +
'</div>';
output += `
<div class="ui green message item" id="bundle_${simpleHash(bundle.dir)}">
<div class="right floated content">
<button class="ui small basic inverted icon button" onclick="editBundleProperties('${bundle.dir}')"><i class="edit icon"></i></button>
<button class="ui small basic inverted icon button" onclick="editBundleSlides('${bundle.dir}')"><i class="list icon"></i></button>
<button class="ui small basic inverted icon button" onclick="changeBundle('${bundle.dir}')"><i class="play icon"></i></button>
</div>
<div class="content">
<div>${bundle.name}</div>
</div>
</div>`;
}

$('#allBundles').html(output);
Expand Down Expand Up @@ -223,6 +224,33 @@ function setStatusMessage() {

}

function playYoutubeVideo() {
let elem = $('#youtubeId').val();
let regexMatch = /(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/\S*?[^\w\s-])((?!videoseries)[\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/.exec(elem);
let videoId = elem;
if (regexMatch.length == 2) {
videoId = regexMatch[1];
}

if (videoId !== "") {
var obj = {
json: {
type: "webPage",
webUrl: `https://www.youtube.com/embed/${videoId}?autoplay=1&origin=${serverUrl}&rel=0&modestbranding=0`,
zoom: 1.,
displayTime: false,
},
displayId: displayId,
duration: null,
transition: null,
png: null,
};
socket.emit("admin.overrideWebPage", obj);
}
}



function createNewBundle() {
$('#newBundle')
.modal({
Expand Down Expand Up @@ -308,20 +336,19 @@ function updateSlides(settings) {
currentIndex = index;
}

var slideType = "'" + slide.type + "'";

output += '<div class="ui ' + color + ' message item" id="' + slide.uuid + '">' +
'<div class="right floated content">' +
'<button class="ui small basic inverted icon button" onclick="emit(\'controls.preview\', {fileName: \'' + slide.uuid + '\', bundle: \'' + serverOptions.currentBundle + '\' });"><i class="search icon"></i></button>' +
'<button class="ui small basic inverted icon button" onclick="emit(\'controls.skipTo\',{fileName: \'' + slide.uuid + '\'});"><i class="step forward icon"></i></button>' +
'<button class="ui small basic inverted icon button" onclick="editSlide(\'' + slide.uuid + '\', ' + slideType + ')"><i class="edit outline icon"></i></button>' +
'<button class="ui small basic inverted icon button" onclick="remove(\'' + slide.uuid + '\');"><i class="delete icon"></i></button>' +
'</div>' +
'<div class="content">' +
'<i class="large toggle ' + status + ' icon" onclick="emit(\'controls.toggle\', {fileName: \'' + slide.uuid + '\'});"></i>' +
'<div class="editable">' + slide.name.replace(".json", "") + '</div>' +
'</div>' +
'</div>';
output += `
<div class="ui ${color} message item" id="${slide.uuid}">
<div class="right floated content">
<button class="ui small basic inverted icon button" onclick="editSlide('${slide.uuid}', '${slide.type}');"><i class="edit outline icon"></i></button>
<button class="ui small basic inverted icon button" onclick="emit('controls.skipTo', {fileName: '${slide.uuid}'} );"><i class="step forward icon"></i></button>
<!-- <button class="ui small basic inverted icon button" onclick="remove('${slide.uuid}');"><i class="delete icon"></i></button> -->
</div>
<div class="content">
<i class="large toggle ${status} icon" onclick="emit('controls.toggle', {fileName: '${slide.uuid}'} );"></i>
<div class="editable">${slide.name}</div>
</div>
</div>
`;

index += 1;
}
Expand Down
2 changes: 1 addition & 1 deletion public/js/displayWebGl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@ function displayWebPage(url) {
$("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
clearIFrame(getWebLayer(1));
layer++;
if (layer > 1) {
if (layer >= 1) {
layer = 0;
}
}
Expand Down
117 changes: 65 additions & 52 deletions views/admin/dashboard.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
</div>
<i class="dropdown icon"></i>
</div>

<div class="right menu">
<div class="item">
<a href="/logout" class="ui red basic button">{{ t("auth.logout") }}</a>
Expand Down Expand Up @@ -99,81 +99,93 @@

<div class="center aligned six wide column">

<div class="row">
<!-- <div class="row">
<div id="previewContainer" class="ui inverted segment">
<h2 class="ui inverted nopadded header"> {{ t("admin.dashboard.preview") }}</h2>
<iframe style="overflow-scrolling: unset; overflow: unset;" class="nopadded" id="preview"
src="/admin/preview?uid={{ uid }}"></iframe>
</div>
</div>

-->
<div class="row">
<div id="programContainer" class="ui inverted segment">
<div id="programContainer" class="ui nopadded basic segment">
<h2 class="ui inverted nopadded header currentDisplay"> {{ t("admin.dashboard.program") }} </h2>
<iframe class="nopadded" id="program" src="/display/{{ displayId }}?isPreview=1"></iframe>
</div>

<div class="ui nopadded segment">

</div>

<div class="row">
<div class="ui inverted segment">
<h4>YouTube</h4>
<div class="ui fluid left icon inverted action input">
<i class="ui red youtube icon"></i>
<input style="background: #444;" id="youtubeId" value="" placeholder="Youtube Url" />
<div class="ui small green button" onclick="playYoutubeVideo();">{{ t("actions.play") }}</div>
</div>

<h4> {{ t("admin.dashboard.statusMessage") }}</h4>
<div class="ui fluid grey action input">
<input style="background: #444;" id="statusMessageAdmin" value="" placeholder="{{ t("admin.dashboard.statusMessage") }}" />
<div class="ui small green button" onclick="setStatusMessage();">{{ t("actions.set") }}</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>

<!-- menu -->
<div class="ui primary bottom fixed two item pointing menu" style="height: 5vh;">
<div class="ui primary bottom fixed one item pointing menu" style="height: 5vh;">
<div class="item">
<div class="ui basic text"> {{ t("admin.dashboard.statusMessage") }}</div>
<div class="ui fluid action input">
<input id="statusMessageAdmin" value="" placeholder=""/>
<div class="ui small basic green button" onclick="setStatusMessage();">{{ t("actions.set") }}</div>
</div>
</div>
<div class="item">
<div class="ui inverted buttons">
<button class="ui icon button" onclick="emit('controls.previous');">
<i class="step backward icon"></i>
</button>

<button id="play" class="ui icon button" onclick="emit('controls.play');">
<i class="play icon"></i>
</button>

<button id="pause" class="ui icon button" onclick="emit('controls.pause');">
<i class="pause icon"></i>
</button>

<button class="ui icon button" onclick="emit('controls.next');">
<i class="step forward icon"></i>
</button>
</div>
<div style="width: 1rem;"></div>

<div class="ui buttons">
<button id="blackout" class="ui black basic button" onclick="emit('controls.blackout');">
{{ t("actions.blackout") }}
</button>
<button id="toggleTime" class="ui teal basic button" onclick="emit('controls.time.toggle');">
{{ t("actions.displayTime") }}
</button>
{% if config.mediaServer %}
<button id="stream" class="ui blue basic button"
onclick="emit('controls.startStream');">
{{ t("actions.startStream") }}
</button>
{% endif %}
<button class="ui red basic button"
onclick="forceReload()">
{{ t("actions.forceReload") }}
</button>
</div>
<div class="ui inverted buttons">
<div class="ui text center">
<button class="ui icon button" onclick="emit('controls.previous');">
<i class="step backward icon"></i>
</button>

<button id="play" class="ui icon button" onclick="emit('controls.play');">
<i class="play icon"></i>
</button>

<button id="pause" class="ui icon button" onclick="emit('controls.pause');">
<i class="pause icon"></i>
</button>

<button class="ui icon button" onclick="emit('controls.next');">
<i class="step forward icon"></i>
</button>
</div>
</div>

<div class="ui buttons">
<button id="blackout" class="ui black basic button" onclick="emit('controls.blackout');">
{{ t("actions.blackout") }}
</button>
<button id="toggleTime" class="ui teal basic button" onclick="emit('controls.time.toggle');">
{{ t("actions.displayTime") }}
</button>
{% if config.mediaServer %}
<button id="stream" class="ui blue basic button"
onclick="emit('controls.startStream');">
{{ t("actions.startStream") }}
</button>
{% endif %}
<button class="ui red basic button"
onclick="forceReload()">
{{ t("actions.forceReload") }}
</button>
</div>
</div>
</div>
<!-- menu -->
<!-- modal -->
<div id="newBundle" class="ui modal">
<div class="header">{{ t("actions.createNew") }}</div>
<div class="ui scrolling content form">


<label>{{ t("admin.dashboard.bundleDirName") }}</label>
<input class="ui input" type="text" id="newBundleDirName" value="" required/>
<label>{{ t("admin.dashboard.bundleName") }}</label>
Expand Down Expand Up @@ -208,6 +220,7 @@
<script>
var socket = io("{{ config.serverUrl }}:{{ config.serverListenPort }}/admin-{{ displayId }}");
var displayId = {{ displayId }};
var serverUrl = "{{ config.serverUrl }}";
</script>
<script src="/js/dashboard.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion views/admin/video.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

{% block body %}
<div class="ui segment">
<video id="preview" style="width: 300px; display: hidden;"></video>
<video id="preview" style="width: 300px; border: 1px solid black; display: hidden;"></video>

<form class="ui form">
<div class="field">
Expand Down

0 comments on commit 2c96a11

Please sign in to comment.