Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proper RedGIFs Sound Controls with Userscript #168

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Proper RedGIFs Sound Controls with Userscript #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6907e4
Made embedit.redGifConvert automatically add #sound fragment when sou…
omegasome Feb 7, 2024
cc720f1
Extended updateSound method in script.js to post the soundOn/soundOff…
omegasome Feb 7, 2024
b75b89c
Switched RedGIFs to use query string instead of fragment; made it tur…
omegasome Feb 8, 2024
89cdf5d
Refactored it so gfy iframes have a class, so I don't need to do that…
omegasome Feb 8, 2024
7d67894
Last commit made it automatically move to the next image when it rece…
omegasome Feb 8, 2024
5083e21
Fixed a mistyped variable name
omegasome Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions js/EmbedIt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ embedit.redGifConvert = function (url, embedFunc) {
// https://github.com/ubershmekel/redditp/issues/138
// Redgifs isn't allowing CORS requests to others.
// access-control-allow-origin: https://www.redgifs.com
const iframeUrl = 'https://www.redgifs.com/ifr/' + name;
embedFunc($('<iframe src="' + iframeUrl + '" frameborder="0" scrolling="no" width="100%" height="100%" allowfullscreen="" style="position:absolute;"></iframe>'));
const iframeUrl = 'https://www.redgifs.com/ifr/' + name + "?link=false&loop=" + !rp.settings.shouldAutoNextSlide + "&sound=" + rp.settings.sound;
embedFunc($('<iframe class="gfyframe" src="' + iframeUrl + '" frameborder="0" scrolling="no" width="100%" height="100%" allowfullscreen="" style="position:absolute;"></iframe>'));
return true;
};

Expand Down
40 changes: 37 additions & 3 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ rp.settings = {
timeToNextSlide: 6 * 1000,
cookieDays: 300,
nsfw: true,
sound: false
sound: false,
};

rp.session = {
Expand All @@ -36,7 +36,9 @@ rp.session = {

foundOneImage: false,

loadingNextImages: false
loadingNextImages: false,

gfy_enhanced_api: false,
};

// Variable to store the images we need to set as background
Expand Down Expand Up @@ -88,7 +90,17 @@ $(function () {
// this fadeout was really inconvenient on mobile phones
// and instead the minimize buttons should be used.
//setupFadeoutOnIdle();


window.onmessage = function(message) {
if (message.data === "gfy_enhanced_api") {
rp.session.gfy_enhanced_api = true;
}
if (message.data === "gfy_ended") {
if (rp.settings.shouldAutoNextSlide)
nextSlide();
}
}

var getNextSlideIndex = function (currentIndex) {
if (!rp.settings.nsfw) {
// Skip any nsfw if you should
Expand Down Expand Up @@ -232,6 +244,16 @@ $(function () {
} else {
console.log(audioTags);
}
var iframeTags = document.getElementsByClassName('gfyframe'); // turn sound on/off in embeds. This only works if the embed implements the soundOn/soundOff postMessage API.
if (iframeTags.length === 1) {
if (rp.settings.sound) {
iframeTags[0].contentWindow.postMessage("soundOn", "*");
} else {
iframeTags[0].contentWindow.postMessage("soundOff", "*");
}
} else {
console.log(iframeTags);
}
};

var resetNextSlideTimer = function () {
Expand Down Expand Up @@ -694,6 +716,13 @@ $(function () {
});
}
};

var startPlayingGfy = function (gfyframe) {
if (rp.settings.shouldAutoNextSlide && rp.session.gfy_enhanced_api) {
// If gfy_enhanced_api is false, then there's no way for it to detect when the video ends, and it should just use the timeout
clearTimeout(rp.session.nextSlideTimeoutId);
}
}

//
// Slides the background photos
Expand All @@ -720,6 +749,11 @@ $(function () {
if (maybeVid.length > 0) {
startPlayingVideo(maybeVid);
}

var maybeGfy = $('.gfyframe');
if (maybeGfy.length > 0) {
startPlayingGfy(maybeGfy); // I don't think I need to actually duplicate the code from above like this, but this might make things easier to refactor later.
}
});
};

Expand Down