☰

Tinychat Enhancement Suite

Fixes some Tinychat beta room annoyances and adds useful features.

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

// ==UserScript==
// @name         Tinychat Enhancement Suite
// @namespace    https://gf.qytechs.cn/en/users/27283-mutationobserver
// @version      2017-09-08--3
// @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        GM_setValue
// @grant        GM_getValue
// @grant        GM_listValues

// ==/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");

var audioPop = new Audio('/webrtc/2.0.20-420/sound/pop.mp3');



function waitForSettings() {
	settingsVisible = false;
	if (titleElem.querySelector("#room-header-gifts") != null) {
		clearInterval(settingsWaitInterval);
		
		settingsElem = titleElem.querySelector("#room-header-gifts").insertAdjacentHTML("beforebegin", `
		<div id="tes-settings">
			<div id="tes-settingsBox" class="hidden">
				<p id="title"><a href="https://gf.qytechs.cn/en/scripts/32964-tinychat-enhancement-suite" target="_blank">Tinychat Enhancement Suite</a></p>
				<div id="tes-settings-mentions">
					<span class="label" data-title='A comma-separated list of phrases you would like alerts and highlights for. Example of 3 phrases: "hello,Google Chrome,sky"'>
						Alert phrases<span class="info">?</span>
					</span>
					<input><button class="save">save</button>
					
				</div>
			</div>
			<div id="tes-settingsGear" title="Tinychat Enhancement Suite settings">✱</div>
		</div>
		`);
		
		titleElem.getElementById("tes-settingsGear").addEventListener("click", toggleSettings);
		titleElem.querySelector("#tes-settings #tes-settings-mentions button.save").addEventListener("click", function(){mentionsManager("save");} );
		settingMentions = [];
		mentionsManager("load");
	}
}

function toggleSettings() {
	if (settingsVisible == true) {
		titleElem.getElementById("tes-settingsBox").classList.add("hidden");
		titleElem.getElementById("tes-settings").classList.remove("tes-open");
		settingsVisible = false;
	}
	
	else {
		titleElem.getElementById("tes-settingsBox").classList.remove("hidden");
		titleElem.getElementById("tes-settings").classList.add("tes-open");
		settingsVisible = true;
	}
	
}

var settingsWaitInterval = setInterval(waitForSettings,1000);


function mentionsManager(mode) {
	var inputElem = titleElem.querySelector("#tes-settings #tes-settings-mentions input");
	// phrases = inputElem.value.split(",");
	var phrase = inputElem.value;
	
	if (mode == "save") {
		GM_setValue("tes-Mentions", phrase);
		settingMentions = phrase;
	}
	if (mode == "load") {
		var loadedMentions = GM_getValue("tes-Mentions");
		inputElem.value = loadedMentions;
		settingMentions = loadedMentions.split(",");
	}
						 return;
	
	var phrase = phrase.toString();
	if (mode == "save") {
		settingMentions.push(phrases);
		GM_setValue("tes-Mentions", JSON.stringify(setting_Mentions));
		console.log("Mention add:" + phrases);
	}
	if (mode == "load") {
		var mentions = JSON.parse(GM_getValue("tes-Mentions"));
		console.log("Mention load:" + mentions);
		settingMentions = mentions;
		inputElem.value = settingMentions.join();
	}
}


titleCSS.insertAdjacentHTML("beforeend", `
<style id="titleCSS">
	@keyframes ease-to-left {
		0% {left:100%; opacity: 0;}
		100% {left:0; opacity: 1;}
	}
	@keyframes ease-to-right {
		0% {right:auto;}
		100% {right:0;}
	}
	@keyframes ease-to-bottom-21px {
		0% {top:0;}
		100% {top:21px;}
	}
	#tes-settings > * {
	    animation: ease-to-bottom-21px .2s ease 0s 1;
		position: relative;
		top: 21px;
	}
	#tes-settings .hidden { display: none; }
	#tes-settings #title { font-weight: bold; }
	#tes-settings {
		max-height: 10%;
		margin-right: 15px;
		font-size: 11px;
    	flex: none;
	    overflow: hidden;
	    z-index: 9;
	}
	#tes-settings:hover {
		overflow: visible;
	}
	#tes-settingsGear {
		font-size: 70px;
		color: #38cd57;
		color: #53b6ef;
		float: right;
		/*animation: none;*/
	}
	#tes-settingsGear:hover { cursor: pointer; }
	.tes-open #tes-settingsGear { background: white; }
	#tes-settingsBox {
		background: white;
		padding: 0px 10px 10px 10px;
		float: left;
		border: #53b6ef 1px solid;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		animation: ease-to-bottom-21px .2s ease 0s 1;
		transition: all .2s linear;
	}
	#tes-settingsBox.hidden {
		animation: ease-to-right .2s ease 0s 1;
		display: visible;
		/*position: relative;
		right: -1000px;*/
	}
	#tes-settings .label{
		margin-right: 4px;
	}
	#tes-settings .info{
		margin-left: 3px;
		color: #0d94e3;
		font-weight: bold;
		border: #0d94e3 1px solid;
		border-radius: 16px;
		height: 1em;
		width: 1em;
		text-align: center;
		display: inline-block;
	}
	#tes-settings .label:hover:after{
		padding: 5px;
		border-radius: 10px;
		color: white;
		background: #61787f;
		content: attr(data-title);
		display: inline-block;
		position: absolute;
		top: 58px;
    	left: 0;
	}
	/*#tes-settings .label:hover:before{
		border: solid;
		border-color: #61787f transparent;
		border-width: 0px 6px 6px 6px;
		top: 10px;
		content: "";
		left: 8%;
		position: relative;
		display: inline-block;
	}*/

	#tes-settings a:visited, #tes-settings a:link {
		text-decoration: none;
		color: inherit;
	}
	#tes-settings a:hover {
		color: #53b6ef;
	}

	#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>
`);

videolistCSS.insertAdjacentHTML("beforeend", `
<style id="videolistCSS">
	#videos-header {
		height: 10px;
		min-height: 10px;
	}
	#Fvideolist * {
		width: 75%!important;
		display: contents;
		float: right;
		flex-direction: column;
	}
	#Fvideos {
		flex-direction: unset;
		flex-wrap: unset;
	}
</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>
`);


var messageCSS = `
	.tes-mention-message { color: red; }
`;

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();
	messageParser();
}

messageCount = 0;
function messageParser() {
	latestMessageElem = chatlogElem.querySelector("#chat-content div.message.common:last-of-type");
	if (latestMessageElem != null) {
		latestMessageElem.setAttribute("id", "msg-"+messageCount);
		messageCount++;

		tcMessageHtmlElem = latestMessageElem.querySelector("tc-message-html").shadowRoot;
		latestMessageContentElem = tcMessageHtmlElem.querySelector("#html");
		
		var node = document.createElement("style");
		var textnode = document.createTextNode(messageCSS);
		node.appendChild(textnode);
		tcMessageHtmlElem.appendChild(node);
		
		
		latestMessageContent = latestMessageContentElem.innerHTML;
		
		for (i=0; i < settingMentions.length; i++) {
			if (latestMessageContent.toLowerCase().includes(settingMentions[i].toLowerCase())) {
				latestMessageContentElem.classList.add("tes-mention-message");
				audioPop.play();
				break;
			}
		}
	}
}

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


var x = new MutationObserver(function (e) {
  if (e[0].addedNodes) newCamAdded();
});
x.observe(videolistElem.querySelector(".videos-items:last-child"), { 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 recentMsgNickname = chatlogElem.querySelector(queryString);
		recentMsgNickname.insertAdjacentHTML("afterend", "<span id='timestamp'> " + timestamp + "</span>");	
	}
}

// var newCamAddedInterval = setInterval(newCamAdded, 1000);
// var camAddedCounter = 0;
// newCamAdded();
function newCamAdded() {
	// camAddedCounter += 1;
	// if (camAddedCounter == 10) {
	// 	clearInterval(newCamAddedInterval);
	// }
	console.log("Cam added");
	var queryString = ".videos-items:last-child > .js-video";
	if (videolistElem.querySelector(queryString) != null) {
		var camElems = videolistElem.querySelectorAll(queryString);
		// console.log("found");
	}
	else {
		return;
	}
	for (i=0; i < camElems.length; i++) {
		if ( camElems[i].hasAttribute("id") == true ) { continue; }
		var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
		var camName = camItem.querySelector(".nickname").getAttribute("title");
		camElems[i].setAttribute("id", "camUser-"+camName);
		console.log("Cam: " + camName);
	}
}

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址