jack/Tampermonkey_scripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix followed page thumbnail scaling

Browse Source
This commit is contained in:
jack
2026-05-27 14:49:00 +08:00
parent ea532949c0
commit faec1140e7
2 changed files with 37 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Chaturbate/chaturbate-thumbnails-2x.user.js
View File

@@ -1,7 +1,7 @@
// ==UserScript==
// @name Chaturbate 缩略图放大 2 倍
// @namespace https://chaturbate.com/
// @version 0.10.7
// @version 0.11.0
// @description 放大当前 Chaturbate 房间列表、发现页轮播、关注下拉与悬停预览缩略图
// @match https://chaturbate.com/*
// @match https://*.chaturbate.com/*
@@ -58,11 +58,11 @@
const DEBUG = true;
// ===========================
const VER = "0.10.7";
const VER = "0.11.0";
// 缓存只保存“站点原始尺寸”，不要保存乘过倍率后的尺寸。
// 这样以后只改 THUMBNAIL_SCALE / CARD_HEIGHT_SCALE 时，可以让缓存自动失效并重新探测，避免旧倍率污染新布局。
const CACHE_KEY = "tm-thumb-scale:size-cache:v7";
const CACHE_SCHEMA = 7;
const CACHE_KEY = "tm-thumb-scale:size-cache:v9";
const CACHE_SCHEMA = 9;
const log = (...args) => {
if (DEBUG) console.log("[tm-thumb-scale]", ...args);
};
@@ -87,8 +87,8 @@
/*
* home 模块：
* - 适用范围：主页、分类页等普通 #roomlist_root 房间列表。
* - 探测值：卡片原始宽高 + 缩略图原始宽高。
* - 放大方式：卡片和缩略图分别按自己的原始宽高乘倍率。
* - 探测值：卡片原始宽度。
* - 放大方式：只放大 grid 列宽；缩略图保持 100% / auto，跟随卡片自然缩放。
* - 注意：关注页列表单独用 followingList 模块，不和 home 共用缓存。
*/
html[data-tm-thumb-scale-home="1"] #main #roomlist_root ul.RoomCardGrid,
@@ -108,14 +108,11 @@
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: var(--tm-thumb-home-card-height) !important;
min-height: var(--tm-thumb-home-card-height) !important;
max-height: var(--tm-thumb-home-card-height) !important;
}
html[data-tm-thumb-scale-home="1"] #roomlist_root ul.RoomCardGrid .RoomCardThumbnail,
html[data-tm-thumb-scale-home="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail_container {
width: var(--tm-thumb-home-thumb-width) !important;
height: var(--tm-thumb-home-thumb-height) !important;
width: 100% !important;
height: auto !important;
display: block !important;
max-width: none !important;
box-sizing: border-box !important;
@@ -123,8 +120,8 @@
html[data-tm-thumb-scale-home="1"] #roomlist_root ul.RoomCardGrid .RoomCardThumbnail img,
html[data-tm-thumb-scale-home="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail_container img,
html[data-tm-thumb-scale-home="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail {
width: var(--tm-thumb-home-thumb-width) !important;
height: var(--tm-thumb-home-thumb-height) !important;
width: 100% !important;
height: auto !important;
/* block 可以消掉图片 inline baseline 带来的细小空隙。 */
display: block !important;
max-width: none !important;
@@ -137,7 +134,9 @@
* - 适用范围：/followed-cams/ 关注页里的 #roomlist_root 房间列表。
* - 为什么和 home 分开：两者 DOM 选择器很像，但站点可能给不同页面不同原始列宽。
* - 缓存也单独存 followingList，避免首页探测值污染关注页。
* - 探测值同样是 card 宽高 + thumb 宽高四项。
* - 和 home 一样只放大 grid 最小列宽；图片跟随卡片自然缩放。
* - 注意：这里仍保留 minmax(..., 1fr)，让站点原来的整行拉伸/对齐逻辑继续工作。
* 不能改成固定列宽，否则宽屏下会出现大空洞，看起来比原站更乱。
*/
html[data-tm-thumb-scale-following-list="1"] #main #roomlist_root ul.RoomCardGrid,
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.RoomCardGrid,
@@ -152,14 +151,11 @@
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: var(--tm-thumb-following-list-card-height) !important;
min-height: var(--tm-thumb-following-list-card-height) !important;
max-height: var(--tm-thumb-following-list-card-height) !important;
}
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.RoomCardGrid .RoomCardThumbnail,
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail_container {
width: var(--tm-thumb-following-list-thumb-width) !important;
height: var(--tm-thumb-following-list-thumb-height) !important;
width: 100% !important;
height: auto !important;
display: block !important;
max-width: none !important;
box-sizing: border-box !important;
@@ -167,8 +163,8 @@
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.RoomCardGrid .RoomCardThumbnail img,
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail_container img,
html[data-tm-thumb-scale-following-list="1"] #roomlist_root ul.list:has(li.roomCard) .room_thumbnail {
width: var(--tm-thumb-following-list-thumb-width) !important;
height: var(--tm-thumb-following-list-thumb-height) !important;
width: 100% !important;
height: auto !important;
display: block !important;
max-width: none !important;
box-sizing: border-box !important;
@@ -514,20 +510,10 @@
// 缓存命中时直接写 CSS 变量并打开模块开关。
// 这里仍然通过 setVar() 乘倍率，因此缓存中始终保持原始尺寸。
if (name === "home" && !isFollowingListPage() && isRect(data.homeCard) && isRect(data.homeThumb)) {
moduleReady.home = [
setVar("--tm-thumb-home-width", data.homeCard.width),
setCardHeightVar("--tm-thumb-home-card-height", data.homeCard.height),
setVar("--tm-thumb-home-thumb-width", data.homeThumb.width),
setVar("--tm-thumb-home-thumb-height", data.homeThumb.height),
].every(Boolean);
} else if (name === "followingList" && isFollowingListPage() && isRect(data.followingListCard) && isRect(data.followingListThumb)) {
moduleReady.followingList = [
setVar("--tm-thumb-following-list-width", data.followingListCard.width),
setCardHeightVar("--tm-thumb-following-list-card-height", data.followingListCard.height),
setVar("--tm-thumb-following-list-thumb-width", data.followingListThumb.width),
setVar("--tm-thumb-following-list-thumb-height", data.followingListThumb.height),
].every(Boolean);
if (name === "home" && !isFollowingListPage() && isRect(data.homeCard)) {
moduleReady.home = setVar("--tm-thumb-home-width", data.homeCard.width);
} else if (name === "followingList" && isFollowingListPage() && isRect(data.followingListCard)) {
moduleReady.followingList = setVar("--tm-thumb-following-list-width", data.followingListCard.width);
} else if (name === "related" && isRect(data.relatedCard) && isRect(data.relatedThumb)) {
const widthReady = setVar("--tm-thumb-related-width", data.relatedCard.width);
const cardHeightReady = setCardHeightVar("--tm-thumb-related-card-height", data.relatedCard.height);
@@ -628,12 +614,10 @@
*/
const followingListPage = isFollowingListPage();
const measured = {
// 首页普通房间列表：卡片宽高 + 缩略图宽高四项独立探测。
// 首页普通房间列表：只探测卡片宽度。缩略图跟随卡片自然缩放，避免重复放大。
homeCard: moduleReady.home || followingListPage ? null : firstRect("#roomlist_root li.RoomCard, #roomlist_root li.roomCard"),
homeThumb: moduleReady.home || followingListPage ? null : firstRect("#roomlist_root .RoomCardThumbnail, #roomlist_root .room_thumbnail_container"),
// 关注页房间列表：选择器和首页相似，但独立探测、独立缓存、独立 CSS 变量。
// 关注页房间列表：只探测卡片宽度；独立缓存，避免和首页混用。
followingListCard: moduleReady.followingList || !followingListPage ? null : firstRect("#roomlist_root li.RoomCard, #roomlist_root li.roomCard"),
followingListThumb: moduleReady.followingList || !followingListPage ? null : firstRect("#roomlist_root .RoomCardThumbnail, #roomlist_root .room_thumbnail_container"),
// 频道页“更多这样的房间”：卡片宽高和缩略图宽高都要探测，否则放大后行高容易不齐。
relatedCard: moduleReady.related ? null : firstRect(".BaseRoomContents ul.RoomCardGrid > li.RoomCard, #main.roomPage ul.list:has(li.roomCard) li.roomCard, .BaseRoomContents ul.list:has(li.roomCard) li.roomCard"),
relatedThumb: moduleReady.related ? null : firstRect(".BaseRoomContents ul.RoomCardGrid .RoomCardThumbnail, #main.roomPage ul.list:has(li.roomCard) .room_thumbnail_container, .BaseRoomContents ul.list:has(li.roomCard) .room_thumbnail_container"),
@@ -655,35 +639,23 @@
};
if (!moduleReady.home && !followingListPage) {
// home 依赖 card/thumb 各自宽高；成功后立刻缓存，后续普通列表页面可直接套用。
moduleReady.home = [
setVar("--tm-thumb-home-width", measured.homeCard && measured.homeCard.width),
setCardHeightVar("--tm-thumb-home-card-height", measured.homeCard && measured.homeCard.height),
setVar("--tm-thumb-home-thumb-width", measured.homeThumb && measured.homeThumb.width),
setVar("--tm-thumb-home-thumb-height", measured.homeThumb && measured.homeThumb.height),
].every(Boolean);
// home 只依赖卡片宽度；成功后立刻缓存，后续普通列表页面可直接套用。
moduleReady.home = setVar("--tm-thumb-home-width", measured.homeCard && measured.homeCard.width);
setModuleReady("home", moduleReady.home);
if (moduleReady.home) {
updateCacheModule("home", {
homeCard: cloneRect(measured.homeCard),
homeThumb: cloneRect(measured.homeThumb),
});
}
}
if (!moduleReady.followingList && followingListPage) {
// followingList 单独缓存，避免关注页拿到首页的原始宽度。
moduleReady.followingList = [
setVar("--tm-thumb-following-list-width", measured.followingListCard && measured.followingListCard.width),
setCardHeightVar("--tm-thumb-following-list-card-height", measured.followingListCard && measured.followingListCard.height),
setVar("--tm-thumb-following-list-thumb-width", measured.followingListThumb && measured.followingListThumb.width),
setVar("--tm-thumb-following-list-thumb-height", measured.followingListThumb && measured.followingListThumb.height),
].every(Boolean);
moduleReady.followingList = setVar("--tm-thumb-following-list-width", measured.followingListCard && measured.followingListCard.width);
setModuleReady("followingList", moduleReady.followingList);
if (moduleReady.followingList) {
updateCacheModule("followingList", {
followingListCard: cloneRect(measured.followingListCard),
followingListThumb: cloneRect(measured.followingListThumb),
});
}
}