mirror of
https://github.com/Michatec/ptelevision.git
synced 2026-03-31 23:46:30 +02:00
Update v1.1
This commit is contained in:
Pickle
GitHub
BIN
html/VCR_OSD_MONO_1.001.ttf
Normal file
BIN
html/VCR_OSD_MONO_1.001.ttf
Normal file
Binary file not shown.
12
html/blank.html
Normal file
12
html/blank.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body style="background-color: transparent">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
html/index.html
Normal file
27
html/index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
|
||||
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
|
||||
<script src="https://www.youtube.com/iframe_api"> </script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Add a placeholder for the Twitch embed -->
|
||||
<div id="background">
|
||||
</div>
|
||||
<div id="tv-container">
|
||||
<div>NO SIGNAL</div>
|
||||
</div>
|
||||
<div id="overlay"><span></span></div>
|
||||
|
||||
<div id="twitch-embed"></div>
|
||||
|
||||
<!-- Load the Twitch embed script -->
|
||||
</body>
|
||||
</html>
|
||||
144
html/main.js
Normal file
144
html/main.js
Normal file
@@ -0,0 +1,144 @@
|
||||
var player;
|
||||
var playerData;
|
||||
$(document).ready(function() {
|
||||
$.post("https://ptelevision/pageLoaded", JSON.stringify({}))
|
||||
})
|
||||
|
||||
function GetURLID(link) {
|
||||
if (link == null) return;
|
||||
let url = link.toString();
|
||||
var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
|
||||
var match = url.match(regExp);
|
||||
if (match && match[2].length == 11) {
|
||||
return {type: "youtube", id: match[2]};
|
||||
}
|
||||
else if (url.split("twitch.tv/").length > 1) {
|
||||
|
||||
return {type: "twitch", id: url.split("twitch.tv/")[1]};
|
||||
}
|
||||
}
|
||||
|
||||
function ChannelDisplay(channel, channelFound) {
|
||||
if (channel) {
|
||||
var temp = 'CH<span style="font-size: 18pt !important;"> </span>'
|
||||
if (channel > 9) {
|
||||
temp += channel
|
||||
}
|
||||
else {
|
||||
temp += ("0" + channel)
|
||||
}
|
||||
$("#overlay span").show()
|
||||
$("#overlay span").html(temp)
|
||||
}
|
||||
else {
|
||||
$("#overlay span").show()
|
||||
$("#overlay span").html("")
|
||||
}
|
||||
if (channelFound) {
|
||||
$("#tv-container").hide()
|
||||
}
|
||||
else {
|
||||
$("#tv-container").show()
|
||||
}
|
||||
}
|
||||
|
||||
function SetVideo(video_data) {
|
||||
var url = video_data.url;
|
||||
var channel = video_data.channel;
|
||||
var data = GetURLID(url)
|
||||
|
||||
playerData = data
|
||||
if (player) {
|
||||
player.destroy()
|
||||
player = null;
|
||||
}
|
||||
if (data) {
|
||||
if (data.type == "youtube") {
|
||||
player = new YT.Player('twitch-embed', {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
videoId: data.id,
|
||||
playerVars: {
|
||||
'playsinline': 1,
|
||||
},
|
||||
events: {
|
||||
'onReady': function(event) {
|
||||
event.target.playVideo();
|
||||
event.target.seekTo(video_data.time)
|
||||
},
|
||||
'onStateChange': function(event) {
|
||||
if (event.data == YT.PlayerState.PLAYING) {
|
||||
event.target.unMute();
|
||||
}
|
||||
else if (event.data == YT.PlayerState.PAUSED) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (data.type == "twitch") {
|
||||
player = new Twitch.Player("twitch-embed", {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
channel: data.id,
|
||||
volume: 1.0
|
||||
});
|
||||
player.addEventListener(Twitch.Embed.VIDEO_READY, function() {
|
||||
player.setMuted(false);
|
||||
});
|
||||
}
|
||||
|
||||
$("#overlay span").hide()
|
||||
$("#tv-container").hide()
|
||||
}
|
||||
if (channel) {
|
||||
ChannelDisplay(channel, url)
|
||||
}
|
||||
}
|
||||
|
||||
function SetVolume(volume) {
|
||||
|
||||
if (player && playerData && player.setVolume) {
|
||||
if (playerData.type == "twitch") {
|
||||
player.setMuted(false);
|
||||
player.setVolume(volume / 100.0);
|
||||
}
|
||||
else if (playerData.type == "youtube") {
|
||||
player.setVolume(volume);
|
||||
player.unMute();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function ShowNotification(channel, data) {
|
||||
$("#tv-container").addClass("notify")
|
||||
$("#tv-container div").addClass("notify")
|
||||
var display = $('#tv-container').is(':visible')
|
||||
$('#tv-container').show()
|
||||
$("#tv-container div").html("Channel #" + channel + (data ? (" ("+data.name+")") : "") + " is now " + (data ? "live!" : "offline."))
|
||||
|
||||
setTimeout(function() {
|
||||
$("#tv-container").removeClass("notify")
|
||||
$("#tv-container div").removeClass("notify")
|
||||
$("#tv-container div").html("NO SIGNAL")
|
||||
if (!display) {
|
||||
$('#tv-container').hide()
|
||||
}
|
||||
}, 3500)
|
||||
}
|
||||
|
||||
window.addEventListener("message", function(ev) {
|
||||
if (ev.data.setVideo) {
|
||||
SetVideo(ev.data.data)
|
||||
}
|
||||
else if (ev.data.setVolume) {
|
||||
SetVolume(ev.data.data)
|
||||
}
|
||||
else if (ev.data.showNotification) {
|
||||
ShowNotification(ev.data.channel, ev.data.data)
|
||||
}
|
||||
})
|
||||
$(document).ready(function() {
|
||||
ChannelDisplay()
|
||||
})
|
||||
93
html/style.css
Normal file
93
html/style.css
Normal file
@@ -0,0 +1,93 @@
|
||||
@font-face {
|
||||
font-family: 'BodyCam';
|
||||
src: url('VCR_OSD_MONO_1.001.ttf') format('truetype') /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: BodyCam;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#twitch-embed {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
font-size: 48pt !important;
|
||||
}
|
||||
|
||||
#background {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: rgb(42, 42, 42);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
#tv-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#tv-container.notify {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#tv-container > div {
|
||||
font-size: 24pt;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#tv-container > div.notify {
|
||||
font-size: 24pt;
|
||||
user-select: none;
|
||||
width: -webkit-fill-available;
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(42, 42, 42);
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
Reference in New Issue
Block a user