tophf / mpiv Goto Github PK
View Code? Open in Web Editor NEWA fully reworked fork of Mouseover Popup Image Viewer
License: MIT License
A fully reworked fork of Mouseover Popup Image Viewer
License: MIT License
I'm just trying to get MPIV running on the latest Waterfox G3 (which if I understand correctly, this 3rd gen Waterfox is based on Firefox 78). Nothing shows up – except in the console:
Script error in [Greasemonkey script https://github.com/tophf/Mouseover Popup Image Viewer; version 1.1.21]:
ReferenceError: GM_getValue is not defined
Just for comparison: Other userscripts work, also with GM_getValue
(as far as I could see, those I tried are using PolyFill to map those calls, and then use GM.getValue
instead).
Any ideas what I could try?
In Waterfox Classic (here: 2020.12, i.e. the latest version), "config screen" doesn't show as overlay (as displayed in the readme), but is simply appended to the end of the page, seemingly without any CSS being applied – which makes it pretty hard to use. Apart from that, the script seems to work fine.
Note: I discovered your fork only today, I was still using a (slightly modified) version of the "original" MPIV. There the "config screen" shows fine as overlay.
Another note: using IDs (like <div id="#mpiv-setup">
, as the original MPIV did) instead of rendering the CSS inside the tags (<div style=
) would make it easier to adjust such things with custom UserStyles 😉
Hi,
I was wondering if it is possible to include a rotate option in your script such that after the image pops-out, when we press on the arrow buttons of the keyboard (or icons on the popped-up image), the image should rotate as follows:
Left arrow: rotate image left by 90 degrees
Right arrow: rotate image right by 90 degrees
Additional key shortcuts can be added to rotate image horizontally & vertically.
Thanks
I'm referring to commit 1be7fd5
The previous commit is: d27df29
The above commit causes initial empty border/placeholder when flipping gallery.
Test gallery URL: http://www.twilightsite.com/fantasy/Old/Royo/Royo.html
Test rule:
{"d": "twilightsite.com",
"e": "td > a:first-child",
"s": "gallery",
"g": {
"image": "td > a:first-child",
"index": "return node.href"
}
}
Screenshot comparison between the two commits (tested having cache disabled):
Thank you
WhatsApp Web uses blob
for everything. MPIV works fine for <img>
blob
s in WhatsApp, but in many cases the website uses a <div>
with backgroud-image
, like for displaying images within quoted messages. Then I created this rule:
{
"d": "web.whatsapp.com",
"e": "div[role='button'] div:last-of-type > div[style]",
"s": "return node.style.backgroundImage.slice(5,-2)",
"xhr": false
}
But it fails here:
Line 2272 in f998a93
So I changed
Lines 2742 to 2747 in f998a93
rel2abs(rel, abs = location.href) {
try {
return rel.startsWith('data:') ||
rel.startsWith('blob:') ||
/^[-\w]+:\/\//.test(rel) ?
rel :
new URL(rel, abs).href;
And now MPIV works properly to zoom the image.
The commit: handle autoscaled SVG + code cosmetics
(which was the 4th after the release of v1.1.3),
has caused me the following:
from that point, there's no popup with the full image for ANY image I mouseover anymore,
the image zoom becomes displayed as NaN%
at some point,
but the accompanying text is displayed ok (but only that) on the upper part of the page,
and pressing t
(open in new tab) or d
(download image) both still work ok.
Note: the version before that commit, i.e. 174366e
works fine.
STR
in a fresh Chrome profile with only Tampermonkey beta/Violentmonkey and the script of 3e1ade8
NaN%
e.g.t
(open in new tab) or d
(download image) both still work ok.The rules that I import, are too many to post them here, so, I attach them as text file: my rules.txt
After the latest round of changes, I am having the issue that on reddit it won't pop up the preview window for imgur or gfycat or any other image links on any of the pages, whether in posts or comments.
Please don't hate me.
Can you please check the compatibility with imgur.com
I have assigned the following:
Pop-up shows on: Ctrl
However, when I move mouse pointer over an imgur link and click 'Ctrl' key, the image does not pop out.
Example: https://i.imgur.com/60larfa.png
I've seen an issue since few days/weeks, at first I was just thinking it was some unsupported pictures but I realized it is a new issue.
When I hover certains images with CTRL (to force MPIV) the popup show up quickly and disappear, look at the screncast:
http://screencast-o-matic.com/watch/crfoDrVn53h
I tried to open the console to see if something wrong happen in the background but as soon I open the console everything work fine strangely, again look at the screnncast when the console (F12) is open for the tab:
http://screencast-o-matic.com/watch/crfoDUVn5Z2
Here's the URL of my testL: https://www.newbalance.ca/en_ca/pd/new-balance-577/MW577.html
But the issue happen on various sites/images, like on Google Image on the search results page some images are working some others just flicker unless I open the Devtools (F12).
Before it was working fine,
Note: I use latest Brave with Windows and Tampermonkey.
Regards
Visit any instagram page such as: instagram.com/instagram.
Galleries seem to behave unpredictably. Sometimes, hitting the right or left keyboard keys will work properly, sometimes it will immediately close the popup, and sometimes it will start from the last image in the gallery and cycle towards the first image.
Might be a recent regression as I didn't notice this when the feature was first implemented a couple of days ago.
After a recent commit, some videos fail to start playing immediately, and then start somewhere later in the video; hovering and rehovering sometimes makes it play normally.
Go here: old.reddit.com/domain/gfycat.com and hover some videos. Some will be frozen at some frame in the middle of the video, and then start playing from there after a delay.
From what I know, GM(.|_)setValue
was created by Greasemonkey and only support primitive values. MPIV passes object, which fails on FireMonkey.
It seems that a simple JSON.stringify(c)
here fixes the issue:
Line 641 in 0865159
also perhaps an option to start videos muted by default
Firstly, thanks very much for your work continuing work on this useful script.
Some requests/notes:
The number one feature I've always wished the original MPIV had is a "fit" scaling option where larger AND smaller images are fit to the viewport size. Currently, you can choose "0" scale to scale larger images down, or you can choose "Zoom Automatically" and "0" to get smaller images to fit to the viewport automatically, but then larger images are already zoomed in by default (I assume they get bumped to the "1" scale factor).
I'm not sure how easy this is to fix, but images on Reddit (old.reddit.com) never worked with MPIV, they all have an "expand" button which, when clicked, displays the image on the page.
An option to turn off the drop shadow would be nice; I tried doing it via CSS but it appears it isn't using the 'box-shadow' property to do it.
Using the latest script version with Tampermonkey 4.10.6109 beta in Chrome 79 and Firefox 72 (fresh profiles) in win10. Both issues don't occur with Violentmonkey.
The d
shortcut to download (pressed while popup is visible) doesn't work.
P.S. Thank you for your awesome work maintaining this super useful script!
Ctrl conflicts with many browser hotkeys in a sense that many images get enlarged inadvertently and may cover elements. Activating automatically has never suited my personal workflow.
Can you simply allow swapping the functions of Ctrl and Shift?
Hey, any chance of fetlife being supported? It was in the old one, but that code doesn't seem to work anymore (just tested that script, nothing happened).
None of the custom CSS styling or built-in styling settings seem to work after a recent commit. I'll try to find the regression.
EDIT: This commit breaks it for me: bf4974f
I can reproduce on Instagram at least. Visit: instagram.com/instagram. Hover the first IGTV video (currently the 9th post). Hit the download shortcut. Nothing will happen. Waiting for the full video to buffer or get near the end doesn't change the behavior. Right click > Save As works as expected.
Scroll to the next IGTV video, (it's shorter), and the download key works properly.
I'm not sure if this only effects IGTV videos, but I can't find a large/long normal Instagram video ATM to test. I imagine it would also fail on some of them if it is a size issue. I didn't test other sites but it might be reproducible for other videos. I'll try to reproduce elsewhere soon.
The new Instagram rule triggers when mouse is over the comment section because that element also has the role="button"
attribute. Will probably have to use the tabindex
attribute as well to further restrict matching to the image's div container.
Changing the relevant part of the rule to this:
e: 'a[href*="/p/"], article [role="button"][tabindex="0"], article [role="button"][tabindex="0"] div',
has added benefit of matching the profile images in the comment section and zooming their larger versions, and seems to fix the issue.
Hi! Could you add support or create a rule for redgifs.com pretty please? It's used for movies and gifs on NSFW subreddits. It's somewhat similar to Gfycat, I've tried to do it myself, but I just can't wrap my head around it.
Thank you very much.
Split from #25 (comment) (because I had posted it in the wrong issue)
My suggestion:
Currently, if the page initially loads, and the cursor is located over a thumbnail,
the popup is not displayed unless you slightly move the cursor over the thumbnail.
I'd like to make a suggestion please:
to add an option checkbox named: Show popup when mouseover at page load.
@tophf kindly implemented this in a7cb177 with the comment:
Sounds like something that would make sense being enabled by default. Try the master branch.
I tested it and reported the following issue (see below), and tophf reverted the commit via 3fccd8f until he's able to investigate.
It currently works ok if, while you are in an empty tab (or an irrelevant page, e.g. https://www.google.com/ ),
you move the mouse where you expect the thumbnail to be located after page load,
and focus on the address bar (via Ctrl+L/F6) and enter the test URL(see below) to load the page:
the popup will appear ok on page load.
The issue:
it doesn't work when, while you are in a page,
you move the mouse on a thumbnail to activate the popup, and then keep the mouse still (either keeping the popup open, or deactivate it via click, it doesn't matter), and you just reload the page (F5/Ctrl+F5):
there will be no popup on page load.
Test URL: http://www.twilightsite.com/fantasy/Old/Royo/Royo.html
hey, could you add imagefap support back?
edit: and motherless.com too?
is it just me or does it not work on google images atm?
seems fine on other sites.. but google images - nope.
site question: is it possible for me to disable the fade-in effect somehow? the old mpiv didn't have that, and I really don't like it.
edit: and the drop shadow? any way of disabling that as well?
For large images, the border/background loads significantly faster than the image; hover the image on this page: large landscape. You should see the border/background load very quickly, but the image loads in afterwards. Ideally, I think the border/background should delay displaying until the image is ready to be displayed. I tried using the loaded
class but it doesn't seem to help here.
Related(?) side note: I originally tried hotlinking the image above, but it actually reproducibly crashed my browser. Does hovering this link work for you? hotlink to landscape image
Hi,
I know, this seems to be an odd question,
but I can not understand/put in practice the "userscript manager toolbar icon -> User Script Commands -> MPIV: configure".
I'm using FF 78.0.2 (64-bit) on Mac OSX and when I click the toolbar icon, I see this:
No Idea what comes next, to see the configuration window.
Clicking on MPIV only de-/activates the script or opens it for editing.
Any advice?
Thank you!
Not sure if this is considered unsupported but it still seems like unintended behavior: if you add a small border using the css border property for the popup in the script, or use the css styling in the configuration window, the popup will have empty space below it which increases as you increase the border size. With fit to window
enabled, It is visible even with a 1px border, but a 10px border illustrates the issue better. Besides this issue with extraneous padding on the bottom of the popup, the border seems to be applied properly and evenly around the image.
EDIT: The behavior is different for large images scaled down and smaller images scaled up: for smaller images scaled to the window, the bottom of the popup is actually cut off.
I guess that ultimately the scaling algorithm just needs to take into account the added width and height from the popup border before doing its work?
I have observed this issue particularly on Whatsapp Web, where the images sent in chat are referenced by the browser as blob images. Upon opening and closing the image popup, whatsapp web app cannot find the image because the blob URL gets dereferenced/revoked by the following code in script.user.js
under Popup.destroy
method from line 1102.
if (!ai.lazyUnload) {
if (p.src.startsWith('blob:'))
URL.revokeObjectURL(p.src);
}
Because the Blob Url object gets revoked after the popup gets destroyed, whatsapp web shows a blurred placeholder image.
I couldn't understand the utility of above piece of code.
So I tried commenting it out and it worked as expected, I could open the images as popup and after closing them, the whatsapp webapp could still show the images as usual.
I love this script. I donated to tampermonkey but I realize it should have been to you since this is the script I use the most!!
Question: I managed to implement a menu accelerator hotkey to the Config Panel, but still I'm wondering is there a faster way to quickly change the popup setting from auto to context (Which I am constantly toggling) without going though all the clicks. Any kind of one-click solution would be perfect - Keyboard shortcut, button, console cmd bound to a macro, ANYTHING!! Any suggestions?
Thank You in Advance For Your Time.
Would it be possible to load webp image files when hovering them?
I don't personally use these as I just use the custom CSS styling for whatever changes I want, but I tested it anyway and found some quirks:
Padding
just pads the top part of the image and shifts the whole image down in fit-to-window
mode (maybe other modes as well), I assume the expected behavior is padding all sides.
The sliders are small so getting a precise value is difficult especially since there is no visual feedback (of the updated value) as you are adjusting the slider over short distances. You currently need to adjust, then rehover to update tooltip, and repeat, over and over to get, say 70%
opacity set correctly. I think these should be standard input fields. This would also allow setting more granular values like 0.5px
as well, but it's your call obviously.
At the very least, the tooltip should be properly updated with the slider's current position whenever the slider position moves (as it is, the tooltip is only updated when you move over about 25% of the distance from the current point, otherwise it just displays the original value). To reproduce, set 50%
opacity, then slowly slide to the left or right, you won't see the tooltip value update.
!important
and due to the ordering?). So you can't set custom border
values anymore in the CSS style area.Greetings
I'd like to suggest adding to MPIV a way to retrieve larger images in Instagram: 1440p instead of 1080p
(the quality of the 1440px images is of noticeably better quality when compared to the 1080px images. It's not upscaling).
Image Max URL, a userscript / site / browser extension,
-among other things- manages to fetch from Instagram 1440p images instead of 1080p .
I checked its code and rules and found how it's done
(the trick is sending xhr with a modified User-Agent, a hi-res instagram Android app one):
e.g. for https://www.instagram.com/p/CIoSKljseUZ/
it gets the Media ID
of the image, (probably without using the API,as I see in Network devtools)
(we could get it as currently, via appending:?__a=1
in the URL, i.e. https://www.instagram.com/p/CIoSKljseUZ/?__a=1
and then JSON.parse(text).graphql.shortcode_media
.
In this case it's: 2461297088717251865
then send a GET request to https://i.instagram.com/api/v1/media/{Media ID}/info/
in this case https://i.instagram.com/api/v1/media/2461297088717251865/info/
using the following headers (basically just the User-Agent):
var headers = {
"User-Agent": "Instagram 146.0.0.27.125 Android (23/6.0.1; 640dpi; 1440x2560; samsung; SM-G930F; herolte; samsungexynos8890; en_US)",
"X-IG-Capabilities": "36oD",
"Accept": "*/*",
"Accept-Language": "en-US,en;q=0.8"
};
and the target 1440x1800 image is located in the retrieved JSON at:
JSON.parse(text).items[0].image_versions2.candidates[0].url
Do you think it's worth adding this to MPIV, @tophf ?
The script I mention is unfortunately overly complicated, and takes too long each time to retrieve the larger IG image.
I'd definitely prefer to just implement its way to MPIV, than using it for that.
I've noticed in the script (in both Tampermonkey/Violentmonkey in Chrome/Firefox)
that when I enable Run in image tabs
and open a large image in a new tab (see below), there's no popup on mouseover.
There's no error in Console.
Test image URL (open in new tab)
https://images.hdqwalls.com/wallpapers/beautiful-landscapes-of-new-zealand-4k-xn.jpg
Thank you
First of all, thank you for forking, updating, and maintaining this project. I used Imagus religiously on Firefox, and it was the one extension for which I couldn't find an alternative for Safari 13+. Your fork has allowed me to switch back to Safari, so I'm incredibly thankful to you for that.
I do have one suggestion I'd like to see implemented: a quick-and-easy blacklist. I've found myself wishing for this feature many times over the last few weeks. There are some websites, such as Apple's App Store Connect, on which this script is more of an annoyance than a blessing. I know I could create a cascading rule to prevent certain elements from presenting a popup but that's time-consuming and not necessarily user-friendly for some.
I did try to implement this myself before I opened this issue. I am a developer but I'm not well-versed in Javascript, so ~3500 lines proved to be a little too much for me to digest in a reasonable amount of time.
Here's a dummy screenshot showing exactly what I mean by an easily-accessible blacklist button:
I created a rule for streamff.com
, a common host for soccer highlights (short videos) on Reddit:
{
"name": "streamff",
"r": "streamff.com/v/(\\w+)",
"s": "https://streamff.streamff.com/uploads/$1.MP4"
}
But the request was failing. I realized that's because MPIV treats it as image instead of video:
Lines 2724 to 2727 in 7b2fd40
It should be case insensitive, so
!url.startsWith('data:') && /\.(webm|mp4)($|\?)/i.test(url);
The same here:
Line 2209 in 7b2fd40
With this fix, my streamff.com
rule works. Example for testing:
https://old.reddit.com/r/soccershighlights/comments/qc9b0d/merih_demiral_vs_cristiano_ronaldo/
P.S. Not related to this issue, but here you say "Host rules containing JavaScript will not work on sites that use Content Security Policy". Tried Flickr, a site with CSP, and it works, probably because I use FireMonkey instead of the other popular alternatives (not counting Tampermonkey which removes CSP header afaik).
I've noticed the following 3 issues (all related to Steam pages):
(tested with latest MPIV in TM/VM with Chrome)
When a rule has applied some replace() to a thumbnail in order to create the full size image for the popup, shouldn't the black bar on top contain the filename of the popup image, instead of the filename of the thumbnail?
e.g. I have the following rule (for Steam pages like this one) :
{"d": "store.steampowered.com",
"r": "steamcdn-a\\.akamaihd\\.net",
"s": "return node.src.replace(/\\.[x0-9]+/,'').replace(/\\?t=[0-9]+/,'')"
}
of which the s
part converts thumbnail URLs as follows:
(I've shortened them)
from: https://___/ss_77eda710487b89293f109cf7dcf96b4ffab0d1a1.116x65.jpg?t=1583732360
to: https://___/ss_77eda710487b89293f109cf7dcf96b4ffab0d1a1.jpg
When I hover such a thumbnail, I see the filename of the thumbnail in the bar:
even though, the converted URL is what's displayed in the popup, i.e. without the .116x65
part
NaN%
(momentarily) and then it's replaced with the actual zoom level. Could this be avoided??In a lot of cases, Steam game pages take way too long to fully load, I've seen 20 sec or more.
e.g. try to open to a new tab for the first time any link from this list.
During that time, using the above rule, there's no popup as I mouseover any thumbnail - only a spinning cursor, and popup only works after (or close to the point when) the page has fully load.
Could it be improved?
If it helps, I have enabled the MPIV setting to "Start preloading immediately".
d
or u
attribute matches the current page domain,r
) the relevant regex to match at least one link/thumbnail element in the page).Currently the only way to increase/decrease the image zoom factor is by using the mousewheel. There are a number of drawbacks to this including that it can be difficult/impossible to adjust the factor one step at a time when using a touchpad, and that this breaks zooming on image galleries (because mousewheel is used both for scrolling through gallery entries and also for zooming).
Suggested fix: Add -
and =
as keys for decreasing and increasing zoom, respectively.
Is this the right place to post site issues?
imgcredit.xyz is not working.
Thumb: http://s5.imgcredit.xyz/2021/01/25/54e62dfb02dc2fa305d594cd035ae77a.md.jpg
The original MPIV would only show the bar when a gallery was hovered; I can't see how to replicate that behavior with current MPIV features.
Right now, I have hidden the bar with CSS, but then I can't know know when I'm hovering an imgur
gallery, for instance, so I don't know when there are extra images.
A separate class for denoting when galleries were loaded would make this possible again.
The most unusual thing has been happening recently, since Chrome 93:
in only one site, twitter.com (I haven't noticed this in any other site) I'm randomly getting empty pages instead of twitter content.
Also, at that time, the Back/Forward browser buttons also display empty pages.
I've tried a lot to nail it down and I came up to the following:
I have managed to recreate it multiple times in a fresh 94 Chrome profile, with only Tampermonkey 4.13/Violentmonkey 2.13.0.5 beta installed and the script with its default settings.
There's never error in browser Console or in the extension's background page.
I couldn't reproduce it when having TM/VM disabled not even once. Also I couldn't reproduce it in Firefox.
By randomly, I mean that I (login to twitter.com and) navigate anywhere in twitter,
from my timeline, to any profile, expand tweets, open my bookmarks, reload a twitter page, anything.
Here is a screenshot and a screen capture:
@tophf What do you think? I know it seems strange, but could it be something in MPIV that's causing this? Or in TM/VM itself??
Or maybe I should report it as a Chrome issue?
Unforturtunately I can't reproduce it consistently but it's been happening so many times, annoyingly often.
Greetings
For reference, the relevant lines the script are from line 933 to 974.
This property was not documented by the original MPIV author in his How to add more rules
so I had asked a lot time ago in the greasyfork page https://greasyfork.org/en/forum/discussion/4551/x
and someone had kindly described me the following:
kuehlschrank Probably didn't get the time to do that so until then I'll tell you few things I picked, mostly from wOxxOm :
"g"
rule is similar to"q"
rule plus the ability to return multiple photos- Have the variable text (raw HTTP response / source code of HTML page)
- Also you can manage to have the other two variables
node
anddoc
* *(Firefox only)Methods
Simple selectors
"g":{"entry":".main","title":".h1","caption":".info","image":".photo","fix":"return s"}
"entry"
: used to select main blocks that contain the photos and their captions"title"
: (pick text) would show up on the first photo"caption"
: (pick text) for each photo"image"
: photos"fix"
: used to clean the outputAll are optional except
"image"
Using array
"g":"g=[]; r=/regex/g; while(m=r.exec(text)) g.push({url:m}); return g"}
- Creating a regex and have it run on variable text then push photos to
g
On Firefox you can create a doc of the raw text doc=createDoc(text) to select from it by
doc.querySelector('')
Are the above still valid in this fork?
And, I have some more questions:
"g"
rule is similar to "q"
rule. Does this mean that this "g"
property is only applied to the remote page?"g":"g=[]; r=/regex/g; while(m=r.exec(text)) g.push({url:m}); return g"}
?{"d": "example.com",
"g": {
"entry": ".main",
"title": ".h1",
"caption": ".info",
"image": ".photo",
"fix": "return s"
}
}
s
in "fix"
?"entry"
selector refers to the initial page holding the gallery thumbnail,"image"
selector, refers to the remote page?node
(element that triggered popup) and doc
(dom tree of remote page) ? How? Is it still Firefox only?Thank you
PS. Sorry for the lengthy post!
Hey,
I noticed that youtube profile pics aren't supported anymore. It used to be that if I hovered on someone's profile picture, it would show me the fullsized picture. Which still works with the old MPIV even today, but I guess maybe you removed it from your version?
Greetings
I'd like please to report a few issues I've noticed with Twitter and Instagram built-in and custom rules,
and make a feature suggestion.
(using Chrome and Tampermonkey/Violentmonkey)
Regarding Twitter (new layout + "autoplay" enabled in https://twitter.com/settings/data) :
Here are two videos:
(GIF/mp4) https://twitter.com/natfriedman/status/1232727363626029056
(blob) https://twitter.com/github/status/1191426884828950531
Inspecting the video nodes HTML, the former is mp4, the latter is blob:
<video preload="auto" playsinline="" aria-label="Embedded video"
poster="https://pbs.twimg.com/tweet_video_thumb/ERuG9JhVUAEglNW.jpg"
src="https://video.twimg.com/tweet_video/ERuG9JhVUAEglNW.mp4" type="video/mp4"
style="width: 100%; height: 100%; position: absolute; background-color: black; top: 0%; left: 0%; transform: rotate(0deg) scale(1.005);"></video>
<video preload="none" playsinline="" aria-label="Embedded video"
poster="https://pbs.twimg.com/media/EIiwEVIVAAUWOqK.jpg"
src="blob:https://twitter.com/59eda4ea-4178-43d4-b11a-09f26acf8203"
style="width: 100%; height: 100%; position: absolute; background-color: black; top: 0%; left: 0%; transform: rotate(0deg) scale(1.005);"></video>
The rule from the repository (see below) doesn't work when hovering on the mouse on each of the videos, although it seems it be still valid (although, the rule doesn't work in the initial MPIV neither) .
Could the rule below be modified to work for both videos?
{"d": "twitter.com",
"e": "video",
"s": "var bg = node.poster, url = /http[^\\\")]+/.exec(bg)[0];if (url.indexOf('.jpg') == -1){return url.replace('pbs', 'video').replace('_thumb', '').replace('.png', '.mp4');} else {return url.replace('pbs', 'video').replace('_thumb', '').replace('.jpg', '.mp4');}"
}
Regarding Instagram:
Hovering on multi-image posts, the first image is displayed on hovering all images
https://www.instagram.com/p/B8eYh4UgmsN/ (open URL in new tab)
Hovering on IGTV (Instagram TV) video post thumbnails
e.g. currently the 3rd post in https://www.instagram.com/instagram/
an image is displayed instead of the video.
My feature suggestion (based on all the above):
to add a setting in "MPIV", something like: "Display debug info for applied rule in console",
which, when enabled to display in console:
d
, e
, q
, etc.This would help in quickly finding which rule is currently applied,
and I believe that it would assist the user in improving/fixing the relevant rule.
Thank you!
The ""actually implement advanced syntax for 'e'" commit 470915e totally broke instagram.
To reproduce go to e.g .https://www.instagram.com/instagram/ and hover any image/video/igtv post: there's no popup.
Instead, there are 3 errors just by hovering mouse on the white/empty border beside the posts area:
(None of these errors occur when MPIV is disabled)
[e6c1b2c3aa3d.js:4]
ErrorUtils caught an error:
Failed to execute 'closest' on 'Element': '0' is not a valid selector.
[Mouseover Popup Image Viewer.user.js:2132]
Uncaught DOMException: Failed to execute 'closest' on 'Element': '0' is not a valid selector.
[index:52]
Uncaught TypeError: Cannot read properties of undefined (reading 'push') at window.onerror
Thank you
It just stopped working for me. I'm getting "Unexpected token < in JSON at position 0"
The original developer of MPIV seems to have deleted their GreasyFork account which also caused the deletion of their scripts there.
Recently a notice appeared on their host rule repo at https://w9p.co/userscripts/mpiv/manage_rules.html saying the site will shut down.
This site will shut down on January 31st.
I couldn't find out if you are aware of it yet (and how this fork will cope with that). In case you are not, here you go :)
I've just noticed the following two issues with any wikipedia page (using latest MPIV with Tampermonkey Beta/Violentmonkey in fresh Chrome profile):
There's no popup for any image I mouseover with any wikipedia page.
Example URL: https://en.wikipedia.org/wiki/Concert
I use the following custom rule from the repository, changing "wikimedia" to wikipedia in its r
:
{"r": "wikipedia\\.org/wiki/File",
"q": ".fullImageLink a",
"follow": true
}
Also, in the log (having MPIV settings open while mouseover)
it only shows as matched rule the following built-in one:
{"r": "/^[^?]+?\.(bmp|jpe?g?|gif|mp4|png|svg|webm)($|\?)/i"
but there's no popup at all, as I said.
(for reference: in the original MPIV, the popup still works ok in wikipedia pages by default, i.e. without adding a custom rule)
When I open MPIV settings in the above wikipedia URL and press "Install rule from repository",
the relevant entry "Wikipedia (ALL lists)" in the rule list doesn't become auto-selected.
I also tried https://en.wikipedia.org/wiki/Main_Page and it still doesn't becomes auto-selected.
(for reference: in the original MPIV the relevent entry becomes auto-selected )
The following "issue" is minor, but it often causes confusion to me :
in the original MPIV, when you:
the rule wasn't stored in Settings unless you pressed the "Ok" button to confirm the rule save.
With this fork, in both cases (about the latter, now there's no "Install" button - you doubleclick/press Enter a rule from the list), the rule becomes immediately saved the moment it's displayed in Settings, i.e it doesn't matter whether you press Save/Apply afterwards.
Could you please change it so that the Save/Apply buttons act as "confirmation", like in the original MPIV?
The newer advanced "e"
syntax that allows the { "Parent":"Image" }
usage doesn't seem to actually work. I may be doing something wrong with the use of the command but for now it just seems to be running into a loop of:
adaptiveFind
- runeE2
- find
- adaptiveFind
- runE2
- ... and so on until I get a
RangeError: Maximum call stack size exceeded
error.
The related commit: 2054a38
Would it be possible to load the embedded video when hovering youtube/youtu.be links?
It is simple to get the embedded link from a standard youtube link; you just replace the string watch?v=
with embed/
, and you have the embedded version of the video.
For instance, https://www.youtube.com/watch?v=aqz-KE-bpKQ
(Big Buck Bunny) would become https://www.youtube.com/embed/aqz-KE-bpKQ
.
This would probably work for any site, since you just need to check the href attribute for a standard youtube link.
If you visit this link: v.redd.it links, you can see a list of mostly short embedded videos. You can distinguish video thumbnails from image thumbnails because video thumbnails have a sibling div
element with class="duration-overlay"
. Once the video is expanded by clicking the "Play" button, you can find the elements containing two links: a .mpd file, e.g.: data-mpd-url="https://v.redd.it/4htp0060enj41/DASHPlaylist.mpd"
and the .m3u8 file: data-hls-url="https://v.redd.it/4htp0060enj41/HLSPlaylist.m3u8"
. I don't know if MPIV is capable of playing either of these formats directly, though.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.