Giter Club home page Giter Club logo

mpiv's People

Contributors

darkred avatar gxmobile avatar necaran avatar tophf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mpiv's Issues

ReferenceError: GM_getValue is not defined

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?

Waterfox Classic not rendering "config screen" as "overlay"

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 😉

Rotate Image [Suggestion]

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

Commit "disable fade-in transition when flipping gallery" causes initial empty border/placeholder when flipping gallery

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):

Before:

After:

Thank you

Util.rel2abs breaks MPIV for blob urls

WhatsApp Web uses blob for everything. MPIV works fine for <img> blobs 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:

url = Util.rel2abs(url);

So I changed

mpiv/script.user.js

Lines 2742 to 2747 in f998a93

rel2abs(rel, abs = location.href) {
try {
return rel.startsWith('data:') ? rel :
rel.startsWith('blob:') ? '' : // blobs don't work because they're usually revoked
/^[-\w]+:\/\//.test(rel) ? rel :
new URL(rel, abs).href;

to

  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.

No popup for ANY image I mouseover

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

  • import my various rules (see below)
  • go to e.g. https://www.instagram.com/instagram/
  • hover any image. Notice the following:
    • the cursor spins forever as I mouseover any video thumbnail
    • there's no popup (with the full image) for ANY image I mouseover,
    • the first time I mouseover any image, the accompanying text of the relevant post is displayed on top of the page ok (but there's no zoom info, image dimensions or MP).
      If I mouseover again, then the zoom level is displayed as NaN% e.g.
      Screenshot (1538)
    • pressing 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

Hover over image links don't pop-up image. (On Reddit)

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.

imgur.com Compatibility

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

image

Issue since few days/weeks

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 :octocat:

Instagram galleries not working properly

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.

A few requests/issues

Firstly, thanks very much for your work continuing work on this useful script.

Some requests/notes:

  1. 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).

  2. 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.

  3. 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.

Two issues occur with Tampermonkey (ok with Violentmonkey)

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.

  1. The d shortcut to download (pressed while popup is visible) doesn't work.

    • In Instagram profiles, the full size only appears for the first 12 pics. As you scroll further down and mouseover, the cursor just spins endlessly. There's no entry in Console.
      e.g. https://www.instagram.com/instagram/
    • In Facebook profile photo pages, no full size images are displayed at all,
      e.g. https://www.facebook.com/pg/instagram/photos/
      The cursor only spins endlessly as you mouseover. There's no entry in Console.

P.S. Thank you for your awesome work maintaining this super useful script!

Additional "activate" hotkeys

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?

fetlife support

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).

Some (maybe beyond a certain size?) videos don't download

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.

Instagram rule incorrectly matches comment section

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.

Support for redgifs.com (NSFW)

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.

Auto-activate on hovered image at `load` event

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

imagefap

hey, could you add imagefap support back?

edit: and motherless.com too?

doesn't seem to be working on google atm

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?

With very large images, border and background are shown before image loads

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

how to configure? (userscript manager toolbar icon -> User Script Commands -> MPIV: configure)

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:
Bildschirmfoto 2020-07-27 um 18 31 34

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!

Border styling interferes with scaling of popup

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?

Blob images dereferenced after closing the popup

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.

On-click settings toggle (Somehow)

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.

Appearance options bugs/notes

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:

  1. 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.

  2. 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.

  1. All of these values stomp over the custom CSS style settings (because they all have !important and due to the ordering?). So you can't set custom border values anymore in the CSS style area.

Suggestion: a way for getting larger images in Instagram: 1440p instead of 1080p

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.

Enhancement request: ability to blacklist sites from menu

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:

CleanShot 2020-05-23 at 17 25 50@2x

isVideoUrl regex shouldn't be case sensitive

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:

mpiv/script.user.js

Lines 2724 to 2727 in 7b2fd40

isVideoUrl(url) {
return url.startsWith('data:video') ||
!url.startsWith('data:') && /\.(webm|mp4)($|\?)/.test(url);
},

It should be case insensitive, so

           !url.startsWith('data:') && /\.(webm|mp4)($|\?)/i.test(url);

The same here:

const isPic = tn === 'IMG' || tn === 'VIDEO' && /\.(webm|mp4)(\?|$)/.test(src);

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).

Some issues and suggestions

I've noticed the following 3 issues (all related to Steam pages):
(tested with latest MPIV in TM/VM with Chrome)


  1. 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:
    2020-03-18_172650
    even though, the converted URL is what's displayed in the popup, i.e. without the .116x65 part


  1. For any rule (especially the above), as I mousover any thumbnail,
    the level is initially displayed as NaN% (momentarily) and then it's replaced with the actual zoom level. Could this be avoided??

  1. 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".


  • A feature suggestion, please:
    a filter checkbox in MPIV settings, which, when checked,
    to only list those custom rules that apply to the current page
    (either their d or u attribute matches the current page domain,
    or (if the rule only has r) the relevant regex to match at least one link/thumbnail element in the page).
    I find myself looking for such a filter all the time 🙂
    I hope you like my idea and what I ask is doable!

Keyboard shortcuts for image zoom

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.

Feature request: Ability to show bar for galleries only

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.

Randomly getting empty pages in twitter.com (Chrome only)

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:

Animation99~

 
@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.

Regarding the use of the property `"g"` (for gallery rules)

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:

Click to expand

kuehlschrank Probably didn't get the time to do that so until then I'll tell you few things I picked, mostly from wOxxOm :

  1. "g" rule is similar to "q" rule plus the ability to return multiple photos
  2. Have the variable text (raw HTTP response / source code of HTML page)
  3. Also you can manage to have the other two variables node and doc* *(Firefox only)

Methods

  1. 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 output

    All are optional except "image"

  2. 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
  3. 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:

  • He said that this "g" rule is similar to "q" rule. Does this mean that this "g" property is only applied to the remote page?
    Can we not use it in the currently loaded page, if it's a gallery itself and contains all the next/previous full image URLs ?
    If yes, can this be done via the "array" syntax:
    "g":"g=[]; r=/regex/g; while(m=r.exec(text)) g.push({url:m}); return g"} ?
  • in the "simpler" syntax:
    {"d": "example.com",
     "g": {
      "entry": ".main",
      "title": ".h1",
      "caption": ".info",
      "image": ".photo",
      "fix": "return s"
     }
    }
    what is the s in "fix" ?
    And, the "entry" selector refers to the initial page holding the gallery thumbnail,
    while the "image" selector, refers to the remote page?
  • Can I use 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!

youtube profile pic support?

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?

Issues with Twitter and Instagram built-in and custom rules + a feature suggestion

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:

GIF
<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>
blob
<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:


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:

  • the currently applied rule (prettified, as in MPIV settings),
  • the actual values of its various properties, e.g. d, e, q, etc.
  • whether the applied rule rule is built-in or custom

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!

Latest commit "actually implement advanced syntax for 'e'" broke Instagram

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 
VM screenshot:

2021-10-11_172745

Thank you

MPIV host rule repository shutting down

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 :)

Wikipedia - issues

I've just noticed the following two issues with any wikipedia page (using latest MPIV with Tampermonkey Beta/Violentmonkey in fresh Chrome profile):

  1. 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)

 

  1. 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 new `"e"` advanced syntax `{".parent-selector": ".child-selector"}` causes `RangeError: Max call stack size exceeded`

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

Request: For youtube.com / youtu.be links, popup the embedded version of the video

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.

v.redd.it mouseover support

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.