Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabled an option for twitch chat on the side #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Enabled an option for twitch chat on the side #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@
<input type="checkbox" id="cbNative">
</label>
</p>
<p>
<label for="cbTwitch">
Enable Twitch Chat:
<input type="checkbox" id="cbTwitch">
</label>
</p>
<button id="saveSettings">Save</button>
<span id="status"></span>
</body>
Expand Down
8 changes: 6 additions & 2 deletions options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ function save_options() {
var v = document.getElementById('hlsjsSel').value;
var dbg = document.getElementById('cbDebug').checked;
var ntv = document.getElementById('cbNative').checked;
var tch = document.getElementById('cbTwitch').checked;
chrome.storage.local.set({
hlsjs: v,
debug: dbg,
native_video: ntv
native_video: ntv,
twitch_enable: tch
}, function() {
var status = document.getElementById('status');
status.textContent = 'Options saved.';
Expand All @@ -19,11 +21,13 @@ function restore_options() {
chrome.storage.local.get({
hlsjs: currentVersion,
debug: false,
native_video: false
native_video: false,
twitch_enable: true
}, function(items) {
document.getElementById('hlsjsSel').value = items.hlsjs;
document.getElementById('cbDebug').checked = items.debug;
document.getElementById('cbNative').checked = items.native_video;
document.getElementById('cbTwitch').checked = items.twitch_enable;
});
}

Expand Down
10 changes: 8 additions & 2 deletions player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<video id="video" class="zoomed_mode" controls></video>
<div id="container">
<div id="player">
<video id="video" class="native_mode" controls></video>
</div>
<div id="chat">
</div>
</div>
<script src="global.js"></script>
<script src="player.js"></script>
</body>
</html>
</html>
31 changes: 26 additions & 5 deletions player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var hls;
var debug;
var twitch_enable;
var recoverDecodingErrorDate,recoverSwapAudioCodecDate;
var pendingTimedMetadata = [];

Expand Down Expand Up @@ -41,15 +42,32 @@ function timeUpdateCallback() {
console.log('Metadata ' + e.value + " at " + e.pts + "s");
}

function playM3u8(url){
function playM3u8(abs_path){
var url = abs_path.split('#')[1];
var twitch = abs_path.split('#')[2];
var video = document.getElementById('video');
var chat_div = document.getElementById("chat");
chat_div.innerHTML = "";

if(native){
video.classList.add("native_mode");
video.classList.remove("zoomed_mode");
video.classList.remove("zoomed_mode");;
} else {
video.classList.remove("native_mode");
video.classList.add("zoomed_mode");
}

if (twitch_enable == true && twitch != undefined && typeof twitch == "string"){
video.className = "twitch_mode";
var chat_iframe = document.createElement('iframe');
chat_iframe.src = "https://www.twitch.tv/embed/" + twitch + "/chat";
chat_iframe.scrolling = "yes";
chat_iframe.frameBorder = "0";
chat_iframe.id = "chat_embed";
chat_iframe.width = "100%";
chat_div.append(chat_iframe);
}

if(hls){ hls.destroy(); }
hls = new Hls({debug:debug});
hls.on(Hls.Events.ERROR, function(event,data) {
Expand Down Expand Up @@ -84,20 +102,23 @@ function playM3u8(url){
chrome.storage.local.get({
hlsjs: currentVersion,
debug: false,
native: false
native: false,
twitch_enable: true
}, function(settings) {
debug = settings.debug;
native = settings.native;
twitch_enable = settings.twitch_enable;
var s = document.createElement('script');
var version = currentVersion
if (supportedVersions.includes(settings.hlsjs)) {
version = settings.hlsjs
}
s.src = chrome.runtime.getURL('hlsjs/hls.'+version+'.min.js');
s.onload = function() { playM3u8(window.location.href.split("#")[1]); };
// console.log(window.location.href.split("#"))
s.onload = function() { playM3u8(window.location.href); };
(document.head || document.documentElement).appendChild(s);
});

$(window).bind('hashchange', function() {
playM3u8(window.location.href.split("#")[1]);
playM3u8(window.location.href);
});
44 changes: 43 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,49 @@
body{
html, body{
background-color:black;
height: 100%;
margin: 0px;
}

html {
overflow-y: hidden;
}

#container {
height: 100%;
display: flex;
align-items: center;
}

#player {
flex: 0 0 80%;
height: 100%
}

video {
height: 100%;
}

#chat {
flex: 1;
display: flex;
height: 100%;
flex-direction: column;
}

iframe {
height: 100%
}

.twitch_mode {
width: 100%;
}

/* .twitch_mode {
flex: 0 0 80%;
height: 100%;
width: 100%;
} */

.native_mode{
position: absolute;
top: 0px;
Expand Down