deathamns / viewhance Goto Github PK

I have been debugging this thing for a bit since it stopped working a while ago, albeit sporadically it still works on some images. It seems that in newer chrome versions, images don't get -webkit- prefixed styles anymore and thus Viewhance fails to determine the media type and consequently the initialization.

I fixed it in a local copy by altering the includes/app.js, changing the selector on line 124 from

img[style^="-webkit-"]:first-child

to

img:first-child

I'm not really sure if I get this working properly in Opera.

I don't get the menu such that was pictured in Chrome web store this extension page.

Probably one of the best image viewers in the webstore, really satisfied. I only have a few requests to be perfect:

1 - Support for also viewing SVG Vector Images - It already supports so many file formats, adding this one to the 'whitelist' would probably easy (no?)

2 - Smooth zooming - Non-stepped smooth zooming/panning like the Image Viewer extension

3 - Allow dragging to system/file manager - Dragging image outside browser window would save the image locally, although I understand this may collide with the current panning functionality(?)

4 - Tooltips for the toolbar buttons

In the debug page there is this message for Viewhance:

**

This on Firefox 63beta on W10.

Versions for Firefox newer than viewhance-2017.502.1705-fx+sm.xpi cannot be installed in SeaMonkey or Pale Moon - ok, naturally, as they are for Firefox, but neither are there separates downloads for those browsers. With viewhance-2017.502.1705-fx+sm.xpi in Pale Moon the preferences are not accessible (neither by "image sidebar" nor Add Ons > Options) and the Browser Tabs lose their close buttons and get moved to the right (randomly).
Please create a Pale Moon compatible version, thank you!

I'm referring to the "Send image to..." option. It'd be nice if it was possible to make the links open in new tabs when clicked (and preferably NOT switching the active tab to them).
You'd think that people could just middle-click the link with their mouse to do the same, but that would not really be an option on a laptop without a mouse. Even more so if you'd just want to quickly send the image to 2 or more links.

When running sh build.sh or ./build.sh I get these errors:

build.sh: 4: build.sh: Bad substitution
build.sh: 10: build.sh: Syntax error: "(" unexpected

When running bash build.sh I get these errors:

Traceback (most recent call last):
  File "build_meta.py", line 245, in <module>
    fromlist=['build_meta']
ImportError: No module named crx.build_meta
build/crx: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
cp: cannot create regular file ‘/background.html’: Permission denied
cp: cannot create directory ‘/css’: Permission denied
cp: cannot create regular file ‘/defaults.json’: Permission denied
cp: cannot create regular file ‘/icon-18.png’: Permission denied
cp: cannot create regular file ‘/icon.png’: Permission denied
cp: cannot create directory ‘/includes’: Permission denied
cp: cannot create directory ‘/js’: Permission denied
cp: cannot create regular file ‘/options.html’: Permission denied
cp: cannot create regular file ‘/includes/’: Not a directory
cp: cannot create regular file ‘/js/’: Not a directory
build.sh: line 40: /includes/app.js: No such file or directory
Files ready: 
build/mxaddon: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
cp: cannot create regular file ‘/background.html’: Permission denied
cp: cannot create directory ‘/css’: Permission denied
cp: cannot create regular file ‘/defaults.json’: Permission denied
cp: cannot create regular file ‘/icon-18.png’: Permission denied
cp: cannot create regular file ‘/icon.png’: Permission denied
cp: cannot create directory ‘/includes’: Permission denied
cp: cannot create directory ‘/js’: Permission denied
cp: cannot create regular file ‘/options.html’: Permission denied
cp: cannot create regular file ‘/includes/’: Not a directory
cp: cannot create regular file ‘/js/’: Not a directory
cp: cannot create directory ‘/icons’: Permission denied
build.sh: line 40: /includes/app.js: No such file or directory
Files ready: 
build/oex: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
cp: cannot create regular file ‘/background.html’: Permission denied
cp: cannot create directory ‘/css’: Permission denied
cp: cannot create regular file ‘/defaults.json’: Permission denied
cp: cannot create regular file ‘/icon-18.png’: Permission denied
cp: cannot create regular file ‘/icon.png’: Permission denied
cp: cannot create directory ‘/includes’: Permission denied
cp: cannot create directory ‘/js’: Permission denied
cp: cannot create regular file ‘/options.html’: Permission denied
cp: cannot create regular file ‘/includes/’: Not a directory
cp: cannot create regular file ‘/js/’: Not a directory
build.sh: line 40: /includes/app.js: No such file or directory
Files ready: 
build/Viewhance.safariextension: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
cp: cannot create regular file ‘/background.html’: Permission denied
cp: cannot create directory ‘/css’: Permission denied
cp: cannot create regular file ‘/defaults.json’: Permission denied
cp: cannot create regular file ‘/icon-18.png’: Permission denied
cp: cannot create regular file ‘/icon.png’: Permission denied
cp: cannot create directory ‘/includes’: Permission denied
cp: cannot create directory ‘/js’: Permission denied
cp: cannot create regular file ‘/options.html’: Permission denied
cp: cannot create regular file ‘/includes/’: Not a directory
cp: cannot create regular file ‘/js/’: Not a directory
cp: cannot create regular file ‘/Settings.plist’: Permission denied
build.sh: line 40: /includes/app.js: No such file or directory
Files ready: 
build/xpi: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
cp: cannot create regular file ‘/background.html’: Permission denied
cp: cannot create directory ‘/css’: Permission denied
cp: cannot create regular file ‘/defaults.json’: Permission denied
cp: cannot create regular file ‘/icon-18.png’: Permission denied
cp: cannot create regular file ‘/icon.png’: Permission denied
cp: cannot create directory ‘/includes’: Permission denied
cp: cannot create directory ‘/js’: Permission denied
cp: cannot create regular file ‘/options.html’: Permission denied
cp: cannot create regular file ‘/includes/’: Not a directory
cp: target ‘/js/’ is not a directory
cp: cannot create regular file ‘/bootstrap.js’: Permission denied
build.sh: line 40: /includes/app.js: No such file or directory
Files ready: 

Running sudo bash build.sh (why do I even have to try that?) I get these errors:

Traceback (most recent call last):
  File "build_meta.py", line 245, in <module>
    fromlist=['build_meta']
ImportError: No module named crx.build_meta
build/crx: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
Files ready: 
build/mxaddon: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
Files ready: 
build/oex: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
Files ready: 
build/Viewhance.safariextension: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
Files ready: 
build/xpi: No such file or directory
/usr/bin/find: invalid argument `-delete' to `-mmin'
Files ready: 

Bash version:
GNU bash, version 4.3.11(1)-release (x86_64-pc-linux-gnu)

Normally Alt + Left arrow is the shortcut for "Go back one page" and Alt + Right arrow is the shortcut for "Go forward one page". But they don't work when Viewhance is installed and I open an image. (For example, this random image from Wikipedia: https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/St_Pancras_Railway_Station_2012-06-23.jpg/711px-St_Pancras_Railway_Station_2012-06-23.jpg )

My browser is currently Firefox 62.0 running in Arch Linux, and Viewhance is version 2018.805.1235 from August 5th.

http://i.imgur.com/1Cl6Sha.png

Changing the background color will still be #c3c3c3 even after saving

I run Chrome Beta, and the recent update to Chrome 52 broke Viewhance. Now, images usually (but not always), load in the bottom-right of the screen, and partially off screen. Interestingly, zooming in or out using the Viewhance controls centers the image properly, but returning to default zoom returns it to the off-screen position.

For examples, it's happening for me on this image, but not on this image.

• upload to imgur via Send To
• option to disable right clicking images and having them open (I trigger it way too often and never mean to use it)
• fit to width/height with double left click rather than long click would be more intuitive imo
• alt + wheel to strictly zoom as shift and drag cannot zoom you out; while switching between scrolling and zooming requires thinking.
  Thank you

I use a lot of browsers and change a lot of settings, use custom style (CSS), custom send image to list.
its really great how customizable Viewhance is.

so it would be really nice to have ability to save full config and quickly load it to another browser.
thank you.

Running Viewhance Firefox extension / Waterfox 55.1.0 (built on Firefox 55.0.3) / Windows 7 64-bit

Viewhance / Settings / center content is checked.
ViewHance 2017.917.1405 (Webextension) centers images only, not audio nor video.
Viewhance 2017.502.1705 (legacy add-on) centers all correctly.

I double-checked VH 2017.917.1405 by uninstalling it completely then re-installing it: same issue.
Could be interference with another of my 65 add-ons/webextensions, but no issue with Viewhance 2017.502.1705 (legacy add-on) with which I'll stick for the time being.

• Configurable zoom step.
• Move image using arrow keys.
• Currently top left corner of image can be moved only to top left corner of visible area (for example, can't be placed on center of visible area). Allow move image corners at any location.
• Completely rewrite css of "options.html". Currently "options.html" is not scalable (zoomable).

https://github.com/ParticleCore/Particle/raw/gh-pages/images/blue%20glow.png

In fact, all picture in github like this seems down.

Maxthon: 5.0.1.3000

the zoom icon does not show in Firefox 40

no

2017.402.1400 version - does not work, crash the browser !!
2017.219.2209 version - works fine!
Win XP3 Pale Moon 26.5.0 https://www.palemoon.org/palemoon-atom.shtml

I have an issue where it scrolls too fast by default on my mac. I remember I was able to fix this before by changing the custom CSS but I can't for the life of me find the solution again on the web. I think the solution was posted before on the chrome webstore but it appears to have been wiped and I can only find this record of just the issue description archived on chromebeat.com.

Subject: Touchpad scrolling too fast
Comment: If you scroll with the two-finger-swipe gesture on a MacBook, the image flies by at a speed much higher than e.g. a website would. Scrolling through a picture 5000px tall takes a movement of fingers of about 5 millimeters, which makes this way of scrolling unusable.

Please let me know if there is a way to fix the issue. Thanks!

1.it seems that when maxthon update your add-in to a new version, some customer settings are reseted. i am not sure about that but please take a good care on it

in the picture below:
2.icon missing
3.the symbol in the image information cannot display properly. if you want it to be a "x", just use the alphabet:'x' to replace it

Imgur has quite a lot of gifv files but Viewhance doesn't seem to support this format. I think gifv is pretty much a webm anyway? Since webm is supported by Viewhance, any chance for a gifv support?

Chrome 56+ now displays images and gifs just like Firefox - centered with dark background. Latest Viewhance doesn't seem to work with these changes.

zoom step smaller than 10% e.g. .01 or .05 doesn't work

Viewhance has the option of changing the background color of an image with transparency, but has no visible way to make the transparency a checkerboard pattern. I used Viewhance back in 2013 when it was still part of the Imagus extension, and remember the checkerboard pattern being an option. Pretty sure in the form of a dropdown box.
I also remember when the background settings of Viewhance changed to a CSS field with the default color being White (#fafafa) you could still replace it with something like "checkerboard" and it would show the transparency as a checkerboard pattern. I don't remember what that code was now.

Is there any way to still do this? If so, could it be added to the help tooltip please.

Thanks for the great extension by the way.

Floating menu doesn't show on fastpic images, example:
http://i70.fastpic.ru/big/2015/0826/9f/0dbfb39f852c9d2925e5ad7c5501bf9f.jpg

Viewhance 1.0.2 + Firefox 31.7.0 ESR / Firefox 40.02

console gives an error Error in parsing value for ‘image-rendering’. Declaration dropped. and then links to the inline CSS, duplicated below; I don't see an image-rendering statement in it.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: 12px "Trebuchet MS", sans-serif;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#media {
  display: block;
  box-sizing: border-box;
  max-width: none;
  max-height: none;
  position: absolute;
  margin: 0;
  background-clip: padding-box;
  image-orientation: from-image;
}

html.audio #media {
  box-sizing: inherit;
  width: 50%;
  height: 40px !important;
  min-width: 300px;
  max-width: 1000px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow: none;
  background: transparent;
}

html.load-failed #media {
  left: 50%;
  margin: 10% auto 0 -25%;
  padding: 10px;
  max-width: 50%;
  box-shadow: 0 0 5px red;
  text-align: center;
  font-size: 20px;
}

html.fullscreen #media {
  background: black !important;
}

#media:-moz-full-screen {
  background: black !important;
}

a {
  text-decoration: none;
}

:focus {
  outline: 0;
}

:invalid {
  box-shadow: none;
}

#menu {
  display: flex;
  position: fixed;
  top: 0;
}

#menu:not(.permanent) {
  opacity: 0;
  transition: opacity .15s, left .2s;
}

ul {
  display: inline-block;
  margin: 0;padding: 8px 0;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  list-style: none;
}

li {
  position: relative;
  display: block;
  padding: 4px 15px;
  min-width: 25px;
  min-height: 25px;
  line-height: 100%;
}

li > svg > use {
  pointer-events: none;
}

li > svg {
  width: 25px;
  height: 25px;
  cursor: pointer;
  fill: rgba(0,0,0,0);
  stroke: #fff;
  color: #fff;
  transition: opacity .2s;
}

li > svg:hover {
  opacity: .6;
}

li ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 100%;
  text-align: left;
  opacity: 0;
}

li:hover ul {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: visibility .4s, opacity .2s .3s;
}

li ul > li {
  display: block !important;
  font-size: 15px;
}

.send-hosts li > a {
  padding-bottom: 3px;
  padding-left: 25px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 3px;
  color: #fff;
  cursor: pointer;
}

#menu > ul > li:hover, .send-hosts li > a:hover {
  color: silver;
}

input[type="range"] {
  width: 125px;
  vertical-align: middle;
}

li ul > li {
  white-space: nowrap;
}

.filters > ul {
  font-size: 15px;
}

.filters > form {
  margin: 0;
  padding: 0;
}

body.frames {
  overflow-y: scroll !important;
  text-align: center;
}

body.frames > div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

#top-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 0 0 15px rgba(0, 0, 0, .4);
}

#frames {
  margin: 50px 0 5px;
}

#frames > canvas, #frames > img {
  margin: 2px;
}

#frames > .highlighted {
  outline: 2px solid #00a1ff;
}

#frames > canvas, #frames > img {
  display: none;
}

#current-frame + output {
  display: inline-block;
  width: 77px;
  font-family: Conoslas, monospace;
  text-align: right;
}

.back {
  font-size: 150%;
  text-decoration: none;
  color: black;
}

#frames.showall > img, #frames.showall > canvas {
  display: inline-block !important;
}

.partial-frame:hover {
  outline: 1px dotted #666;
}

/* Below lies user-specified styles */

body {
  background: silver;
  overflow: hidden;
}

#media {
  background: #fafafa;
  box-shadow: 0 0 5px grey;
}

pls provide the code for #menu :P

I like to open images initially in original size, and after that, in many cases, decide to zoom in to fit to viewport. Images can be very small on 4K screen, and first I have to move mouse cursor on image, to the center of the screen, then click. Aiming takes time:) It would be much more convenient if clicking on background switched zoom mode as well.

This is implemented in Enhanced Image Viewer (by Sebastian Blask) and it makes switching zoom mode quite a lot easier there.

So yeah. For some reason, the latest Chrome beta (Version 54.0.2840.50 beta-m (64-bit)) opens images that are higher-res than [some number] using its own viewer instead of Viewhance now. I can force them to open in Viewhance via Ctrl-Alt-click from a page, but left to its own, Chrome defaults to its own viewer. It's strange.

I disabled all the other extensions and cleared all experimental flags to rule out random glitches of my own accord.

If you need more info, please let me know.

maxthon:4.4.5.2000

Recent version of Viewhance stopped working with Pale Moon x86 25.5.0 (firefox-based browser), Win 8.1. Extension install just fine but there's no menu on the left side of the screen when viewing image and scroll zoom doesn't work also.

Is there any way to get it to work with PM browser?

Not sure if this is relevant: https://forum.palemoon.org/viewtopic.php?f=5&t=8474

This extension can be more useful for viewing pixel art if zooming was changed by integer factors, for example, 25%, 50%, 100%, 200%, 400%.

Bonus if integer factors above 100% automatically set the image to crisp mode.

Since you already have the code written fro Chrome, could you release an update for Firefox as a webextension? It's currently maked as a "legacy" extension in Nightly, and these will be shut down in Firefox 57.

i think there is a bug in the browser causing some gif w/ sound cannot be properly loaded.
e.g. https://i.imgur.com/Slay0YY.gif
Would you help me to confirm and explain here so that i can repost it?

When zooming a picture that is loaded from browser cache (server returned 304 Not Modified), the original height-width ratio of the picture cannot be preserved. This bug also affects rotate and mirror functions, in that a rotation is not done around the centroid of the pic, and mirroring is not done against the middle of the pic.

If the picture is loaded from the server (initially or via ctrl+F5 force refresh), the bug is not there.

To demonstrate it, I recorded a gif: https://imgur.com/a/Y509K

Quoting your response from this 2016 issue regarding SVG support:

It's not that simple. Supporting SVGs requires a different handling, since an SVG itself is a document. But my main reason to not support them is that they can have interactive elements (e.g., they can handle mouse events, or change their structure) where the extension would be an interference.

I would argue that the benefits of adding support for SVGs greatly outweigh the drawbacks you mentioned.

Not to mention, interactive SVGs are quite rare. Based on a sample size of 16,156 random unique SVGs I downloaded from Google:

• 16,006 (99.07%) had no interactivity
• 118 contained <a> elements
• 31 contained :hover, :active, :focus, or :visited css
• 1 contained <a> and :hover

Edit: If the 1% of interactive SVGs bothers you, you could also programmatically check whether the SVG contains interactivity. If it does, do nothing; otherwise, run Viewhance.

Can't stop auto-hide :(

My other laptop is on Chrome 53 and it seems to work. Both are running Viewhance 1.0.9 but the one on Chrome 54 isn't working at all.

I am on firefox 56.0b12 with Viewhance 2019.321.1540 and I cannot play this gif
https://www.meteo60.fr/radars/animation-radar-france-simple.gif

when i click the play button,

nothing happens

menu area overlaps with OS taskbar and taskbar appears over menu.
please add option to customize it or simply enlarge it to, say, 20% of tab width.

thx!

Open image in new tab.
Extension not loaded.
Google chrome version 54.0.2840.100 (64-bit).

test link:https://media.giphy.com/media/n5FNMVNQ33TUY/giphy.gif

i think it works in the last version, not sure :<

Currently the Initial sizing mode have "contain, best fit and standard". From experience I see no different between contain and best fit. Both seem to scale to height. Unless other option where the "?" explain the option in details Initial sizing mode does not.

I would just like to request a "fit to width option", which is currently available as "Left long-press action" but I am requesting if it can be made as an option Initial sizing mode so I dont have to resize it.

turns out
the area can be increased by setting transparent borders for the menu via custom CSS
is not the best option, because transparent borders are not transparent for mouse clicks. its too annoying.
so I have to use modded Viewhance with custom menu area for this reason

episode 1: size of the menu area

#9
Maxthon: 5.0.1.3000
http://i.imgur.com/8flqcd0.gif

On modern 4K HiDPI monitors people set display scaling in Windows to higher than 100%, because text size is way too small in 100% (in fact, Windows automatically sets 150% scaling on 4K 32-inch monitor). That makes sense for text and interface elements, and it has to be done for all of the content inside a web page (otherwise page design and alignment of elements breaks), but it doesn't make sense for images opened in separate tabs.

When Windows scaling is set to, let's say, 150%, everything in Chrome renders in increased size: Chrome interface, web pages, pictures in web pages, pictures in separate tabs. I want to exclude pictures in separate tabs from that - I want them to still render pixel-perfect - at 100% size (when I initially open them), even if everything else is at 150%. That 150% scaling kills image sharpness and invalidates advantages of HiDPI screen by not using its full resolution.

Initially, to accomplish this, I had to use a combination of two extensions: Media DPI Scale Reset + Enhanced Image Viewer (by Sebastian Blask). This method had inconveniences (sometimes double-click, other times single click zoomed in the first time after opening a tab with an image). Viewhance is the best image viewer, so I would much prefer Viewhance to have an option to disregard Windows scaling setting, and I even think it should be the default behavior.

The idea of how to accomplish this is very simple:
mediaCss.width = mOrigWidth / window.devicePixelRatio;

In other words,
final_image_size = original_image_size / OS_scaling_factor
or
100% size = 150% size as rendered by chrome / 1.5

It works, the image renders pixel-perfect without any blurring, I've checked that using images of test patterns and Photoshop color sampler.

I've already modified Viewhance's code for my personal use. But it's probably quite a dirty hack, and has problems. Viewhance's author would probably implement it correctly and everyone will have that feature with update then.

Below I describe how I've done that (in Chrome version of Viewhance) (it's probably unneeded, because the code is not good):
file inside extension folder is includes/viewer.js, use Ctrl+F

1. after line
   var resizeMedia = function(mode, w) {
   I added
   if (Math.abs(media.box.width - (mOrigWidth / window.devicePixelRatio)) < 2) {
   mode = MODE_FIT;
   }
   The point here is to force the switch to FIT mode when the image is clicked while at 66.7%, without this it will stay at 66,7%.

2. replaced line
   delete mediaCss.width;
   with
   mediaCss.width = mOrigWidth / window.devicePixelRatio;
   This is the core idea - counteracting increased size.

3. replaced line
   mWidth === mOrigWidth
   with
   Math.abs(mWidth - (mOrigWidth / window.devicePixelRatio)) < 2
   I had to change this line with condition because without it, images smaller than viewport didn't switch to FIT mode, only larger than viewport did.

That's it, basically just 4 lines of code.
There is a small problem: occasionally it is visible that the picture first displays in 150% size and then, 0.2 seconds later, in 100% size, but I don't know whether it is possible to show it immediately in 100% size.
And there is a big problem: when opening an image that is much larger than viewport directly in original size (as set in options), during first drags with LMB to pan the image, even after releasing LMB, image still sticks to mouse pointer, continues to move with it. Changing zoom mode to fit and back to original, makes this issue disappear in subsequent drags.

I've attached the modified Viewhance if anyone wants this feature now (or for testing), unpack zip (it's for Chromium-based browsers)
impppjchnpfgknmbaaghfeopcgfoilac.zip

Maxthon:4.4.7.3000 in 1.03

images especially those are vertical, that is the width is smaller than its height, will have the following problems (the probability is about 1/3 to 1/5, and for horizontal image P(getting issue) is lower;but once it arise, P(getting issue) will be similar):

1. cannot centre properly and will shift to a little bit to right.
2. the icons in the toolbar will shake:
   
3. the toolbar is larger than normal one like in the images(in scale):
   

settings that you need to follow in order to recreate it:
Initial sizing mode-fit to width
Center content-on

On Chrome, In previous versions this (or possibly Imagus) had an option somewhere to work on (and thus, conveniently center and zoom) image files opened from local storage in the browser; after the updates to the extensions yesterday, that option either got reset and I can't identify how to fix it, or whatever was enabling it was removed.

Currently trying to figure out how to load the previous versions of the extensions from the code, so I can give more useful feedback about the issue I am seeing.

Have you considered adding the size of the opened file in the tab's title as an option?

I was looking into scripting this myself, and I thought it would be a good addition to your extension.

Just started looking into it, and found this project for example: https://github.com/ehaagwlke/View-Image-Info-Chrome/blob/master/js/vii.js