☰

Tinychat Enhancement Suite

Fixes some Tinychat beta room annoyances and adds useful features.

2017-09-06 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

// ==UserScript==
// @name         Tinychat Enhancement Suite
// @namespace    https://greasyfork.org/en/users/27283-mutationobserver
// @version      2017-09-06--2
// @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:hover {
		background: rgba(0, 0, 0, 0.03);
	}
	*/
	#chat-content > .message.common {
		margin-bottom: 5px;
	}
    #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;
	}
	#timestamp {
		font-size: 11px;
		color: silver;
		float: right;
	}
	#chat-content > .message > .nickname {
		overflow: initial;
    	line-height: initial;
	}
	#chat-content div.message.common:last-of-type {
		margin-bottom: 10px;
	}
</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");
var unreadbubble = chatlogElem.querySelector("#input-unread");
var autoScrollStatus = true;

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

function userHasScrolled(e) {
	var scrollwheelAmount = e.deltaY;

	if (scrollwheelAmount < 0) {
		autoScrollStatus = false;
	}
	if (autoScrollStatus === false && scrollbox.scrollHeight - scrollbox.scrollTop == scrollbox.offsetHeight) {
		autoScrollStatus = true;
	}
}

function newMessageAdded() {
	if (autoScrollStatus === true) { updateScroll(); }
	timestampAdd();
}


var x = new MutationObserver(function (e) {
  if (e[0].addedNodes) newMessageAdded();
});
x.observe(chatlogElem.querySelector("#chat-content"), { childList: true });


var scrollboxEvent = scrollbox.addEventListener("wheel", userHasScrolled);
var unreadbubble = unreadbubble.addEventListener("click", function(){autoScrollStatus = true;} );

function timestampAdd() {
	var queryString = "#chat-content div.message.common:last-of-type .nickname";
	
	var SHOW_SECONDS = true;

	var date = new Date(); 
	var hours = date.getHours();
	var minutes = date.getMinutes().toString();
	var secs = date.getSeconds().toString();

	if (hours > 12) {
		hours = (hours % 12 || 12);
		var period = "pm";
	}
	else { var period = "am"; }

	if (hours == "0") { hours = "12"; }
	if (minutes == "0") { minutes = "00"; }
	if (minutes.length == 1) { minutes = "0" + minutes; }
	if (secs.length == 1) { secs = "0" + secs; }

	if (SHOW_SECONDS == true) {
		var timestamp = hours + ":" + minutes + ":" + secs + "" + period;
	}
	else {
		var timestamp = hours + ":" + minutes + period;
	}
	
	if (chatlogElem.querySelector(queryString) != null) {
		var recentMsg = chatlogElem.querySelector(queryString);
		recentMsg.insertAdjacentHTML("afterend", "<span id='timestamp'> " + timestamp + "</span>");	
	}
}