From ab44fd04ffa1055bd17a3da02017e8de3da88af2 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 15 May 2022 18:44:28 +0300 Subject: Complete on supporting Unify #234 --- src/pages/options/twitter/twitter.html | 126 ++++++--------------------------- src/pages/options/twitter/twitter.js | 118 +++++++----------------------- src/pages/options/twitter/twitter.pug | 87 +---------------------- 3 files changed, 49 insertions(+), 282 deletions(-) (limited to 'src/pages/options/twitter') diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html index 204e729d..2bd204aa 100644 --- a/src/pages/options/twitter/twitter.html +++ b/src/pages/options/twitter/twitter.html @@ -12,9 +12,9 @@
@@ -64,92 +64,10 @@ -
-

Bypass "Open in Twitter"

- -
-
-

Enable Custom Settings (will use cookies)

- -
-
-
-
-

Display

-
-
-

Theme

- -
-
-

Infinite scrolling (experimental, requires JavaScript)

- -
-
-

Make profile sidebar stick to top

- -
-
-

Support bidirectional text (makes clicking on tweets harder)

- -
-
-

Hide tweet stats (replies, retweets, likes)

- -
-
-

Hide profile banner

- -
-
-

Hide pinned tweets

- -
-
-

Hide tweet replies

- -
-
-

Square profile pictures

- -
-
-
-

Media

-
-
-

Enable mp4 video playback (only for gifs)

- -
-
-

Enable hls video streaming (requires JavaScript)

- -
-
-

Proxy video streaming through the server (might be slow)

- -
-
-

Mute videos by default

- -
-
-

Autoplay gifs

- -
-
+
+

Default Instances

diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js index 2fcf63c5..c23007f9 100644 --- a/src/pages/options/twitter/twitter.js +++ b/src/pages/options/twitter/twitter.js @@ -1,124 +1,54 @@ import twitterHelper from "../../../assets/javascripts/helpers/twitter.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; -let disableTwitterElement = document.getElementById("disable-nitter"); -let customSettingsDivElement = document.getElementsByClassName("custom-settings"); -let protocolElement = document.getElementById("protocol"); -let enableYoutubeCustomSettingsElement = document.getElementById("enable-twitter-custom-settings"); -let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter"); +let disable = document.getElementById("disable-nitter"); +let protocol = document.getElementById("protocol"); -let theme = document.getElementById('nitter').getElementsByClassName("theme")[0]; -let infiniteScroll = document.getElementById('nitter').getElementsByClassName("infiniteScroll")[0]; -let stickyProfile = document.getElementById('nitter').getElementsByClassName('stickyProfile')[0]; -let bidiSupport = document.getElementById('nitter').getElementsByClassName('bidiSupport')[0]; -let hideTweetStats = document.getElementById('nitter').getElementsByClassName('hideTweetStats')[0]; -let hideBanner = document.getElementById('nitter').getElementsByClassName('hideBanner')[0]; -let hidePins = document.getElementById('nitter').getElementsByClassName('hidePins')[0]; -let hideReplies = document.getElementById('nitter').getElementsByClassName('hideReplies')[0]; -let squareAvatars = document.getElementById('nitter').getElementsByClassName('squareAvatars')[0]; -let mp4Playback = document.getElementById('nitter').getElementsByClassName('mp4Playback')[0]; -let hlsPlayback = document.getElementById('nitter').getElementsByClassName('hlsPlayback')[0]; -let proxyVideos = document.getElementById('nitter').getElementsByClassName('proxyVideos')[0]; -let muteVideos = document.getElementById('nitter').getElementsByClassName('muteVideos')[0]; -let autoplayGifs = document.getElementById('nitter').getElementsByClassName('autoplayGifs')[0]; -let nitterElement = document.getElementById("nitter"); +let nitterDiv = document.getElementById('nitter'); + +const nitterForm = nitterDiv.getElementsByTagName('form')[0]; +const nitterCookies = nitterForm.getElementsByTagName('input')[0]; +nitterForm.addEventListener('submit', event => { + event.preventDefault(); + const url = new URL(nitterCookies.value); + twitterHelper.initNitterCookies(url); +}); browser.storage.local.get( [ "disableTwitter", "twitterProtocol", - "enableTwitterCustomSettings", - "bypassWatchOnTwitter", - "nitterTheme", - "nitterInfiniteScroll", - "nitterStickyProfile", - "nitterBidiSupport", - "nitterHideTweetStats", - "nitterHideBanner", - "nitterHidePins", - "nitterHideReplies", - "nitterSquareAvatars", - "nitterMp4Playback", - "nitterHlsPlayback", - "nitterProxyVideos", - "nitterMuteVideos", - "nitterAutoplayGifs", ], r => { - disableTwitterElement.checked = !r.disableTwitter; - enableYoutubeCustomSettingsElement.checked = r.enableTwitterCustomSettings; - bypassWatchOnTwitterElement.checked = r.bypassWatchOnTwitter; - protocolElement.value = r.twitterProtocol; - changeProtocolSettings(r.twitterProtocol); - - // Display - theme.value = r.nitterTheme; - infiniteScroll.checked = r.nitterInfiniteScroll; - stickyProfile.checked = r.nitterStickyProfile; - bidiSupport.checked = r.nitterBidiSupport; - hideTweetStats.checked = r.nitterHideTweetStats; - hideBanner.checked = r.nitterHideBanner; - hidePins.checked = r.nitterHidePins; - hideReplies.checked = r.nitterHideReplies; - squareAvatars.checked = r.nitterSquareAvatars; - - // Media - mp4Playback.checked = r.nitterMp4Playback; - hlsPlayback.checked = r.nitterHlsPlayback; - proxyVideos.checked = r.nitterProxyVideos; - muteVideos.checked = r.nitterMuteVideos; - autoplayGifs.checked = r.nitterAutoplayGifs; + disable.checked = !r.disableTwitter; + protocol.value = r.twitterProtocol; + changeProtocolSettings(); } ) -document.addEventListener("change", async () => { - await browser.storage.local.set({ - disableTwitter: !disableTwitterElement.checked, - twitterProtocol: protocolElement.value, - enableTwitterCustomSettings: enableYoutubeCustomSettingsElement.checked, - bypassWatchOnTwitter: bypassWatchOnTwitterElement.checked, - - // Display - nitterTheme: theme.value, - nitterInfiniteScroll: infiniteScroll.checked, - nitterStickyProfile: stickyProfile.checked, - nitterBidiSupport: bidiSupport.checked, - nitterHideTweetStats: hideTweetStats.checked, - nitterHideBanner: hideBanner.checked, - nitterHidePins: hidePins.checked, - nitterHideReplies: hideReplies.checked, - nitterSquareAvatars: squareAvatars.checked, - - // Media - nitterMp4Playback: mp4Playback.checked, - nitterHlsPlayback: hlsPlayback.checked, - nitterProxyVideos: proxyVideos.checked, - nitterMuteVideos: muteVideos.checked, - nitterAutoplayGifs: autoplayGifs.checked, +document.addEventListener("change", () => { + browser.storage.local.set({ + disableTwitter: !disable.checked, + twitterProtocol: protocol.value, }); - changeProtocolSettings(protocolElement.value); + changeProtocolSettings(); }) -function changeProtocolSettings(protocol) { - let normalDiv = nitterElement.getElementsByClassName("normal")[0]; - let torDiv = nitterElement.getElementsByClassName("tor")[0]; - if (protocol == 'normal') { +function changeProtocolSettings() { + let normalDiv = nitterDiv.getElementsByClassName("normal")[0]; + let torDiv = nitterDiv.getElementsByClassName("tor")[0]; + if (protocol.value == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; } - else if (protocol == 'tor') { + else if (protocol.value == 'tor') { normalDiv.style.display = 'none'; torDiv.style.display = 'block'; } - if (enableYoutubeCustomSettingsElement.checked) - for (const item of customSettingsDivElement) item.style.display = 'block'; - else - for (const item of customSettingsDivElement) item.style.display = 'none'; } commonHelper.processDefaultCustomInstances('twitter', 'nitter', 'normal', document); commonHelper.processDefaultCustomInstances('twitter', 'nitter', 'tor', document) -window.onblur = twitterHelper.initNitterCookies; let latencyElement = document.getElementById("latency"); let latencyLabel = document.getElementById("latency-label"); diff --git a/src/pages/options/twitter/twitter.pug b/src/pages/options/twitter/twitter.pug index 230aefd1..af7b7f19 100644 --- a/src/pages/options/twitter/twitter.pug +++ b/src/pages/options/twitter/twitter.pug @@ -17,90 +17,9 @@ body.option(dir="auto") select#protocol option(value="normal" data-localise="__MSG_normal__") Normal option(value="tor" data-localise="__MSG_tor__") Tor - option(value="i2p" data-localise="__MSG_i2p__") I2P - - .some-block.option-block - h4(data-localise="__MSG_bypassTwitter__") Bypass "Open in Twitter" - input#bypass-watch-on-twitter(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_enableCustomNitter__") Enable Custom Settings (will use cookies) - input#enable-twitter-custom-settings(type="checkbox") - - #nitter - .custom-settings - .some-block.option-block - h2 Display - - .some-block.option-block - h4(data-localise="__MSG_theme__") Theme - select.theme - option(value="Auto") Auto - option(value="Auto (Twitter)") Auto (Twitter) - option(value="Black") Black - option(value="Mastodon") Mastodon - option(value="Nitter") Nitter - option(value="Pleroma") Pleroma - option(value="Twitter") Twitter - option(value="Twitter Dark") Twitter Dark - - .some-block.option-block - h4(data-localise="__MSG_infiniteScroll__") Infinite scrolling (experimental, requires JavaScript) - input.infiniteScroll(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_stickyProfile__") Make profile sidebar stick to top - input.stickyProfile(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_bidiSupport__") Support bidirectional text (makes clicking on tweets harder) - input.bidiSupport(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_hideTweetStats__") Hide tweet stats (replies, retweets, likes) - input.hideTweetStats(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_hideBanner__") Hide profile banner - input.hideBanner(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_hidePins__") Hide pinned tweets - input.hidePins(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_hideReplies__") Hide tweet replies - input.hideReplies(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_squareAvatars__") Square profile pictures - input.squareAvatars(type="checkbox") - - hr - - .some-block.option-block - h2 Media - - .some-block.option-block - h4(data-localise="__MSG_mp4Playback__") Enable mp4 video playback (only for gifs) - input.mp4Playback(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_hlsPlayback__") Enable hls video streaming (requires JavaScript) - input.hlsPlayback(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_proxyVideos__") Proxy video streaming through the server (might be slow) - input.proxyVideos(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_muteVideos__") Mute videos by default - input.muteVideos(type="checkbox") - - .some-block.option-block - h4(data-localise="__MSG_autoplayGifs__") Autoplay gifs - input.autoplayGifs(type="checkbox") + #nitter + hr .normal include ../../widgets/instances.pug +instances('https://nitter.com') @@ -112,7 +31,7 @@ body.option(dir="auto") .i2p include ../../widgets/instances.pug +instances('https://nitter.i2p') - + script(type="module" src="../init.js") script(type="module" src="./twitter.js") -- cgit 1.4.1