new tl typeg

dimdenGD · Sep 22, 2022 · 5c5faa4 · 5c5faa4
1 parent 1bde009
commit 5c5faa4
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,8 @@ This extension doesn't add any CSS on top of original Twitter. It's fully origin
 ![Search](https://lune.dimden.dev/575b9d30f1.png)  
 
 ## Features
-- Basically almost all of Twitter functionality is implemented
+- Almost all of Twitter functionality is implemented
+- Both reverse chronological, algorithmical timelines support. And exclusive: Reverse chronological timeline with friends likes and follows (basically mix of both chrono and algo timelines)
 - Custom profile link colors supported
 - You can change custom profile link color and it'll appear for other extension users (priority: oldtwitter color db -> twitter color db -> default color)
 - Ability to enable/disable Twemoji, disable stars (favorites) back to likes (hearts), change default link color and font
@@ -51,8 +52,8 @@ The code is open source (duh) so you can check everything yourself. It never sen
 Extension won't be pixel perfect copy of old Twitter. I just took general look and feel of it.
 
 #### I installed extension and my timeline is feels kinda unusual
-You had algorithmical timeline enabled. By default OldTwitter turns on chronological timeline. If you really want algo timeline back go to [extension settings](https://twitter.com/old/settings).  
-*Fun fact: algo timeline is around 5 times slower than chronological one*  
+You had algorithmical timeline enabled. By default OldTwitter turns on reverse chronological timeline. If you really want algo timeline back go to [extension settings](https://twitter.com/old/settings).  
+*Fun fact: algo timeline is around 5 times slower than reverse chronological one*  
 
 #### How do I visit original Twitter client after installing extension?
 Go to [mobile.twitter.com](https://mobile.twitter.com).

diff --git a/layouts/home/script.js b/layouts/home/script.js
@@ -64,15 +64,15 @@ function updateUserData() {
 async function updateTimeline() {
     seenThreads = [];
     if (timeline.data.length === 0) document.getElementById('timeline').innerHTML = 'Loading tweets...';
-    let fn = !vars.chronologicalTL ? API.getAlgoTimeline : API.getTimeline;
+    let fn = vars.timelineType === 'algo' ? API.getAlgoTimeline : vars.timelineType === 'chrono-social' ? API.getMixedTimeline : API.getTimeline;
     let [tl, s] = await Promise.allSettled([fn(), API.getSettings()]);
     if(!tl.value) {
         console.error(tl.reason);
         return;
     }
     s = s.value; tl = tl.value;
     settings = s;
-    if(!vars.chronologicalTL) {
+    if(vars.timelineType === 'algo') {
         algoCursor = tl.cursor;
         tl = tl.list;
         for(let t of tl) {
@@ -266,8 +266,8 @@ document.addEventListener('scroll', async () => {
         loadingNewTweets = true;
         let tl;
         try {
-            tl = !vars.chronologicalTL ? await API.getAlgoTimeline(algoCursor, 50) : await API.getTimeline(timeline.data[timeline.data.length - 1].id_str);
-            if(!vars.chronologicalTL) {
+            tl = vars.timelineType === 'algo' ? await API.getAlgoTimeline(algoCursor, 50) : await API.getTimeline(timeline.data[timeline.data.length - 1].id_str);
+            if(vars.timelineType === 'algo') {
                 algoCursor = tl.cursor;
                 tl = tl.list.filter(t => !seenTweets.includes(t.id_str));
                 for(let t of tl) {
@@ -289,9 +289,7 @@ document.addEventListener('scroll', async () => {
             loadingNewTweets = false;
         }
         setTimeout(() => {
-            setTimeout(() => {
-                loadingNewTweets = false;
-            });
+            loadingNewTweets = false;
         }, 250);
     }
 }, { passive: true });
@@ -337,7 +335,7 @@ document.addEventListener('findActiveTweet', () => {
 setTimeout(async () => {
     vars = await new Promise(resolve => {
         chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji',
-        'chronologicalTL', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'savePreferredQuality'], data => {
+        'timelineType', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'savePreferredQuality'], data => {
             resolve(data);
         });
     });
@@ -850,7 +848,7 @@ setTimeout(async () => {
     renderDiscovery();
     renderTrends();
     setInterval(updateUserData, 60000 * 3);
-    if(vars.chronologicalTL) setInterval(updateTimeline, 60000);
+    if(vars.timelineType !== 'algo') setInterval(updateTimeline, 60000);
     setInterval(() => renderDiscovery(false), 60000 * 5);
     setInterval(renderTrends, 60000 * 5);
 }, 250);
diff --git a/layouts/settings/index.html b/layouts/settings/index.html
@@ -56,9 +56,14 @@ <h1>Twitter settings</h1><br>
                     <h1>OldTwitter settings</h1><br>
                     <span>Refresh tabs to apply settings.</span><br><br>
                     <div class="setting">
-                        <input type="checkbox" id="chronological-tl"> <label for="chronological-tl">Chronological timeline / Disable algo-timeline</label>
-                    </div>
-                    <div class="setting">
+                        <select id="tl-type">
+                            <option value="chrono">Reverse chronological</option>
+                            <option value="chrono-social">Reverse chronological with friends likes</option>
+                            <option value="algo">Algorithmical</option>
+                        </select>
+                        <label for="tl-type">Timeline type</label>
+                    </div>
+                    <div class="setting" id="stt-div" hidden>
                         <input type="checkbox" id="show-topic-tweets"> <label for="show-topic-tweets">Show topic tweets (algo only)</label>
                     </div>
                     <div class="setting">

diff --git a/layouts/settings/script.js b/layouts/settings/script.js
@@ -56,35 +56,10 @@ function renderUserData() {
 setTimeout(async () => {
     vars = await new Promise(resolve => {
         chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji',
-        'chronologicalTL', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'customCSS', 'customCSSVariables', 'savePreferredQuality'], data => {
+        'chronologicalTL', 'timelineType', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'customCSS', 'customCSSVariables', 'savePreferredQuality'], data => {
             resolve(data);
         });
     });
-    if(typeof(vars.linkColorsInTL) !== 'boolean') {
-        chrome.storage.sync.set({
-            linkColorsInTL: true
-        }, () => {});
-    }
-    if(typeof(vars.enableTwemoji) !== 'boolean') {
-        chrome.storage.sync.set({
-            enableTwemoji: true
-        }, () => {});
-    }
-    if(typeof(vars.chronologicalTL) !== 'boolean') {
-        chrome.storage.sync.set({
-            chronologicalTL: true
-        }, () => {});
-    }
-    if(typeof(vars.showTopicTweets) !== 'boolean') {
-        chrome.storage.sync.set({
-            showTopicTweets: true
-        }, () => {});
-    }
-    if(typeof(vars.savePreferredQuality) !== 'boolean') {
-        chrome.storage.sync.set({
-            savePreferredQuality: true
-        }, () => {});
-    }
     document.getElementById('wtf-refresh').addEventListener('click', async () => {
         renderDiscovery(false);
     });
@@ -125,7 +100,7 @@ setTimeout(async () => {
     let heartsNotStars = document.getElementById('hearts-instead-stars');
     let linkColorsInTL = document.getElementById('link-colors-in-tl');
     let enableTwemoji = document.getElementById('enable-twemoji');
-    let chrono = document.getElementById('chronological-tl');
+    let timelineType = document.getElementById('tl-type');
     let darkMode = document.getElementById('dark-mode');
     let showTopicTweets = document.getElementById('show-topic-tweets');
     let colorPreviewDark = document.getElementById('color-preview-dark');
@@ -178,9 +153,10 @@ setTimeout(async () => {
             enableTwemoji: enableTwemoji.checked
         }, () => { });
     });
-    chrono.addEventListener('change', () => {
+    timelineType.addEventListener('change', () => {
+        document.getElementById('stt-div').hidden = timelineType.value !== 'algo';
         chrome.storage.sync.set({
-            chronologicalTL: chrono.checked
+            timelineType: timelineType.value
         }, () => { });
     });
     showTopicTweets.addEventListener('change', () => {
@@ -277,7 +253,7 @@ setTimeout(async () => {
     heartsNotStars.checked = vars.heartsNotStars;
     linkColorsInTL.checked = vars.linkColorsInTL;
     enableTwemoji.checked = vars.enableTwemoji;
-    chrono.checked = vars.chronologicalTL;
+    timelineType.value = vars.timelineType;
     showTopicTweets.checked = vars.showTopicTweets;
     darkMode.checked = vars.darkMode;
     disableHotkeys.checked = vars.disableHotkeys;
@@ -287,6 +263,7 @@ setTimeout(async () => {
     if(vars.customCSSVariables) {
         customCSSVariables.value = vars.customCSSVariables;
     }
+    document.getElementById('stt-div').hidden = vars.timelineType !== 'algo';
     savePreferredQuality.checked = vars.savePreferredQuality;
     preferredQuality.hidden = !savePreferredQuality.checked;
     preferredQualityInput.value = localStorage.preferredQuality ? localStorage.preferredQuality + 'p' : 'highest';

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Old Twitter Layout (2022)",
   "description": "A new extension that returns old Twitter's look.",
-  "version": "1.5.9.2",
+  "version": "1.6.0",
   "manifest_version": 3,
   "homepage_url": "https://github.com/dimdenGD/OldTwitter",
   "background": {

diff --git a/scripts/apis.js b/scripts/apis.js
@@ -269,6 +269,26 @@ API.getAlgoTimeline = (cursor, count = 25) => {
         });
     });
 }
+API.getMixedTimeline = async () => {
+    let [chrono, algo] = await Promise.allSettled([API.getTimeline(), API.getAlgoTimeline()]);
+    if(chrono.reason) {
+        throw chrono.reason;
+    }
+    chrono = chrono.value;
+    if(algo.reason) {
+        algo = [];
+    } else {
+        algo = algo.value.list;
+    }
+    let social = algo.filter(t => t.socialContext && (t.socialContext.contextType === 'Like' || t.socialContext.contextType === 'Follow'));
+    for(let i = chrono.length-1; i >= 0; i--) {
+        if(social.length === 0) break;
+        if(i % 7 === 0) {
+            chrono.splice(chrono.length-i, 0, social.pop());
+        }
+    }
+    return chrono;
+}
 
 // Discovering
 API.discoverPeople = (cache = true) => {

diff --git a/scripts/background.js b/scripts/background.js
@@ -1,32 +1 @@
-chrome.runtime.onInstalled.addListener(async () => {
-    let vars = await new Promise(resolve => {
-        chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji', 'chronologicalTL', 'showTopicTweets', 'savePreferredQuality'], data => {
-            resolve(data);
-        });
-    });
-    if(typeof(vars.linkColorsInTL) !== 'boolean') {
-        chrome.storage.sync.set({
-            linkColorsInTL: true
-        }, () => {});
-    }
-    if(typeof(vars.enableTwemoji) !== 'boolean') {
-        chrome.storage.sync.set({
-            enableTwemoji: true
-        }, () => {});
-    }
-    if(typeof(vars.chronologicalTL) !== 'boolean') {
-        chrome.storage.sync.set({
-            chronologicalTL: true
-        }, () => {});
-    }
-    if(typeof(vars.showTopicTweets) !== 'boolean') {
-        chrome.storage.sync.set({
-            showTopicTweets: true
-        }, () => {});
-    }
-    if(typeof(vars.savePreferredQuality) !== 'boolean') {
-        chrome.storage.sync.set({
-            savePreferredQuality: true
-        }, () => {});
-    }
-});
+chrome.runtime.onInstalled.addListener(async () => {});
diff --git a/scripts/content.js b/scripts/content.js
@@ -1,3 +1,42 @@
+(async () => {
+    let vars = await new Promise(resolve => {
+        chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji', 'chronologicalTL', 'timelineType', 'showTopicTweets', 'savePreferredQuality'], data => {
+            resolve(data);
+        });
+    });
+    if(typeof(vars.linkColorsInTL) !== 'boolean') {
+        chrome.storage.sync.set({
+            linkColorsInTL: true
+        }, () => {});
+    }
+    if(typeof(vars.enableTwemoji) !== 'boolean') {
+        chrome.storage.sync.set({
+            enableTwemoji: true
+        }, () => {});
+    }
+    if(typeof(vars.timelineType) !== 'string') {
+        let type;
+        if(typeof(vars.chronologicalTL) === 'boolean') {
+            type = vars.chronologicalTL ? 'chrono' : 'algo';
+        } else {
+            type = 'chrono';
+        }
+        chrome.storage.sync.set({
+            timelineType: type
+        }, () => {});
+    }
+    if(typeof(vars.showTopicTweets) !== 'boolean') {
+        chrome.storage.sync.set({
+            showTopicTweets: true
+        }, () => {});
+    }
+    if(typeof(vars.savePreferredQuality) !== 'boolean') {
+        chrome.storage.sync.set({
+            savePreferredQuality: true
+        }, () => {});
+    }
+})();
+
 let pages = [
     {
         name: "home",

diff --git a/scripts/helpers.js b/scripts/helpers.js
@@ -1095,7 +1095,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             a.target = '_blank';
             a.rel = 'noopener noreferrer';
         } else {
-            if(!vars.chronologicalTL) a.remove();
+            // if(!vars.chronologicalTL) a.remove();
         }
     });