diff --git a/client/tv.lua b/client/tv.lua index b599e26..ae0887f 100644 --- a/client/tv.lua +++ b/client/tv.lua @@ -59,11 +59,18 @@ end function VideoMenu() lib.hideMenu() - local input = lib.inputDialog('Video Player', {'URL:'}) - if input then + local input = lib.inputDialog('Video Player', { + { type = 'input', label = 'Video URL' }, + { type = 'checkbox', label = 'Loop Video' }, + { type = 'checkbox', label = 'Show Video Controls' } + }) + + if input then TriggerServerEvent("ptelevision:event", CURRENT_SCREEN, "ptv_status", { type = "play", - url = input[1] + url = input[1], + loop = input[2], + showControls = input[3] }) end Citizen.Wait(300) @@ -185,7 +192,7 @@ RegisterNetEvent("ptelevision:event", function(data, index, key, value) if (index) then local event = value if (event.type == "play") then - local data = { url = event.url } + local data = { url = event.url, loop = event.loop, showControls = event.showControls } if (event.channel) then data = Channels[event.channel] data.channel = event.channel diff --git a/html/main.js b/html/main.js index cc84bbb..41002af 100644 --- a/html/main.js +++ b/html/main.js @@ -1,144 +1,168 @@ var player; var playerData; -$(document).ready(function() { - $.post("https://ptelevision/pageLoaded", JSON.stringify({})) -}) +$(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]}; - } + 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 ' - 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() + if (channel) { + var temp = 'CH '; + 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) + var url = video_data.url; + var channel = video_data.channel; + var loop = video_data.loop; + var showControls = Number(video_data.showControls); + var data = GetURLID(url); + + playerData = data; + if (player) { + player.destroy(); + player = null; + } + if (data) { + if (data.type == "youtube") { + if (loop == true) { + player = new YT.Player("twitch-embed", { + height: "100%", + width: "100%", + videoId: data.id, + playerVars: { + playsinline: 1, + loop: 1, + playlist: data.id, + controls: showControls, + }, + 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 { + player = new YT.Player("twitch-embed", { + height: "100%", + width: "100%", + videoId: data.id, + playerVars: { + playsinline: 1, + controls: showControls, + }, + 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.unMute(); - player.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.unMute(); + player.setVolume(volume); } + } } 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.")) + $("#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) + 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() -}) +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(); +});