Enable Video AutoLoop

[JimMcBubbles]

When I use OldTwitter, videos no longer loop play. Id like to be able to turn that back on.

[nonetrix]

I was just going to make a issue about this, beat me to it lol. First issue I see too

[JimMcBubbles]

I was just going to make a issue about this, beat me to it lol. First issue I see too

👍

[nonetrix]

Might look into making a PR if possible, I imagine I could just search for whatever makes auto play works and just add another option. I'm a dumbass but seems like I could pull that off at least maybe with enough trial and error. Doesn't seem to work how I expected it to exactly and my JS is quite bad, but still might be able to do it with enough effort

Seems I would need to add something here

<div class="setting">
     <input type="checkbox" id="autoplay-videos"> <label for="autoplay-videos">__MSG_autoplay_videos__</label>
</div>

Here

let autoplayVideos = document.getElementById('autoplay-videos');

And here

    autoplayVideos.addEventListener('change', () => {
        chrome.storage.sync.set({
            autoplayVideos: autoplayVideos.checked
        }, () => { });
    });

And finally here

    document.addEventListener('scroll', async () => {
        if(Date.now() - lastTweetScrollDate < 100) return;
        lastTweetScrollDate = Date.now();

        let tweets = Array.from(document.getElementsByClassName('tweet'));
        let scrollPoint = scrollY + innerHeight/2;
        let newActiveTweet = tweets.find(t => scrollPoint > t.offsetTop && scrollPoint < t.offsetTop + t.offsetHeight);
        if(!activeTweet || (newActiveTweet && activeTweet.dataset.tweetId !== newActiveTweet.dataset.tweetId)) {
            if(activeTweet) {
                activeTweet.classList.remove('tweet-active');
                let video = activeTweet.querySelector('.tweet-media > video[controls]');
                let qvideo = activeTweet.querySelector('.tweet-media-quote > video[controls]');
                if(!vars.dontPauseVideos) {
                    if(video) {
                        video.pause();
                    }
                    if(qvideo) {
                        qvideo.pause();
                    }
                }
                if(activeTweet.tweet && activeTweet.tweet.algo) {
                    if(!seenAlgoTweets.includes(activeTweet.tweet.id_str)) seenAlgoTweets.push(activeTweet.tweet.id_str);
                    if(seenAlgoTweets.length > 100) {
                        seenAlgoTweets.shift();
                    }
                    algoTweetsChanged = true;
                }
            }
            if(newActiveTweet) newActiveTweet.classList.add('tweet-active');
            if(vars.autoplayVideos && !document.getElementsByClassName('modal')[0]) {
                if(newActiveTweet) {
                    let newVideo = newActiveTweet.querySelector('.tweet-media > video[controls]');
                    let newVideoOverlay = newActiveTweet.querySelector('.tweet-media > .tweet-media-video-overlay');
                    if(newVideo && !newVideo.ended) {
                        newVideo.play();
                    } else if(newVideoOverlay && !newVideoOverlay.style.display) {
                        newVideoOverlay.click();
                    }
                }
            }
            activeTweet = newActiveTweet;
        }
    }, { passive: true });

I honestly just assumed it added <video autoplay>

[nonetrix]

Got something to show in the UI at least, but it doesn't do anything for now JavaScript side of it confuses me the most not really qualified here lol but will try

[dimdenGD]

goodluck, oldtwitters code is trash

[nonetrix]

Getting close to getting it to work I think actually no promises, but already figured out how to make the check box save state. Just figuring out how to make the JavaScript side of it work, changed it a bit but so far isn't working for some reason not sure what I am doing wrong lol but I think I can get it to work

[nonetrix]

I got videos to loop now but only sometimes lol, seems to only work if I scroll past the video and back to the video

https://github.com/dimdenGD/OldTwitter/assets/45698918/9308a7c2-a853-4c95-b795-765ad5e95337

Also made the code a complete mess in the process by adding random print statements, likely will just run diff when I get it fully working and just start from scratch with that. Professional developer

[nonetrix]

I pretty much give up but here is the diff of what I was able to get working, my text editor is horribly misconfigured so the indention is a sin... Also, sorry in advance... For everything it's so bad

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 22eb49ae..8ec719e9 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -282,6 +282,7 @@
     "cancel": { "message": "Cancel" },
     "youre_not_interested": { "message": "You're not interested in this topic." },
     "autoplay_videos": { "message": "Autoplay videos" },
+    "loop_videos": { "message": "Loop videos" },
     "turn_on_retweets": { "message": "Show retweets in timeline" },
     "turn_off_retweets": { "message": "Hide retweets in timeline" },
     "you_can_reply": { "message": "(you can reply)" },
@@ -630,4 +631,4 @@
     "anniversary_tweet": { "message": "Do you remember when you joined Twitter? I do!\n#MyTwitterAnniversary" },
     "you_shared_tweet": { "message": "You shared a tweet" },
     "user_shared_tweet": { "message": "$NAME$ shared a tweet", "placeholders": { "name": { "content": "Display Name" } } }
-}
\ No newline at end of file
+}
diff --git a/layouts/header/script.js b/layouts/header/script.js
index db459fb6..bfd3b8ac 100644
--- a/layouts/header/script.js
+++ b/layouts/header/script.js
@@ -2755,6 +2755,26 @@ let userDataFunction = async user => {
                         qvideo.pause();
                     }
                 }
+
+                if(vars.loopVideos) {
+                  if(video) {
+                      video.addEventListener('ended', () => {
+                          video.currentTime = 0;
+                          video.play();
+                      });
+
+                  }
+                  if(qvideo) {
+                      video.addEventListener('ended', () => {
+                          video.currentTime = 0;
+                          video.play();
+                      });
+
+                  }
+                }
+
+
+
                 if(activeTweet.tweet && activeTweet.tweet.algo) {
                     if(!seenAlgoTweets.includes(activeTweet.tweet.id_str)) seenAlgoTweets.push(activeTweet.tweet.id_str);
                     if(seenAlgoTweets.length > 100) {
@@ -3513,4 +3533,4 @@ setInterval(() => {
             });
         });
     }, 1000);
-})();
\ No newline at end of file
+})();
diff --git a/layouts/settings/index.html b/layouts/settings/index.html
index 66c6f79d..ecfac210 100644
--- a/layouts/settings/index.html
+++ b/layouts/settings/index.html
@@ -139,6 +139,9 @@
                     <div class="setting">
                         <input type="checkbox" id="autoplay-videos"> <label for="autoplay-videos">__MSG_autoplay_videos__</label>
                     </div>
+                    <div class="setting">
+                        <input type="checkbox" id="loop-videos"> <label for="loop-videos">__MSG_loop_videos__</label>
+                    </div>
                     <div class="setting">
                         <input type="checkbox" id="disable-gif-autoplay"> <label for="disable-gif-autoplay">__MSG_disable_gif_autoplay__</label>
                     </div>
@@ -434,4 +437,4 @@
         </div>
     </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layouts/settings/script.js b/layouts/settings/script.js
index c3b99225..5f4c04bd 100644
--- a/layouts/settings/script.js
+++ b/layouts/settings/script.js
@@ -283,6 +283,7 @@ setTimeout(async () => {
     let noBigFont = document.getElementById('no-big-font');
     let language = document.getElementById('language');
     let autoplayVideos = document.getElementById('autoplay-videos');
+    let loopVideos = document.getElementById('loop-videos');
     let displaySensitiveContent = document.getElementById('display-sensitive-content');
     let seeTweetViews = document.getElementById('see-tweet-views');
     let twitterBlueCheckmarks = document.getElementById('twitter-blue-checkmarks');
@@ -330,6 +331,10 @@ setTimeout(async () => {
     let showUserFollowerCountsInLists = document.getElementById('show-user-follower-counts-in-lists');
     let hideUnfollowersPage = document.getElementById('hide-unfollowers-page');

+    if(loopVideos.checked) {
+        console.log("testing")
+    }
+
     let root = document.querySelector(":root");
     {
         let option = document.createElement('option');
@@ -671,6 +676,11 @@ setTimeout(async () => {
             autoplayVideos: autoplayVideos.checked
         }, () => { });
     });
+    loopVideos.addEventListener('change', () => {
+        chrome.storage.sync.set({
+            loopVideos: loopVideos.checked
+        }, () => { console.log("ass"); });
+    });
     displaySensitiveContent.addEventListener('change', () => {
         chrome.storage.sync.set({
             displaySensitiveContent: displaySensitiveContent.checked
@@ -1000,6 +1010,7 @@ setTimeout(async () => {
     disableFindHotkey.checked = !!vars.disableFindHotkey;
     noBigFont.checked = !!vars.noBigFont;
     autoplayVideos.checked = !!vars.autoplayVideos;
+    loopVideos.checked = !!vars.loopVideos;
     displaySensitiveContent.checked = !!vars.displaySensitiveContent;
     seeTweetViews.checked = !!vars.seeTweetViews;
     twitterBlueCheckmarks.checked = !!vars.twitterBlueCheckmarks;
@@ -1270,4 +1281,4 @@ setTimeout(async () => {
     setInterval(updateUserData, 60000 * 3);
     setInterval(() => renderDiscovery(false), 60000 * 15);
     setInterval(renderTrends, 60000 * 5);
-}, 50);
\ No newline at end of file
+}, 50);
diff --git a/scripts/config.js b/scripts/config.js
index 4d6ec8bd..52e45482 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -22,7 +22,7 @@ async function loadVars() {
     vars = await new Promise(resolve => {
         chrome.storage.sync.get(['linkColor', 'font', 'heartsNotStars', 'linkColorsInTL', 'enableTwemoji', 'chronologicalTL', 
             'timelineType', 'showTopicTweets', 'darkMode', 'disableHotkeys', 'customCSS', 'customCSSVariables', 'savePreferredQuality',
-            'noBigFont', 'language', 'autoplayVideos', 'displaySensitiveContent', 'displaySensitiveContentMoved', 'volume', 'timeMode',
+            'noBigFont', 'language', 'autoplayVideos', 'loopVideos', 'displaySensitiveContent', 'displaySensitiveContentMoved', 'volume', 'timeMode',
             'showOriginalImages', 'pitchBlack', 'seeTweetViews', 'autotranslateProfiles', 'roundAvatars', 'twitterBlueCheckmarks',
             'developerMode', 'copyLinksAs', 'useNewIcon', 'updateTimelineAutomatically', 'hideTrends', 'hideWtf', 'hideLikes', 'hideFollowers',
             'extensiveLogging', 'disablePersonalizedTrends', 'showBookmarkCount', 'hideCommunityNotes', 'disableGifAutoplay', 'showMediaCount',
@@ -225,4 +225,4 @@ async function loadVars() {
         });
     });
 };
-loadVars();
\ No newline at end of file
+loadVars();

[nonetrix]

Going to try implementing again, I think I have idea of what I did wrong

[pawgchamp]

Going to try implementing again, I think I have idea of what I did wrong

Thank you for having a go at it again! The video element does have the capacity to have a loop="true" attribute added to it, might it be as simple as just adding that if the user has set the "Loop videos" flag to true? :)

Video looping is like one of precious few regular Twitter features I miss in OldTwitter so a big +1 from me on this.