Skip to content

Commit

Permalink
new compact mode added and gifs fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@avadhesh18
avadhesh18 committed Jan 31, 2024
1 parent 656c566 commit 718ee79
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 8 deletions.
61 changes: 56 additions & 5 deletions public/functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,14 +250,40 @@ function replaceRedditLinks(htmlContent) {

function postbuilder(post){
returnfpost = '';
let mode = localStorage.getItem('curmode') || "original";
if (window.location.href.indexOf("comments.html") != -1) {
mode = "original";
}
timeagoed = timeago(post['created_utc']*1000);
sticky = post['stickied'] ? " sticky" :" ";
over18 = '';
if(checklc('a18','yes') != true) {
over18 = post['over_18'] ? "over18" :" ";
}
ismod = (post['distinguished'] == "moderator") ? " moderator" :" ";
returnfpost += '<div class="post" id="'+post['id']+'"><div class="post_author"><a href="subreddit.html?r='+post["subreddit"]+'">'+post["subreddit_name_prefixed"]+'</a> &bull; <a href="user.html?u='+post["author"]+'">'+post["author"]+'</a> &bull; '+timeagoed+'</div><div class="post_link'+ sticky+' '+ismod+'"><a href="comments.html?url=https://www.reddit.com'+ post['permalink']+'">'+post['title']+'</a></div>';
returnfpost += '<div class="post '+mode+'" id="'+post['id']+'">';
if(mode == "comp") {
thumbnail = post['thumbnail'];
if(thumbnail != "self" && thumbnail != "spoiler" && thumbnail != "default" && thumbnail != "" && thumbnail != "nsfw") {
if(thumbnail == "image") {
thumbnail = post["preview"]['images'][0]['resolutions'][0]['url'];
}
returnfpost += '<div class="compthumb"><img src="'+thumbnail+'" alt="thumbnail"/></div><div class="rop">';
} else {
thumbnail = thumbnail || "&bull;";
const mx = post?.preview?.images?.[0]?.resolutions?.[0]?.url || "none";
if(mx != "none") {
returnfpost += '<div class="compthumb"><img src="'+mx+'" alt="thumbnail"/></div><div class="rop">';

}
else {
returnfpost += '<div class="comptext">'+thumbnail+'</div><div class="rop">';
}
}
}
returnfpost += '<div class="post_author"><a href="subreddit.html?r='+post["subreddit"]+'">'+post["subreddit_name_prefixed"]+'</a> &bull; <a href="user.html?u='+post["author"]+'">'+post["author"]+'</a> &bull; '+timeagoed+'</div><div class="post_link'+ sticky+' '+ismod+'"><a href="comments.html?url=https://www.reddit.com'+ post['permalink']+'">'+post['title']+'</a></div>';

if(mode != "comp") {
if(post["selftext_html"] != null){
var replacedText = replaceRedditLinks(post["selftext_html"]);

Expand All @@ -279,14 +305,19 @@ if(post['poll_data'] != null){
returnfpost += pollbuilder(post);
}
}

}


returnfpost += '<div class="post_meta">'+post['score']+' votes &bull; '+post['num_comments']+' comments';
if (localStorage.getItem('refreshToken') !== null && window.location.href.includes('comments.html')) {
returnfpost += ' &bull; <span onclick="replyto(\'t3_' + post['id'] + '\')">Reply</span>';
}
returnfpost += '</div></div>';
returnfpost += '</div>';
if(mode == "comp") {
returnfpost += '</div>';
}

returnfpost += '</div>';
return returnfpost;
}
function allown_sfw(){
Expand Down Expand Up @@ -318,10 +349,29 @@ jdiv.innerHTML += '<div class="displayimg"><img src="'+el.getAttribute('data-msr
}
function urlpreview(urli,postjson) {
returnpost = '';
if (urli.match(/.(jpg|jpeg|png|gif)$/i))
if (urli.match(/.(jpg|jpeg|png)$/i))
{
returnpost += '<div class="postc singleimage"><img src="'+ urli +'"/></div>';
}
else if (urli.match(/.(gif|gifv)$/i)){
const x = postjson?.preview?.images?.[0]?.variants?.mp4?.source?.url || "none";
if(x == "none") {
returnpost += '<div class="postc singleimage"><img src="'+ urli +'"/></div>';

}
else {
vidposter = postjson["preview"];
if(typeof vidposter == "undefined"){
vidposter = postjson["thumbnail"];
}
else {

vidposter = postjson["preview"]["images"]["0"]["source"]["url"];
}
returnpost += '<div class="postc video"><video src="'+ x +'#t=0.001" poster="'+vidposter+'" width="100%" height="240" preload="metadata" controls></video></div>';

}
}
else if (urli.match(/www.reddit.com\/gallery/g))
{
returnpost += '<div class="postc gallery">';
Expand Down Expand Up @@ -501,11 +551,12 @@ cret += '</div>';
return cret;
}
function runhsl(){
const videos = document.querySelectorAll('.reddit_hls');
const videos = document.querySelectorAll('.reddit_hls:not(.goner)');


videos.forEach(video => {
const videoContainer = video.parentElement;
video.classList.add('goner');
// if (video.canPlayType('application/vnd.apple.mpegurl')) {
// Browser natively supports HLS
// video.src = video.src;
Expand Down
2 changes: 2 additions & 0 deletions public/new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@
</header>
<div id="body">
<b>31 Jan 2023</b>
<li>NEW: Compact mode (smaller thumbnails, faster loading) is here, enable it from the <a href="settings.html">settings</a> page.</li>
<li>NEW: Infinite Scrolling is here. If that's your thing enable it from the <a href="settings.html">settings</a> page.</li>
<li>UPDATE: All GIFs now load faster than ever.</li>
<b>18 Jan 2023</b>
<li>ADDED: New themes and fonts. </li>
<li>UPDATED: Click on the first image of a gallery post to open the images in gallery view. </li>
Expand Down
18 changes: 17 additions & 1 deletion public/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@
<li>
<input id="ppg" type="range" min="10" max="60" step="5" onchange="changedppg();"/> <span id="outppg">20</span>
</li>
<b>Enable infinite scrolling (beta): <input type="checkbox" id="infibox" onchange="checkinfi();"></b>
<b>Enable Infinite Scrolling (beta): <input type="checkbox" id="infibox" onchange="checkinfi();"></b>
<b>Enable Compact mode : <input type="checkbox" id="compbox" onchange="compchng();"></b>

<b>Export Subscriptions:</b>
<li>
<button onclick="exportData()">Export Data</button></li>
Expand Down Expand Up @@ -60,6 +62,20 @@
else{document.body.style.fontFamily='sans-serif'}}
togglefont();toggletheme();

var curcomp = localStorage.getItem('curmode') || "original";
if(curcomp == "comp") {
document.getElementById("compbox").checked = true;
}
function compchng() {
if(document.getElementById("compbox").checked) {
localStorage.setItem('curmode','comp');
}
else {
localStorage.setItem('curmode','original');

}
}

var curpp = localStorage.getItem('ppg') || 20;
document.getElementById('outppg').innerHTML = curpp;
document.getElementById('ppg').value = curpp;
Expand Down
44 changes: 43 additions & 1 deletion public/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ padding:10px;margin-bottom:5px; word-break: break-word;position:relative;}
h1 {
margin: 6px 0px;
padding: 0;
font-size: 1.5em;
font-size: 1.3em;
line-height: normal;
}

h2 {
Expand Down Expand Up @@ -811,6 +812,47 @@ span#closegal {
margin: 0 auto;
backdrop-filter: blur(47px);
}
.post.comp {overflow: hidden;clear: both;}

.compthumb,.comptext {
width: 80px;
overflow: hidden;
margin-right: 10px;
display: inline-table;
text-align:center;
}

.rop {
display: inline-block;
vertical-align: top;
width: calc(100% - 90px);
}

.compthumb img {
max-width: 80px;
max-height: 80px;
}


.rop .post_author {
white-space: normal;
}



.rop .post_link a {
font-size: 16px;
}

.rop .post_link {
padding: 2px 0px 0px;
}
.comptext {
height: 20px;
text-align: center;
color: var(--greyc);
margin-top: 20px;
}
@media all and (display-mode: standalone) {
header#header {
position: fixed;
Expand Down
3 changes: 2 additions & 1 deletion run.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
<div id="leftbar" class="hidden">
<div class="list">
<a href="index.html" class="homelinks halfit">Home</a><a onClick="window.location.reload()" class="homelinks halfit">Refresh</a><a href="saved.html" class="homelinks halfit">Saved</a><a href="subreddit.html?r=popular" class="homelinks halfit">Popular</a>
<div id="subscribed">Subscribe to subreddits to view them here.</div> <div id="cthemew"><a href="themes.html" id="themebtn">Themes</a> <a href="settings.html">Settings</a> <a href="https://www.buymeacoffee.com/overdevsapps" rel="nofollow">Donate</a> <a href="new.html" rel="nofollow">New</a> <a href="contact.html" rel="nofollow">Feedback</a>
<div id="subscribed">Subscribe to subreddits to view them here.</div> <div id="cthemew"><a href="themes.html" id="themebtn">Themes</a> <a href="settings.html"><span style="color:var(--lightc);>"&bull;</span> Settings</a> <a href="https://www.buymeacoffee.com/overdevsapps" rel="nofollow">Donate</a> <a href="new.html" rel="nofollow">New</a> <a href="contact.html" >Feedback</a> <br>
<small><span style="color:var(--lightc);>"&bull;</span> New settings: Infinite Scrolling and Compact Mode.</small>
</div></div>
</div>
<div id="rightbar" class="hidden"></div>
Expand Down

0 comments on commit 718ee79

Please sign in to comment.