moving media to gcloud, fix for alternateLineColors, rebrand to WompChat
4
.gitignore
vendored
@@ -1,3 +1,7 @@
|
|||||||
dev-build
|
dev-build
|
||||||
node_modules
|
node_modules
|
||||||
build
|
build
|
||||||
|
*.psd
|
||||||
|
*.ai
|
||||||
|
cdn/
|
||||||
|
artwork/
|
||||||
|
Before Width: | Height: | Size: 281 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 607 KiB |
|
Before Width: | Height: | Size: 608 KiB |
|
Before Width: | Height: | Size: 533 KiB |
|
Before Width: | Height: | Size: 533 KiB |
|
Before Width: | Height: | Size: 573 KiB |
27
package-lock.json
generated
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "Womp",
|
"name": "WompChat",
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
@@ -674,14 +674,6 @@
|
|||||||
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"axios": {
|
|
||||||
"version": "0.19.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
|
||||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
|
||||||
"requires": {
|
|
||||||
"follow-redirects": "1.5.10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"babel-code-frame": {
|
"babel-code-frame": {
|
||||||
"version": "6.26.0",
|
"version": "6.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
||||||
@@ -1398,15 +1390,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
||||||
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
|
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
|
||||||
},
|
},
|
||||||
"date-fns": {
|
|
||||||
"version": "1.30.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
|
|
||||||
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
|
|
||||||
},
|
|
||||||
"debug": {
|
"debug": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ms": "2.0.0"
|
"ms": "2.0.0"
|
||||||
}
|
}
|
||||||
@@ -1883,14 +1871,6 @@
|
|||||||
"readable-stream": "^2.3.6"
|
"readable-stream": "^2.3.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"follow-redirects": {
|
|
||||||
"version": "1.5.10",
|
|
||||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
|
||||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
|
||||||
"requires": {
|
|
||||||
"debug": "=3.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"for-in": {
|
"for-in": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||||
@@ -2681,7 +2661,8 @@
|
|||||||
"ms": {
|
"ms": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"nanomatch": {
|
"nanomatch": {
|
||||||
"version": "1.2.13",
|
"version": "1.2.13",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "Womp",
|
"name": "WompChat",
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
|
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -14,8 +14,6 @@
|
|||||||
"url": "git://github.com/wompmacho/live-chat.git"
|
"url": "git://github.com/wompmacho/live-chat.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.0",
|
|
||||||
"date-fns": "^1.29.0",
|
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"preact": "^8.2.7",
|
"preact": "^8.2.7",
|
||||||
"uglifyjs-webpack-plugin": "^1.3.0"
|
"uglifyjs-webpack-plugin": "^1.3.0"
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 41 KiB |
BIN
src/assets/icons/logo128.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
1
src/assets/icons/logo_icon.svg
Normal file
|
After Width: | Height: | Size: 67 KiB |
@@ -29,7 +29,7 @@ const ensure = () => {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
chrome.tabs.create({ url: './html/welcome.html' });
|
chrome.tabs.create({ url: 'html/welcome.html' });
|
||||||
chrome.runtime.onMessage.addListener(onSetupComplete);
|
chrome.runtime.onMessage.addListener(onSetupComplete);
|
||||||
console.log('Setup Complete');
|
console.log('Setup Complete');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
|
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
|
||||||
|
|
||||||
import Setup from './Setup';
|
import Setup from './Setup';
|
||||||
|
|
||||||
import CONFIG from 'src/config';
|
import CONFIG from 'src/config';
|
||||||
|
|
||||||
class Main {
|
class Main {
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const CONFIG = {
|
const CONFIG = {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
|
|
||||||
@@ -6,9 +5,9 @@ const CONFIG = {
|
|||||||
enableBTTVEmotes: true,
|
enableBTTVEmotes: true,
|
||||||
enableFrankerEmotes: true,
|
enableFrankerEmotes: true,
|
||||||
enableTwitchEmotes: true,
|
enableTwitchEmotes: true,
|
||||||
kappaFix: true,
|
|
||||||
|
|
||||||
// Chat Options
|
// Chat Options
|
||||||
|
kappaFix: true,
|
||||||
theaterModeFix: false,
|
theaterModeFix: false,
|
||||||
setAuthorColor: false,
|
setAuthorColor: false,
|
||||||
showTimeStamp: false,
|
showTimeStamp: false,
|
||||||
@@ -16,9 +15,11 @@ const CONFIG = {
|
|||||||
hideAuthorIcons: false,
|
hideAuthorIcons: false,
|
||||||
hideWelcomBanner: false,
|
hideWelcomBanner: false,
|
||||||
setTwitchColors: false,
|
setTwitchColors: false,
|
||||||
textSizeSlider: 'inherit',
|
|
||||||
setLiveChat: true,
|
setLiveChat: true,
|
||||||
allowTextSlider: false,
|
allowTextSlider: false,
|
||||||
|
|
||||||
|
// Var
|
||||||
|
textSizeSlider: 'inherit',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
import Emotes from './Emotes';
|
import Emotes from './Emotes';
|
||||||
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
|
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
|
||||||
|
|
||||||
var colorNumberIndex = 0;
|
|
||||||
|
|
||||||
class Message {
|
class Message {
|
||||||
constructor(messageNode) {
|
constructor(messageNode) {
|
||||||
this.node = messageNode;
|
this.node = messageNode;
|
||||||
@@ -178,11 +176,6 @@ class Message {
|
|||||||
|
|
||||||
///////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// Set Alternate message Colors
|
|
||||||
if (PersistentSyncStorage.data.options.alternateLineColor) {
|
|
||||||
this.alternateLineColor();
|
|
||||||
}
|
|
||||||
|
|
||||||
}// end setDefaultSelections
|
}// end setDefaultSelections
|
||||||
|
|
||||||
setAuthorColor() {
|
setAuthorColor() {
|
||||||
@@ -212,20 +205,6 @@ class Message {
|
|||||||
|
|
||||||
///////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// changes color every line
|
|
||||||
alternateLineColor(){
|
|
||||||
|
|
||||||
if(colorNumberIndex % 2 == 0){
|
|
||||||
this.node.classList.add("set-background-color-one");
|
|
||||||
}
|
|
||||||
if(colorNumberIndex % 2 !== 0){
|
|
||||||
this.node.classList.add("set-background-color-two");
|
|
||||||
}
|
|
||||||
colorNumberIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
// removes color attr
|
// removes color attr
|
||||||
removelternateLineColor(){
|
removelternateLineColor(){
|
||||||
this.node.classList.remove("set-background-color-one");
|
this.node.classList.remove("set-background-color-one");
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ document.body.appendChild(theater_wrapper);
|
|||||||
var alreadyTheater = false;
|
var alreadyTheater = false;
|
||||||
|
|
||||||
// ---
|
// ---
|
||||||
|
|
||||||
class Main {
|
class Main {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.chatWatcher = null;
|
this.chatWatcher = null;
|
||||||
@@ -26,14 +25,6 @@ class Main {
|
|||||||
this.onRouteChange = this.onRouteChange.bind(this);
|
this.onRouteChange = this.onRouteChange.bind(this);
|
||||||
this.load();
|
this.load();
|
||||||
|
|
||||||
|
|
||||||
// button class - ytp-size-button ytp-button
|
|
||||||
// right player controls - ytp-right-controls
|
|
||||||
// player div id - ytd-player
|
|
||||||
// chatframe id - chatframe
|
|
||||||
// movieframe id - movie_player_fix
|
|
||||||
// dono ticker id - ticker
|
|
||||||
// player-theater-container
|
|
||||||
}
|
}
|
||||||
|
|
||||||
load() {
|
load() {
|
||||||
@@ -58,6 +49,11 @@ class Main {
|
|||||||
|
|
||||||
setDefaults() {
|
setDefaults() {
|
||||||
|
|
||||||
|
// Set Hide Welcome Banner
|
||||||
|
if (PersistentSyncStorage.data.options.alternateLineColor) {
|
||||||
|
document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer').classList.add('alternateLineColor');
|
||||||
|
}
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// Welcome Banner
|
// Welcome Banner
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
|
|
||||||
|
|
||||||
/* Open new tab if tab is not already open, otherwise focus that tab */
|
/* Open new tab if tab is not already open, otherwise focus that tab */
|
||||||
export default url => {
|
export default url => {
|
||||||
const matchUrl = url.replace(/^(https|http)/i, '*');
|
const matchUrl = url.replace(/^(https|http)/i, '*');
|
||||||
@@ -11,10 +10,4 @@ export default url => {
|
|||||||
chrome.tabs.create({ url });
|
chrome.tabs.create({ url });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// for(let i = 0, tab; tab = tabs[i]; i++) {
|
|
||||||
// if(tab.url && tab.url === url) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,31 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
padding: 10px;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hideDiv {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Options</title>
|
<title>WompChat Options</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<span style="display:inline-block;vertical-align: middle; margin-right: 2%;">
|
<div class="container">
|
||||||
<img src="../assets/icons/icon128.png" alt="🔴" style="height: 2.5em;">
|
<img src="../assets/icons/logo128.png" alt="🔴">
|
||||||
</span>
|
<h1>WompChat Options</h1>
|
||||||
<span style="display:inline-block;vertical-align: middle;">
|
|
||||||
<h1>Womp Options</h1>
|
|
||||||
</span>
|
|
||||||
<span class="">
|
|
||||||
<button class="info_button" id="infoButton" >Info</button>
|
<button class="info_button" id="infoButton" >Info</button>
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
@@ -56,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hr"></div>
|
<hr>
|
||||||
|
|
||||||
<div class="options-table">
|
<div class="options-table">
|
||||||
<div class="option-row">
|
<div class="option-row">
|
||||||
@@ -67,8 +53,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
<div class="hr"></div>
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2 class="options-heading">Chat Options</h2>
|
<h2 class="options-heading">Chat Options</h2>
|
||||||
@@ -132,11 +117,9 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hr"></div>
|
<hr>
|
||||||
<h2 class="options-heading">Font Size</h2>
|
|
||||||
<span>
|
|
||||||
|
|
||||||
</span>
|
<h2 class="options-heading">Font Size</h2>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<div class="options-table">
|
<div class="options-table">
|
||||||
@@ -154,9 +137,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<div id="save-status"> </div>
|
<div id="save-status"> </div>
|
||||||
|
|
||||||
<div class="omega"></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../options.js"></script>
|
<script src="../options.js"></script>
|
||||||
|
|||||||
@@ -5,106 +5,9 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Welcome Page</title>
|
<title>Welcome Page</title>
|
||||||
|
<meta http-equiv="refresh" content="0; URL='https://wompmacho.com/wompchat'" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="success-overlay">
|
|
||||||
|
|
||||||
<div class="icon-container">
|
|
||||||
<i class="material-icons">done</i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/icons/icon512.png" alt="womp Logo">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
|
|
||||||
|
|
||||||
<p class="heading-note">Were changing our name!</p>
|
|
||||||
<p class="heading-note">Aparently LIVE CHAT was a bad idea. Now We Are WOMP
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="shields">
|
|
||||||
<a href="https://discord.gg/pVNnTDA">
|
|
||||||
<img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io">
|
|
||||||
</a>
|
|
||||||
<a href="https://cdn.jsdelivr.net/gh/wompmacho/womp/src/assets/img/btc.JPG">
|
|
||||||
<img src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io">
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/wompmacho/womp">
|
|
||||||
<img alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest&style=plastic">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="links_div">
|
|
||||||
<a class="links_bottom" href="https://discord.gg/pVNnTDA" title="Join our Discord Community">Join our Discord Community</a>
|
|
||||||
<a class="links_bottom" href="https://streamelements.com/wompmacho-5882/tip" title="Donations">Donations</a>
|
|
||||||
<a class="links_bottom" href="https://www.youtube.com/wompmacho" title="Youtube">Youtube</a>
|
|
||||||
<a class="links_bottom" href="mailto:wompmacho@gmail.com">Contact Me</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
Soon to come:
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Specific channel Emotes</li>
|
|
||||||
<li>Search for Emote Panel</li>
|
|
||||||
<li>Autocomplete for emote Selection</li>
|
|
||||||
<li><s>Theater Mode Fix for that quality Stream and Chat time</s></li>
|
|
||||||
<li>Moderation Options</li>
|
|
||||||
<li>User Profile Info</li>
|
|
||||||
<li>Other Styling Options</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<h2>How To:</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
There is still a lot of stuff I am working on. This is very Beta at the moment so
|
|
||||||
</p>
|
|
||||||
<h2>Use At Your Own Risk</h2>
|
|
||||||
<p>
|
|
||||||
This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat.
|
|
||||||
Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Don't forget to pin this extension for easy access.
|
|
||||||
</p>
|
|
||||||
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
|
|
||||||
<p>
|
|
||||||
Youtube Live is slow to load its pages currently.
|
|
||||||
Give the extension a moment while the page's iframes are loading.
|
|
||||||
Once you see the Emote Panel Icon you can open the Emote Selection Panel.
|
|
||||||
</p>
|
|
||||||
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
|
|
||||||
<p>
|
|
||||||
Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
|
|
||||||
</p>
|
|
||||||
<img style="height: 540px; width: 960px;" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/theaterMode.gif" alt="theaterMode.gif">
|
|
||||||
<p>
|
|
||||||
Over around 500 Top and Trending Emotes are loaded from popular sites.
|
|
||||||
You can Enable/Disable them in the Options Menu.
|
|
||||||
</p>
|
|
||||||
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
|
|
||||||
<p>
|
|
||||||
Can Also Click on UserNames To Autofill an @ Notification
|
|
||||||
</p>
|
|
||||||
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
|
|
||||||
|
|
||||||
<h2>Use At Your Own Risk</h2>
|
|
||||||
|
|
||||||
<h1>Enjoy!</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../welcomePage.js"></script>
|
<script src="../welcomePage.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,13 +1,11 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
|
|
||||||
"name": "Womp",
|
"name": "WompChat",
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
|
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
|
||||||
"icons": {
|
"icons": {
|
||||||
"48": "assets/icons/icon48.png",
|
"128": "assets/icons/logo128.png"
|
||||||
"128": "assets/icons/icon128.png",
|
|
||||||
"512": "assets/icons/icon512.png"
|
|
||||||
},
|
},
|
||||||
|
|
||||||
"permissions": [
|
"permissions": [
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
|
|
||||||
import './stylus/options.styl';
|
import './stylus/options.styl';
|
||||||
import dateFormat from 'date-fns/format';
|
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import PersistentSyncStorage from './helpers/PersistentSyncStorage';
|
import PersistentSyncStorage from './helpers/PersistentSyncStorage';
|
||||||
|
|
||||||
@@ -123,7 +122,6 @@ PersistentSyncStorage.on('ready', () => {
|
|||||||
case 'allowTextSlider':
|
case 'allowTextSlider':
|
||||||
input.removeAttribute('disabled');
|
input.removeAttribute('disabled');
|
||||||
|
|
||||||
|
|
||||||
if(PersistentSyncStorage.data.options.allowTextSlider == true){
|
if(PersistentSyncStorage.data.options.allowTextSlider == true){
|
||||||
textSizeSlider.disabled = false;
|
textSizeSlider.disabled = false;
|
||||||
}else{
|
}else{
|
||||||
@@ -149,7 +147,5 @@ PersistentSyncStorage.on('ready', () => {
|
|||||||
|
|
||||||
var infoButton = document.getElementById('infoButton');
|
var infoButton = document.getElementById('infoButton');
|
||||||
infoButton.addEventListener('click', function(){
|
infoButton.addEventListener('click', function(){
|
||||||
chrome.tabs.create({ url: './html/welcome.html' });
|
chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -70,4 +70,3 @@ colors = {
|
|||||||
for id, col in colors
|
for id, col in colors
|
||||||
.chat-color-{id} #content #author-name
|
.chat-color-{id} #content #author-name
|
||||||
color: col !important
|
color: col !important
|
||||||
|
|
||||||
|
|||||||
@@ -12,8 +12,6 @@
|
|||||||
//display: initial;
|
//display: initial;
|
||||||
//border-radius: inherit;
|
//border-radius: inherit;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Owner chat messages
|
// Owner chat messages
|
||||||
.yt-live-chat-item-list-renderer[author-type="owner"]
|
.yt-live-chat-item-list-renderer[author-type="owner"]
|
||||||
//background: rgba(#fff, 0.1);
|
//background: rgba(#fff, 0.1);
|
||||||
@@ -26,14 +24,12 @@
|
|||||||
//width: 28px !important
|
//width: 28px !important
|
||||||
//height: 28px !important
|
//height: 28px !important
|
||||||
|
|
||||||
|
|
||||||
// Chat user name
|
// Chat user name
|
||||||
#author-name.yt-live-chat-text-message-renderer
|
#author-name.yt-live-chat-text-message-renderer
|
||||||
&:after
|
&:after
|
||||||
//content: ' :'
|
//content: ' :'
|
||||||
//color: #fff
|
//color: #fff
|
||||||
|
|
||||||
|
|
||||||
.AuthorFix
|
.AuthorFix
|
||||||
#author-photo.yt-live-chat-text-message-renderer
|
#author-photo.yt-live-chat-text-message-renderer
|
||||||
img.yt-img-shadow
|
img.yt-img-shadow
|
||||||
@@ -55,7 +51,6 @@
|
|||||||
#timestamp.yt-live-chat-text-message-renderer
|
#timestamp.yt-live-chat-text-message-renderer
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
|
||||||
|
|
||||||
.Emote
|
.Emote
|
||||||
img
|
img
|
||||||
height: 1.75em
|
height: 1.75em
|
||||||
@@ -66,16 +61,14 @@
|
|||||||
|
|
||||||
emote_div:hover
|
emote_div:hover
|
||||||
background-size: 100% //100%
|
background-size: 100% //100%
|
||||||
background-color: rgba(255, 255, 255, .6)
|
background-color: var(--divider-color)
|
||||||
|
|
||||||
.hideElement
|
.hideElement
|
||||||
display: none !important
|
display: none !important
|
||||||
|
|
||||||
.set-background-color-one
|
.alternateLineColor
|
||||||
background-color: #303030 !important
|
yt-live-chat-text-message-renderer:nth-child(odd)
|
||||||
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
.set-background-color-two
|
|
||||||
background-color: transparent !important
|
|
||||||
|
|
||||||
.setTwitchColors
|
.setTwitchColors
|
||||||
text-shadow: 0 0 1px #000, 0 0 2px #000 !important
|
text-shadow: 0 0 1px #000, 0 0 2px #000 !important
|
||||||
@@ -93,20 +86,20 @@ emote_div:hover
|
|||||||
background-color: transparent
|
background-color: transparent
|
||||||
|
|
||||||
.emoteDivider
|
.emoteDivider
|
||||||
width: 60vw
|
width: 20vw
|
||||||
border: 2px solid #d3d3d3;
|
border: 1px solid red;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-top: 2%;
|
margin-top: 1em;
|
||||||
margin-bottom: 2%;
|
margin-bottom: 1em;
|
||||||
margin-left: auto
|
margin-left: auto
|
||||||
margin-right: auto
|
margin-right: auto
|
||||||
|
|
||||||
.emotePopUpText
|
.emotePopUpText
|
||||||
margin-bottom: 2%;
|
margin-bottom: 2%;
|
||||||
|
|
||||||
|
|
||||||
.popup
|
.popup
|
||||||
background-color: #202020
|
background-color: var(--yt-app-background)
|
||||||
|
color: var(--yt-live-chat-primary-text-color)
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15%
|
top: 15%
|
||||||
left: 0
|
left: 0
|
||||||
@@ -114,7 +107,7 @@ emote_div:hover
|
|||||||
margin-left: auto
|
margin-left: auto
|
||||||
margin-right: auto
|
margin-right: auto
|
||||||
height 70%
|
height 70%
|
||||||
width: 75%
|
width: 100%
|
||||||
z-index: 999
|
z-index: 999
|
||||||
text-align: center
|
text-align: center
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
@@ -139,7 +132,7 @@ emote_div:hover
|
|||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.emoteButton:hover
|
.emoteButton:hover
|
||||||
background-color:rgba(255, 255, 255, .8)
|
background-color: #4e4e4e;
|
||||||
|
|
||||||
.emoteButton:focus
|
.emoteButton:focus
|
||||||
outline:0
|
outline:0
|
||||||
@@ -220,4 +213,3 @@ emote_div:hover
|
|||||||
right: 0px !important
|
right: 0px !important
|
||||||
top: 0px !important
|
top: 0px !important
|
||||||
border: 1px solid #4e4e4e
|
border: 1px solid #4e4e4e
|
||||||
|
|
||||||
@@ -1,6 +1,33 @@
|
|||||||
body
|
body
|
||||||
background-color: #1e1e1e
|
background-color: #1e1e1e
|
||||||
color: #ffffff
|
color: #ffffff
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 10px;
|
||||||
|
width: 400px;
|
||||||
|
|
||||||
|
h1{
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideDiv {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr
|
||||||
|
border-color: #f00;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
.section
|
.section
|
||||||
&:nth-child(1)
|
&:nth-child(1)
|
||||||
@@ -26,11 +53,6 @@ table
|
|||||||
width: 20%
|
width: 20%
|
||||||
text-align: right
|
text-align: right
|
||||||
|
|
||||||
.hr
|
|
||||||
background-color: #d1d1d1
|
|
||||||
height: 1px
|
|
||||||
margin: 10px 0
|
|
||||||
|
|
||||||
#save-status
|
#save-status
|
||||||
text-align: center
|
text-align: center
|
||||||
opacity: 0
|
opacity: 0
|
||||||
@@ -59,18 +81,9 @@ input[type=checkbox][disabled]
|
|||||||
opacity: .9
|
opacity: .9
|
||||||
|
|
||||||
.info_button
|
.info_button
|
||||||
display:inline-block
|
|
||||||
padding:0.3em 1.2em
|
|
||||||
margin:0 0.3em 0.3em 0
|
|
||||||
border-radius:2em
|
border-radius:2em
|
||||||
box-sizing: border-box
|
margin-left: 135px;
|
||||||
text-decoration:none
|
|
||||||
font-weight:300
|
|
||||||
color:#1e1e1e
|
|
||||||
text-align:center
|
|
||||||
margin-left: 150px
|
|
||||||
transition: all 0.2s
|
transition: all 0.2s
|
||||||
|
|
||||||
.info_button:hover
|
.info_button:hover
|
||||||
color: red
|
color: red
|
||||||
|
|
||||||
|
|||||||
@@ -1,147 +0,0 @@
|
|||||||
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons")
|
|
||||||
|
|
||||||
body
|
|
||||||
font-family: 'Roboto', Arial, sans-serif
|
|
||||||
font-size: 16px
|
|
||||||
background: #222
|
|
||||||
color: #fff
|
|
||||||
margin: 25px
|
|
||||||
|
|
||||||
font-weights = {
|
|
||||||
light: 300,
|
|
||||||
regular: 400,
|
|
||||||
bold: 700
|
|
||||||
}
|
|
||||||
for fw, w in font-weights
|
|
||||||
.fw-{fw}
|
|
||||||
font-weight: w
|
|
||||||
|
|
||||||
.success-overlay
|
|
||||||
visibility: hidden
|
|
||||||
opacity: 0
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
z-index: 10
|
|
||||||
background: rgba(#191919, 0.95)
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
height: 100%
|
|
||||||
width: 100%
|
|
||||||
transition: visibility 0s, opacity 200ms ease
|
|
||||||
&.show
|
|
||||||
visibility: visible
|
|
||||||
opacity: 1
|
|
||||||
.material-icons
|
|
||||||
font-size: 20em
|
|
||||||
opacity: 0
|
|
||||||
&.show
|
|
||||||
opacity: 1
|
|
||||||
animation: jackInTheBox 700ms 1
|
|
||||||
.success-message
|
|
||||||
font-size: 3em
|
|
||||||
.close-message
|
|
||||||
font-size: 0.7em
|
|
||||||
opacity: 0.7
|
|
||||||
|
|
||||||
.container
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
h1
|
|
||||||
margin: 0
|
|
||||||
font-size: 3em
|
|
||||||
letter-spacing: 3px
|
|
||||||
.heading-note
|
|
||||||
font-size: 18px
|
|
||||||
color: #bbb
|
|
||||||
.option
|
|
||||||
text-align: center
|
|
||||||
.option-note
|
|
||||||
font-size: 12px
|
|
||||||
font-style: italic
|
|
||||||
color: #999
|
|
||||||
.complete-setup-button
|
|
||||||
background: #333
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
padding: 10px
|
|
||||||
cursor: pointer
|
|
||||||
text-transform: uppercase
|
|
||||||
border-radius: 3px
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(#000, 0.7)
|
|
||||||
transition: background 50ms ease
|
|
||||||
&:hover
|
|
||||||
background: #404040
|
|
||||||
.material-icons
|
|
||||||
margin-right: 7px
|
|
||||||
|
|
||||||
.shields
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
.links_bottom
|
|
||||||
display: inline-block;
|
|
||||||
margin: 1%
|
|
||||||
padding-top: 1em;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border: 1px solid #4e4e4e
|
|
||||||
background-color: #252526;
|
|
||||||
color: white;
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
a
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
a:hover
|
|
||||||
background-color: #d3d3d3;
|
|
||||||
color: black
|
|
||||||
|
|
||||||
a:active
|
|
||||||
box-shadow: none;
|
|
||||||
top: 5px;
|
|
||||||
|
|
||||||
.links_div
|
|
||||||
width: 20vw
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 2%
|
|
||||||
max-width: 30vw
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 2%
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin: 2%
|
|
||||||
width: 60vw
|
|
||||||
border: 3px solid #d3d3d3;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// jackInTheBox from animate.css https://github.com/daneden/animate.css
|
|
||||||
@keyframes jackInTheBox
|
|
||||||
from
|
|
||||||
opacity: 0
|
|
||||||
transform: scale(0.1) rotate(60deg)
|
|
||||||
transform-origin: center center
|
|
||||||
|
|
||||||
50%
|
|
||||||
transform: rotate(-20deg)
|
|
||||||
|
|
||||||
70%
|
|
||||||
opacity: 1
|
|
||||||
transform: rotate(6deg)
|
|
||||||
|
|
||||||
to
|
|
||||||
transform: scale(1)
|
|
||||||
|
|
||||||
@@ -1,48 +1,10 @@
|
|||||||
|
|
||||||
import './stylus/setupPage.styl';
|
|
||||||
import PersistentSyncStorage from './helpers/PersistentSyncStorage';
|
import PersistentSyncStorage from './helpers/PersistentSyncStorage';
|
||||||
|
|
||||||
|
|
||||||
// THIS IS A JS PAGE FOR SETUP.HTML
|
|
||||||
|
|
||||||
|
|
||||||
// --- Definitions ---
|
|
||||||
const completeButton = document.querySelector('.complete-setup-button');
|
|
||||||
const successOverlay = document.querySelector('.success-overlay');
|
|
||||||
const successIcon = successOverlay.querySelector('.material-icons');
|
|
||||||
const successCloseMessageCountdown = successOverlay.querySelector('.countdown');
|
|
||||||
|
|
||||||
const setupComplete = () => {
|
const setupComplete = () => {
|
||||||
|
|
||||||
// successOverlay.classList.add('show');
|
|
||||||
|
|
||||||
// setTimeout(() => {
|
|
||||||
// successIcon.classList.add('show');
|
|
||||||
// }, 100);
|
|
||||||
|
|
||||||
|
|
||||||
//////////////////////////////////// Neat if I ever want to close a window
|
|
||||||
// let closeCountdown = 5; // seconds
|
|
||||||
// const closeTimeout = () => {
|
|
||||||
// successCloseMessageCountdown.innerHTML = closeCountdown;
|
|
||||||
// setTimeout(() => {
|
|
||||||
// if(closeCountdown > 1) {
|
|
||||||
// closeCountdown -= 1;
|
|
||||||
// closeTimeout();
|
|
||||||
// } else {
|
|
||||||
// chrome.tabs.getCurrent((tab) => {
|
|
||||||
// chrome.tabs.remove(tab.id);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }, 1000);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// successCloseMessageCountdown.innerHTML = closeCountdown;
|
|
||||||
// closeTimeout();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Main ---
|
// --- Main ---
|
||||||
|
|
||||||
const main = () => {
|
const main = () => {
|
||||||
|
|
||||||
PersistentSyncStorage.on('ready', () => {
|
PersistentSyncStorage.on('ready', () => {
|
||||||
@@ -58,14 +20,8 @@ const main = () => {
|
|||||||
}, setupComplete);
|
}, setupComplete);
|
||||||
|
|
||||||
console.log('Competed setup, sent message');
|
console.log('Competed setup, sent message');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Executed ---
|
// --- Executed ---
|
||||||
|
|
||||||
main();
|
main();
|
||||||
|
|
||||||
|
|
||||||
|
|||||||