Skip to content

Commit

Permalink
search fix & colors, fullblack support, verified badge on quotes
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimdenGD
dimdenGD committed Aug 10, 2022
1 parent f061ff1 commit a9227c1
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 18 deletions.
6 changes: 3 additions & 3 deletions layouts/home/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,15 +223,15 @@ async function appendTweet(t, timelineContainer, options = {}) {
if(linkColors[t.user.screen_name]) {
let rgb = hex2rgb(linkColors[t.user.screen_name]);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
linkColors[t.user.screen_name] = colorShade(linkColors[t.user.screen_name], 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+linkColors[t.user.screen_name]);
} else {
if(t.user.profile_link_color && t.user.profile_link_color !== '1DA1F2') {
let rgb = hex2rgb(t.user.profile_link_color);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
t.user.profile_link_color = colorShade(t.user.profile_link_color, 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+t.user.profile_link_color);
Expand Down Expand Up @@ -292,7 +292,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
<img src="${t.quoted_status.user.profile_image_url_https}" alt="${escapeHTML(t.quoted_status.user.name)}" class="tweet-avatar-quote" width="24" height="24">
<div class="tweet-header-quote">
<span class="tweet-header-info-quote">
<b class="tweet-header-name-quote">${escapeHTML(t.quoted_status.user.name)}</b>
<b class="tweet-header-name-quote ${t.quoted_status.user.verified || t.quoted_status.user.id_str === '1123203847776763904' ? 'user-verified' : ''} ${t.quoted_status.user.protected ? 'user-protected' : ''}">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion layouts/notifications/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
<img src="${t.quoted_status.user.profile_image_url_https}" alt="${escapeHTML(t.quoted_status.user.name)}" class="tweet-avatar-quote" width="24" height="24">
<div class="tweet-header-quote">
<span class="tweet-header-info-quote">
<b class="tweet-header-name-quote">${escapeHTML(t.quoted_status.user.name)}</b>
<b class="tweet-header-name-quote ${t.quoted_status.user.verified || t.quoted_status.user.id_str === '1123203847776763904' ? 'user-verified' : ''} ${t.quoted_status.user.protected ? 'user-protected' : ''}">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions layouts/profile/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,15 +242,15 @@ function updateUserData() {
let r = document.querySelector(':root');
let rgb = hex2rgb(customColor);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && customColor !== '000000') {
customColor = colorShade(customColor, 80).slice(1);
}
r.style.setProperty('--link-color', `#`+customColor);
} else {
let r = document.querySelector(':root');
let rgb = hex2rgb(oldUser.profile_link_color);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && customColor !== '000000') {
oldUser.profile_link_color = colorShade(oldUser.profile_link_color, 80).slice(1);
}
if(oldUser.profile_link_color && oldUser.profile_link_color !== '1DA1F2') r.style.setProperty('--link-color', `#`+oldUser.profile_link_color);
Expand Down Expand Up @@ -992,7 +992,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
<img src="${t.quoted_status.user.profile_image_url_https}" alt="${escapeHTML(t.quoted_status.user.name)}" class="tweet-avatar-quote" width="24" height="24">
<div class="tweet-header-quote">
<span class="tweet-header-info-quote">
<b class="tweet-header-name-quote">${escapeHTML(t.quoted_status.user.name)}</b>
<b class="tweet-header-name-quote ${t.quoted_status.user.verified || t.quoted_status.user.id_str === '1123203847776763904' ? 'user-verified' : ''} ${t.quoted_status.user.protected ? 'user-protected' : ''}">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
</span>
</div>
Expand Down
83 changes: 82 additions & 1 deletion layouts/search/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL'
vars = data;
});
let cursor;
let linkColors = {};
let searchParams = {}, searchSettings = {};
let saved;

Expand All @@ -14,6 +15,7 @@ function updateSubpage() {
let params = Object.fromEntries(new URLSearchParams(location.search + location.hash));
searchParams = params || {};
searchSettings = {};
linkColors = {};
let activeParams = Array.from(document.getElementsByClassName('search-switch-active'));
activeParams.forEach(a => a.classList.remove('search-switch-active'));
if(params.f === 'live') {
Expand Down Expand Up @@ -76,6 +78,49 @@ function updateUserData() {
function renderUserData() {
document.getElementById('wtf-viewall').href = `https://mobile.twitter.com/i/connect_people?user_id=${user.id_str}`;
}
function luminance(r, g, b) {
var a = [r, g, b].map(function(v) {
v /= 255;
return v <= 0.03928 ?
v / 12.92 :
Math.pow((v + 0.055) / 1.055, 2.4);
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
var brightest = Math.max(lum1, lum2);
var darkest = Math.min(lum1, lum2);
return (brightest + 0.05) /
(darkest + 0.05);
}
const hex2rgb = (hex) => {
if(!hex.startsWith('#')) hex = `#${hex}`;
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
// return {r, g, b} // return an object
return [ r, g, b ]
}

const colorShade = (col, amt) => {
col = col.replace(/^#/, '')
if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]

let [r, g, b] = col.match(/.{2}/g);
([r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt])

r = Math.max(Math.min(255, r), 0).toString(16)
g = Math.max(Math.min(255, g), 0).toString(16)
b = Math.max(Math.min(255, b), 0).toString(16)

const rr = (r.length < 2 ? '0' : '') + r
const gg = (g.length < 2 ? '0' : '') + g
const bb = (b.length < 2 ? '0' : '') + b

return `#${rr}${gg}${bb}`
}

async function appendTweet(t, timelineContainer, options = {}) {
const tweet = document.createElement('div');
Expand All @@ -91,6 +136,25 @@ async function appendTweet(t, timelineContainer, options = {}) {
}
if (options.selfThreadContinuation) tweet.classList.add('tweet-self-thread-continuation');
if (options.noTop) tweet.classList.add('tweet-no-top');
if(vars.linkColorsInTL) {
if(linkColors[t.user.screen_name]) {
let rgb = hex2rgb(linkColors[t.user.screen_name]);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
linkColors[t.user.screen_name] = colorShade(linkColors[t.user.screen_name], 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+linkColors[t.user.screen_name]);
} else {
if(t.user.profile_link_color && t.user.profile_link_color !== '1DA1F2') {
let rgb = hex2rgb(t.user.profile_link_color);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
t.user.profile_link_color = colorShade(t.user.profile_link_color, 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+t.user.profile_link_color);
}
}
}
const mediaClasses = [
undefined,
'tweet-media-element-one',
Expand Down Expand Up @@ -145,7 +209,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
<img src="${t.quoted_status.user.profile_image_url_https}" alt="${escapeHTML(t.quoted_status.user.name)}" class="tweet-avatar-quote" width="24" height="24">
<div class="tweet-header-quote">
<span class="tweet-header-info-quote">
<b class="tweet-header-name-quote">${escapeHTML(t.quoted_status.user.name)}</b>
<b class="tweet-header-name-quote ${t.quoted_status.user.verified || t.quoted_status.user.id_str === '1123203847776763904' ? 'user-verified' : ''} ${t.quoted_status.user.protected ? 'user-protected' : ''}">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
</span>
</div>
Expand Down Expand Up @@ -826,6 +890,7 @@ async function renderSearch(c) {
let searchDiv = document.getElementById('timeline');
let searchMore = document.getElementById('search-more');
searchMore.hidden = false;
searchMore.innerText = 'Loading...';
let search;
try {
if(!settings) {
Expand Down Expand Up @@ -853,11 +918,27 @@ async function renderSearch(c) {
console.error(e);
cursor = undefined;
searchMore.hidden = true;
searchMore.innerText = 'Load more';
return document.getElementById('loading-box').hidden = true;
}
if(!c) {
searchDiv.innerHTML = '';
}
if(vars.linkColorsInTL) {
let tlUsers = [];
for(let i in search) {
let t = search[i];
if(t.type !== 'user') {
if(!tlUsers.includes(t.user.screen_name)) tlUsers.push(t.user.screen_name);
}
}
tlUsers = tlUsers.filter(i => !linkColors[i]);
let linkData = await fetch(`https://dimden.dev/services/twitter_link_colors/get_multiple/${tlUsers.join(',')}`).then(res => res.json()).catch(console.error);
if(linkData) for(let i in linkData) {
linkColors[linkData[i].username] = linkData[i].color;
}
}
searchMore.innerText = 'Load more';
if(search.length === 0) {
searchDiv.innerHTML = `<div class="no-results">
<br><br>
Expand Down
10 changes: 6 additions & 4 deletions layouts/settings/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,12 @@ setTimeout(async () => {
profileLinkColor.addEventListener('change', () => {
let previewColor = profileLinkColor.value;
colorPreviewLight.style.color = `${previewColor}`;
let rgb = hex2rgb(previewColor);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4) {
previewColor = colorShade(previewColor, 80);
if(previewColor !== "#000000") {
let rgb = hex2rgb(previewColor);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4) {
previewColor = colorShade(previewColor, 80);
}
}
colorPreviewDark.style.color = `${previewColor}`;
});
Expand Down
8 changes: 4 additions & 4 deletions layouts/tweet/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -624,15 +624,15 @@ async function appendTweet(t, timelineContainer, options = {}) {
if(linkColors[t.user.screen_name]) {
let rgb = hex2rgb(linkColors[t.user.screen_name]);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
linkColors[t.user.screen_name] = colorShade(linkColors[t.user.screen_name], 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+linkColors[t.user.screen_name]);
} else {
if(t.user.profile_link_color && t.user.profile_link_color !== '1DA1F2') {
let rgb = hex2rgb(t.user.profile_link_color);
let ratio = contrast(rgb, [27, 40, 54]);
if(ratio < 4 && vars.darkMode) {
if(ratio < 4 && vars.darkMode && linkColors[t.user.screen_name] !== '000000') {
t.user.profile_link_color = colorShade(t.user.profile_link_color, 80).slice(1);
}
tweet.style.setProperty('--link-color', '#'+t.user.profile_link_color);
Expand Down Expand Up @@ -695,8 +695,8 @@ async function appendTweet(t, timelineContainer, options = {}) {
<img src="${t.quoted_status.user.profile_image_url_https}" alt="${escapeHTML(t.quoted_status.user.name)}" class="tweet-avatar-quote" width="24" height="24">
<div class="tweet-header-quote">
<span class="tweet-header-info-quote">
<b class="tweet-header-name-quote">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
<b class="tweet-header-name-quote ${t.quoted_status.user.verified || t.quoted_status.user.id_str === '1123203847776763904' ? 'user-verified' : ''} ${t.quoted_status.user.protected ? 'user-protected' : ''}">${escapeHTML(t.quoted_status.user.name)}</b>
<span class="tweet-header-handle-quote">@${t.quoted_status.user.screen_name}</span>
</span>
</div>
<span class="tweet-time-quote" data-timestamp="${new Date(t.quoted_status.created_at).getTime()}" title="${new Date(t.quoted_status.created_at).toLocaleString()}">${timeElapsed(new Date(t.quoted_status.created_at).getTime())}</span>
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Old Twitter Layout (2022)",
"description": "A new extension that returns old Twitter's look.",
"version": "1.4.2",
"version": "1.4.3",
"manifest_version": 3,
"homepage_url": "https://github.com/dimdenGD/OldTwitter",
"background": {
Expand Down
2 changes: 1 addition & 1 deletion scripts/apis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2049,7 +2049,7 @@ API.searchV2 = (obj, cursor) => {
let list = entries.filter(e => e.entryId.startsWith('sq-I-t-') || e.entryId.startsWith('user-') || e.entryId.startsWith('tweet-'));
let cursor = entries.find(e => e.entryId.startsWith('sq-cursor-bottom') || e.entryId.startsWith('cursor-bottom'));
if(!cursor) {
let entries = data.timeline.instructions.find(i => i.replaceEntry && (i.replaceEntry.entryIdToReplace === 'sq-cursor-bottom' || i.replaceEntry.entryIdToReplace === 'cursor-bottom'));
let entries = data.timeline.instructions.find(i => i.replaceEntry && (i.replaceEntry.entryIdToReplace.includes('sq-cursor-bottom') || i.replaceEntry.entryIdToReplace.includes('cursor-bottom')));
if(entries) {
cursor = entries.replaceEntry.entry.content.operation.cursor.value;
}
Expand Down

0 comments on commit a9227c1

Please sign in to comment.