☰

Tinychat Enhancement Suite

Fixes some Tinychat beta room annoyances and adds useful features.

目前為 2017-09-05 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Tinychat Enhancement Suite
// @namespace    https://greasyfork.org/en/users/27283-mutationobserver
// @version      2017-09-05--1
// @description  Fixes some Tinychat beta room annoyances and adds useful features.
// @author       MutationObserver
// @match        https://tinychat.com/room/*
// @exclude      https://tinychat.com/room/*?1
// @grant        none
// ==/UserScript==
/* jshint -W097 */
//'use strict';

var webappElem = document.querySelector("tinychat-webrtc-app").shadowRoot;
var chatlogElem = webappElem.querySelector("tinychat-chatlog").shadowRoot;
var titleElem = webappElem.querySelector("tinychat-title").shadowRoot;
var sidemenuElem = webappElem.querySelector("tinychat-sidemenu").shadowRoot;
var videolistElem = webappElem.querySelector("tinychat-videolist").shadowRoot;

var chatlistElem = sidemenuElem.querySelector("tinychat-chatlist").shadowRoot;
var userlistElem = sidemenuElem.querySelector("tinychat-userlist").shadowRoot;

var chatlogCSS = chatlogElem.querySelector("#chat-wrapper");
var sidemenuCSS = sidemenuElem.querySelector("label.switcher");
var webappCSS = webappElem.querySelector("#toast");
var chatlistCSS = chatlistElem.querySelector("#header > span");
var userlistCSS = userlistElem.querySelector("#header > span");
var titleCSS = titleElem.querySelector("#room-header");
var videolistCSS = videolistElem.querySelector("#videolist");



videolistCSS.insertAdjacentHTML("beforeend", `
<style id="videolistCSS">
	#videos-header {
		height: 10px;
		min-height: 10px;
	}
</style>
`);


titleCSS.insertAdjacentHTML("beforeend", `
<style id="titleCSS">
	#room-header {
		min-height: 10%; /* 105px */
    	max-height: 10%;
	}
	@media screen and (max-width: 600px) {
		#room-header {
			min-height: inherit;
    		max-height: inherit;
		}
	}
	#room-header-info {
		padding: 0;
	}
	#room-header-info-text {
		height: auto;
	}
	@media screen and (max-width: 600px) {
		#room-header-info-text {
			height: inherit;
		}
	}
	#room-header-avatar {
		margin: 2px 10px 0 35px;
		height: 90px;
		min-width: 90px;
		max-width: 90px;
	}
	#room-header-gifts {
		padding: 10px 10px;
	}
</style>
`);


chatlistCSS.insertAdjacentHTML("afterend", `
<style id="chatlistCSS">
	#chatlist > div > span {
		padding-left: 1%;
	}
</style>
`);

userlistCSS.insertAdjacentHTML("afterend", `
<style id="userlistCSS">
	#userlist > div > span {
		padding-left: 1%;
	}
	.list-item > span > span {
		right: auto;
	    padding: 0 5px;
	}
	.list-item > span > .nickname {
		padding-right: 3px;
	}
	.list-item > span > img,
	.list-item > span[data-status="extreme"]:before,
	.list-item > span[data-status="gold"]:before,
	.list-item > span[data-status="pro"]:before {
		left: auto;
	    right: 0;
	}
	.list-item > span > span[data-moderator="1"]:before {
		filter: hue-rotate(226deg) saturate(4000%);
}
</style>
`);

document.querySelector("body").insertAdjacentHTML("beforeend", `
<style id="bodyCSS">
	#nav-static-wrapper {
		width: 2px;
    	opacity: .7;
	}
	@media screen and (max-width: 1000px) {
		#nav-static-wrapper {
			width: 82px;
			opacity: 1;
		}
	}
   #content {
       padding: 0;
   }
	body {
      font-family: sans-serif;
	}
	#header-user {
		left: 115px;
	}
	@media screen and (max-width: 1000px) {
		#header-user {
			left: 21px;
		}
	}
	@media screen and (max-width: 600px) {
		#header-user {
			left: auto;
			right: 54px;
		}
	}
</style>
`);

chatlogCSS.insertAdjacentHTML("beforeend", `
<style id="chatlogCSS">
	#chat-content > .message {
		padding-bottom: 0;
		padding-top: 0!important;
		margin-bottom: 0;
		min-height: 0px!important;
	}
    #chat-content > .message.system {
        padding: 0;
    }
    #chat-instant > a:first-child,
	#chat-content > .message > a:first-child {
		top: auto;
     }
    #chat-position #input:before {
        background: none;
    }
	#chat-instant > a > .avatar,
	#chat-content > .message > a > .avatar {
		border-radius: unset;
	}
</style>
`);

sidemenuCSS.innerHTML += `
<style id="sidemenuCSS">
    #sidemenu {
        min-width: 162px;
        max-width: 10%;
        left: auto;
	}
	@media screen and (max-width: 1000px) {
		#sidemenu {
			left: -188px;
		}
	}
	#sidemenu-content {
    	padding-left: 1%;
	}
	#live-directory-wrapper {
		padding: 0;
	}
	#user-info {
		padding: 0 3px;
    	height: auto;
	
	}
</style>
`;

webappCSS.innerHTML += `
<style id="webappCSS">
    #room {
        padding: 0;
        padding-left: 142px;
    }
	@media screen and (max-width: 1000px) {
		:host > #room {
			padding-left: 82px;
		}
	}
	@media screen and (max-width: 600px) {
		:host > #room {
			padding-left: 0;
		}
	}
</style>
`;


var scrollbox = chatlogElem.querySelector("#chat");

function updateScroll() {
	scrollbox.scrollTop = scrollbox.scrollHeight;
}

function userHasScrolled(e) {
	var scrollwheelAmount = e.deltaY;
	
	if (scrollwheelAmount < 0) {
		clearInterval(autoscrollInterval);
		autoScrollStatus = false;
	}
	if (autoScrollStatus === false && scrollbox.scrollHeight - scrollbox.scrollTop == scrollbox.offsetHeight) {
		autoScrollStatus = true;
		startAutoscroll();
	}
}

var autoScrollStatus = true;

function startAutoscroll() {
	autoscrollInterval = setInterval(updateScroll,500);
}

var scrollboxEvent = scrollbox.addEventListener("wheel", userHasScrolled);
startAutoscroll();