npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

snowpic

v0.1.2

Published

Simple web-based media viewer

Downloads

7

Readme

snowpic

Simple web-based media viewer

Key Features

Enjoy your images and videos on the web anywhere

  • Browse directories, images and videos on the web
  • Show images and videos
  • Mobile, PC and TV compatible

[Show image]

[Browse directories and files]

[Show image on mobile]

It`s easy, just use it now

  • Finger touch, mouse wheel, keyboard and touchpad inputs are available
  • Thumbnails helps the easy navigation
  • Video control and autoplay are supported

[Video play]

[Video play on mobile]

Easy to deploy

  • No server app required - Nginx, that's all!
  • Download once and deploy anywhere - sub-path is supported (see Path-independency Configuration)

Installation

This is a Node.js app available through the npm registry. Before installing, download and install Node.js. Installation is is easily done using the npm install command: $ npm i snowpic The command downloads and installs snowpic under node_modules directory. You can leave snowpic there or move it to somewhere else.

Web Server Configuration

This web app is originally designed to work on Nginx, however, using Nginx is not mandatory. But why Nginx? With a few config lines, Nginx provides the autoindex function that creates directories and files data list including useful information such as name, type and so on in the json format.

  • Properties: name, type, mtime, size
  • JSON Data Example:
[
	{ "name":"node-modules", "type":"directory", "mtime":"Sat, 09 Apr 2019 08:51:52 GMT" },
	{ "name":"dist", "type":"directory", "mtime":"Sat, 09 Apr 2020 08:52:27 GMT" },
	{ "name":"helloworld", "type":"directory", "mtime":"Fri, 17 Feb 2018 22:27:21 GMT" },
	{ "name":"tools.zip", "type":"file", "mtime":"Sat, 16 Apr 2016 01:34:08 GMT", "size":121592817 },
	{ "name":"package.json", "type":"file", "mtime":"Sat, 16 Apr 2016 01:33:25 GMT", "size":4470 },
]

Note that all the images and videos you want to browse are placed under a certain directory. Make sure you move all your images and videos to a direcotry. Nginx will autoindex the directory and generate directories and files information. Add the following lines to nginx.conf or another conf file under sites-available.

server {
	location / {
		root [type here the full path of directory where contains index.html];
	}

	location [type here the directory name that contains image files ] {
		root [type here the full path directory excluding the last directory name];
		autoindex on;
		autoindex_format json;
	}
}

For example, if all your images and videos are stored in the path of /media/storage/images, you want to set:

location /images {
    root /media/storage;
    autoindex on;
    autoindex_format json;
}

Environment Configuration

You need to set snowpic to know where to send a request to get directories and files data. Find and define some of these parameters from environment.json file in assets directory.

[
    {
        "category": "server",
        "content_location": "specify the directory name that contains your photos",
        "server_address": "specify the IP address of your server",
        "protocol": "http"
    },
    {
        "category": "app",
        "app_name": "snowpic",
        "app_title_bar": "true",
        "supported_formats" : "jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF|mp4|MP4",
        "supported_image_formats" : "jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF",
        "supported_video_formats" : "mp4|MP4",
        "dialog" : {
            "dialog_close_button": "true",
            "content_width": "100vw",
            "content_height": "100vh",
            "content_max_width": "100vw",
            "content_max_height": "100vh",
            "show_thumbnails": "true"
        }
    }
]

content_location must match the location configuration of your web server above. Make sure that you do not add '/' character before and after content_location. server_address means where you send a request to and get a response from. If your web server and image directory are under the same IP address, you can use localhost. Otherwise, type a specific IP address. protocol is either of http or https depending on your web server configuration. If you already set up SSL on the server, https is highly recommended.

Path-independency Configuration

If you want to deploy this application to serveral paths, it is now available. Without setting each base-href and rebuilding(ng build), you can deploy it right away under serveral sub-paths like as below.

http://localhost/a
http://localhost/b
http://localhost/c

What you only need is to edit the web server configuration to specify the sub-paths you want to deploy under.

location [type here a sub-path where the app is installed] {
	root [type here the full path of directory where contains index.html];
}

For example, this below configuration means that index.html of the app is under /var/www/snowpic/ directory and you can access it through http(s)://url/snowpic.

location /snowpic/ {
	root /var/www;
}

Supported Media Formats

Currently, snowpic supports both of image and video. You can extend or shrink it. See Environment Configuration.

  • Supported image formats: jpg, jpeg, png, and gif
  • Supported video formats : mp4, ogg, webm

Supported Input Event handling

For mobile, left and right touch slide events are implemented. For PC, keyboard input, touchpad and mouse wheel work as well.

CORS issue

To handle the CORS issue, add the header information as well underneath what you put in the web server configuration. add_header Access-Controll-Allow-Origin *;

LICENSE

MIT