From c6cffefe806b6be8fd5cc14f84dd6ed62d2774f3 Mon Sep 17 00:00:00 2001 From: Doruk Date: Fri, 13 May 2022 11:54:50 +0300 Subject: [PATCH 1/3] Updated /latest/ to include new features Nsfw filter based on twitter's Support for Multiple Images --- static/main.js | 103 +++++++++++++++--- static/style.css | 243 +++++++++++++++++++++++++++++++----------- templates/latest.html | 8 +- 3 files changed, 274 insertions(+), 80 deletions(-) diff --git a/static/main.js b/static/main.js index e61ede5..3f48078 100644 --- a/static/main.js +++ b/static/main.js @@ -1,7 +1,8 @@ var tweetCount = 1, page = 0, loading = false, - bigArray = []; + bigArray = [], + isNSFWSHOW = false; const iosHeight = () => { document.documentElement.style.setProperty("--ios-height", window.innerHeight + "px"); }; @@ -11,22 +12,48 @@ window.onload = () => { //ios height iosHeight(); const contwarn = document.querySelector("#contwarn"); + const notsafe = document.querySelector("#notsafe"); + if (document.cookie.includes("NSFW=true")) { + notsafe.checked = true; + document.querySelectorAll(".nsfw").forEach(e => e.classList.add("noff")); + addCookie("NSFW", true); + isNSFWSHOW = true; + } if (document.cookie.includes("always=true")) { contwarn.checked = true; forNow(); } - contwarn.addEventListener("change", () => { - if (contwarn.checked) { - document.cookie = `always = true; max-age=15780000; SameSite=None; Secure`; - } else { - document.cookie = "always=false"; + if (contwarn.checked) + addCookie("always", true); + else + addCookie("always", false); + }) + notsafe.addEventListener("change", () => { + if (notsafe.checked) { + document.querySelectorAll(".nsfw").forEach(e => e.classList.add("noff")); + addCookie("NSFW", true); + isNSFWSHOW = true; } + else { + document.querySelectorAll(".noff").forEach(e => e.classList.remove("noff")); + isNSFWSHOW = false; + addCookie("NSFW", false); + } + }) } + +function addCookie(name, state) { + if (document.cookie.includes(name)) + document.cookie = document.cookie.replace(`${name}=${!state}`, `${name}=${state}`); + else + document.cookie += `${name}=${state}; max-age=15780000; SameSite=None; Secure`; +} + function cookieTime() { document.querySelector("#contwarn").checked = true; - document.cookie = `always = true; max-age=15780000; SameSite=None; Secure`; + addCookie("always", true); forNow(); } function forNow() { @@ -149,31 +176,78 @@ function createTweet(json) { tweet.appendChild(desc); } + if (json["nsfw"]) { //beware + var nsfw = createEl("div", "nsfw"); + const ncont = createEl("div", "ncont"); + const ninfo = createEl("div", "ninfo", { inner: "This is a NSFW Tweet
Press \"Show me\" if you want to see it" }); + var nshow = createEl("div", "nshow", { inner: "Show me" }); + ncont.appendChild(ninfo); + ncont.appendChild(nshow); + nsfw.appendChild(ncont); + if (isNSFWSHOW === true) + nsfw.classList.add("noff"); + } + + switch (json["type"]) { case "Text": //so empty break; case "Image": - const media = createEl("img", "media", { - src: json["thumbnail"], - lazy: true - }); - tweet.appendChild(media); + if (json["images"][4] > "1" && json["images"][4]) { //multiple images!!?? + const grid = createEl("div", "imgCont"); + for (let i = 0; i < json["images"][4]; i++) + grid.appendChild(createEl("img", "media", { + src: json["images"][i], + lazy: true + })); + //console.log(json["images"][4]) + if (nsfw) + nsfw.appendChild(grid); + else + tweet.appendChild(grid); + } + else { + const media = createEl("img", "media", { + src: json["thumbnail"], + lazy: true + }); + if (nsfw) + nsfw.appendChild(media); + else + tweet.appendChild(media); + } + break; case "Video": const video = createEl("video", "media", { video: json["url"] }); - tweet.appendChild(video); + if (nsfw) + nsfw.appendChild(video); + else + tweet.appendChild(video); break; default: const video2 = createEl("video", "media", { video: json["url"] }); - tweet.appendChild(video2); + if (nsfw) + nsfw.appendChild(video2); + else + tweet.appendChild(video2); //console.log("this should not happen!"); break; } + + if (nsfw) { + tweet.appendChild(nsfw); + nshow.addEventListener("click", () => { + nsfw.classList.add("noff"); + }); + } + + const qrtob = json["qrt"]; if ((Object.keys(qrtob).length === 0 && Object.getPrototypeOf(qrtob) === Object.prototype) == false) { @@ -207,6 +281,7 @@ function createTweet(json) { share.addEventListener("click", () => navigator.clipboard.writeText(json["tweet"].replace("https://t", "https://fxt")) ); + tweetCount++; } else { if (bigArray.length > 100) //pro memory management 😎 diff --git a/static/style.css b/static/style.css index 4670103..581659b 100644 --- a/static/style.css +++ b/static/style.css @@ -2,23 +2,23 @@ font-family: NotoColorEmojiLimited; unicode-range: U+1F1E6-1F1FF; src: url("https://fxtwitter.com/font.ttf"); - } - +} + :root { --ios-height: 100vh; - --top-height: calc(6vh + 2vw); - } + --top-height: calc(4.5vh + 1.25vw); +} -body{ +body { margin: 0; width: 100vw; height: 100vh; height: var(--ios-height); overflow: hidden; -} +} -a{ +a { color: unset; text-decoration: unset; } @@ -29,18 +29,18 @@ a:focus, a:visited, a:active, a:-webkit-any-link, -:link{ +:link { color: unset; text-decoration: unset; } -a:hover{ +a:hover { color: #8ebf42; } ::-webkit-scrollbar { width: 1vmin; - + } ::-webkit-scrollbar-track { @@ -63,94 +63,105 @@ a:hover{ background-color: #e8e8e8; } -.base{ +.base { display: flex; flex-direction: column; width: 100%; height: 100%; - font-family: 'Paytone One','NotoColorEmojiLimited', sans-serif; + font-family: 'Paytone One', 'NotoColorEmojiLimited', sans-serif; background-color: #222222; color: #e8e8e8; } -.top{ +.top { height: var(--top-height); display: flex; flex-direction: column; justify-content: center; text-align: center; box-sizing: border-box; - font-size: 9vmin; + font-size: 7vmin; padding: 1vmin 0 1vmin; /*margin: 0 20vw 0; border-bottom: #e8e8e8 .1vmin solid;*/ box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px; } -.top:hover{ + +.top:hover { color: #8ebf42; cursor: pointer; } + .bottom { flex: 1; display: flex; flex-direction: row; } -.tweetCont{ +.tweetCont { flex: 2; - padding: calc( 1vh + .25vw ) 10% 0; - + padding: calc(1vh + .25vw) 10% 0; + overflow-y: auto; - max-height: calc( var(--ios-height) - var(--top-height) - calc( 1vh + .25vw ) ); + max-height: calc(var(--ios-height) - var(--top-height) - calc(1vh + .25vw)); } -.tweet{ +.tweet { display: flex; position: relative; flex-direction: column; background-color: #171717; - margin: 0 0 calc( 2vh + .5vw ); + margin: 0 0 calc(2vh + .5vw); padding: 1vmin 0 1vmin; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 7px; font-size: 18px; } -.side{ +.side { flex: 1; overflow-y: auto; - max-height: calc( var(--ios-height) - var(--top-height) - calc( 1vh + .25vw ) ); -} -.by{ - color: #8ebf42; -} -.by:hover{ - color: #F74843; -} -/* Tweet */ -.desc{ - padding: 0 calc( 1.5vh + .25vw ) 0; + max-height: calc(var(--ios-height) - var(--top-height) - calc(1vh + .25vw)); } -.auth,.meta{ +.by { + color: #8ebf42; +} + +.by:hover { + color: #F74843; +} + +/* Tweet */ +.desc { + padding: 0 calc(1.5vh + .25vw) 0; +} + +.auth, +.meta { display: flex; flex-direction: row; gap: 1%; font-size: 1.2em; - padding: 0 calc( .5vh + .125vw ) 0; + padding: 0 calc(.5vh + .125vw) 0; } -.aname{ + +.aname { display: flex; flex-direction: column; justify-content: space-evenly; } -.aname,.type{ + +.aname, +.type { flex: 1; } -.type{ + +.type { text-align: right; margin: auto 2% auto; } -.aimage{ + +.aimage { border-radius: 50%; border: #8ebf42 .3vmin solid; height: 100%; @@ -163,63 +174,163 @@ a:hover{ -o-user-drag: none; } -.media{ +.nsfw { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.ncont { + position: absolute; + z-index: 1; + bottom: 20%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2vmin; + background-color: #17171788; + border-radius: .5vmin; + padding: 1vw; + +} + +.ninfo { + text-align: center; +} + +.nshow { + padding: 1vh 1vw; + background-color: #171717; + border: solid .5vmin #8ebf42; + color: #e8e8e8; + border-radius: .5vmin; + transition-duration: .2s; + transition-timing-function: ease-in-out; + cursor: pointer; + user-select: none; + font-size: 1em; +} + + +.nshow:hover { + transform: scale(1.1); + border: solid .5vmin #bf4242; +} + +.nshow:active { + transform: scale(.98); +} + +.nsfw .media { + filter: blur(30px); + +} + +.noff div:not(.imgCont) { + display: none; +} + +.noff .media { + display: unset; + filter: unset; +} + +.imgCont { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + + +} + +.imgCont .media { + max-width: 50%; + max-height: 35vh; +} + +.media { box-sizing: border-box; width: 100%; height: auto; max-height: 60vh; object-fit: scale-down; background-color: black; + } -.quote{ + +.quote { margin: auto; width: 90%; border-radius: .5vmin; border: #222222 solid .5vmin; padding: .5vmin; } -.qname{ + +.qname { color: #8ebf42; } -.cont,.date{ + +.cont, +.date { margin: auto 0 auto; - + } -.date{ + +.date { margin-left: 2%; } -.share{ + +.share { margin-left: auto; height: 2em; transition-duration: .2s; transition-timing-function: ease-in-out; } -.share:hover{ + +.share:hover { transform: scale(.8); } -.share:active{ + +.share:active { transform: scale(2); } -.auth,.desc,.media,.quote{ + +.auth, +.desc, +.quote { margin-bottom: 2vmin; } /* Settings */ -.settings,.info{ +.settings, +.info { font-size: 35px; padding: 1vmin; } -.opt{ + +.settings { + user-select: none; + display: flex; + flex-direction: column; +} + +.opt { font-size: .49em; user-select: none; white-space: nowrap; + flex-wrap: nowrap; } -.Iinner{ + +.Iinner { font-size: .5em; } + /* Preview */ -img:not(.previmg,.aimage){ +img:not(.previmg, .aimage) { cursor: pointer; transition-duration: .2s; transition-timing-function: ease-in-out; @@ -263,16 +374,19 @@ img:not(.previmg,.aimage){ font-size: calc(1.75vh + .25vw); text-align: center; } -#block .warn{ + +#block .warn { font-size: 2em; color: #F74843; text-align: center; } -.boptions{ + +.boptions { display: flex; - flex-direction: row; + flex-direction: row; gap: 1.5vmin; } + .boptions>div { padding: 2vh 2vw; border: solid .5vmin #c5c5c5; @@ -294,17 +408,22 @@ img:not(.previmg,.aimage){ transform: scale(.98); } -@media (max-aspect-ratio: 4/4), (max-height: 500px), (max-width: 1100px){ - .side{ +@media (max-aspect-ratio: 4/4), +(max-height: 500px), +(max-width: 1100px) { + .side { display: none; } - .tweet{ + + .tweet { font-size: 12px; } - .tweetCont{ + + .tweetCont { padding: 0 5% 0; } - .boptions{ + + .boptions { flex-direction: column; } -} +} \ No newline at end of file diff --git a/templates/latest.html b/templates/latest.html index b817140..2536f32 100644 --- a/templates/latest.html +++ b/templates/latest.html @@ -6,12 +6,12 @@ Twitfix Latest - + - +