GithubHelp home page GithubHelp logo

qronikarz / quomediaview Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 40.06 MB

Portable offline media tagging board made with pure/clean/vanilla JavaScript, inspired by booru sites

License: GNU Affero General Public License v3.0

HTML 20.07% JavaScript 76.67% CSS 3.26%
image-viewer database booru-sites photos thumbnails booru grid image-board javascript tags

quomediaview's People

Contributors

qronikarz avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

quomediaview's Issues

Use array method at

Use array.at() to select items in various arrays (for example for deleting)

Pagination rework

Might allow new sorting options and displaying pages with few different methods.

  • Recode to make it easier to maintain the code
  • Option to load new media with scrolling instead of clicking on pages yourself

Connection of searchbar and blockbar

Using one input box to search and block tags with + and - signs.

Just an option in the settings and not a default one.
It will make the ability to have + and - signs on the start of the tag not available to allow to search using it.

Sorting options

  • oldest to newest
  • newest to oldest
  • smallest size to highest
  • highest size to smallest
  • highest resolution to lowest (width x height)
  • lowest resolution to highest (width x height)
  • longest duration to shortest
  • shortest duration to longest
  • tag menu sorting
  • tag group sorting

Themes separation

  • Move everything related with just the theming to a new .css file
  • Allow selecting custom theme in options by typing the path to it

New media types support

Audio

  • support mp3, wav, ogg files
  • show a thumbnail icon which means not using audio tag like with video

Comic book

  • comic book starting from left to right
  • manga starting from right to left
  • allow all media types that QuoMediaView supports

Media collection

  • grouping multiple versions of same media together like backup or another file extension
  • grouping slightly different media together

Non-HTML files

  • support adding other files that can't be displayed in browser to allow to also use tags with them
  • specify if the file is considered to be picture or video that can't be displayed by browser or another type that doesn't fall into any category
  • needs a new default thumbnail to show

Bookmarks

  • browser website bookmarks
  • support importing bookmarks from browsers and preserve the folders as automatically assigned tags
  • allow setting custom icon

Special tags

  • tag with number value - used for rating
  • date tag?
  • between value - used when not exactly sure what tag/rating something deserves

Ligthbox redesign

  • Display buttons on image with autohide and mouse hover
  • New controls bar with new options like the ones in single media viewing page
  • Slideshow mode
  • Shortcut to media viewing page
  • Button to open media in edit mode
  • Button to open media in side panel preview
  • Keyboard shortcuts: Arrow keys and Esc

Improved media rotation tool

Due to few problems with rotating media using css transforms 360 degree rotation wasn't possible in QMV 1.1.

  • New rotation input needs to accept values from 0-360 degrees
  • it should be type=range.
  • Possibly needs to have a parameter for rotating differently in lightbox than in new tab since it moves it a little off the center.
  • After getting degree value it needs to use a math formula for rotating the media, moving it to visible space so it isn't cut off and also scaling it down so it doesn't overflow the scroll.

New options

  • Square thumbnails switch - losing aspect ratio, but no empty spaces
  • Size of the thumbnails
  • Size of the thumbnail borders - hidden. Variable in js file
  • Style of the thumbnail borders - hidden. Variable in js file
  • Lightbox/Side preview switch
  • Size of side preview panel
  • Thumbnails only switch
  • List view switch

QMV JSON rework

Rework QMV JSON data to allow for more features

  • date of adding
  • video duration
  • size
  • resolution
  • video text script with search function

Video duration info support

  • Allow video types to have a special info in JSON to specify their length
  • Sort videos option from longest to shortest and in reverse
  • Also add it to GIFs?

Precise changes warning

Make a list of changes that were made when calling edit guard warning.
They can be generic like "changed thumbnail size" or "deleted a file".

Easy translation support

  • Make every text easily translatable with new .json files
  • New translating function that is executed at start of the loading to translate all texts

Rotating media is making them cut off at the top

When rotating any media that has aspect ratio different than 1:1 (square) it makes it cut off at the top so it isn't contained by the div. Possible solution: moving it down a calculated amount when using rotate value different than 0deg and 180deg.

Database statistics

  • New subpage with just the statistics
  • Total count of all media
  • Total size of all media
  • Total tags count
  • Display tags from the most frequent to least and in reverse
  • Total length of video files
  • Average size of all media and length of videos
  • Database creation date
  • Number of files compatible with the browser and files that aren't

Persistent blocklist

Essentially a blockbar that doesn't need executing the function and can be saved to qmv_settings. It would be visible in Options and you could remove tags from the blocklist with a mouse click.

External program to quickstart a new QMV database

  • Place in a folder where you wish to create a new QMV Database and scan for all file types that QMV supports
  • Automatically assign path, border type tag, duration attribute and audio tag
  • Highly unlikely: include some form of AI object detection to automatically assing other tags

Fuse lightbox, mediaedit, sidepanelpreview together

Lightbox, mediaedit and sidepanelpreview functions share a lot of code that could be fused and reduced the changes needed while in the process of updating. Most easily visible with _next and _prev functions for them which also would be good to fuse and not use 3 different variables for selecting the same file.

Possibly also fuse singlemediaview with sidepanelpreview because they share same info from the files, but remember that singlemediaview doesn't have access to database so no colors can be made there (yet)

Remove edit mode grid button and function

It first needs the side preview section and a new button in Lightbox to get added.
Edit mode view will be removed from the tag menu and from the json data including the options to customize the border.
There's no need to have it if it can be accessed through other methods and it will just add a one or two more clicks at max.

Media viewing page improvements

  • Zooming in and out
  • CSS filters for photos (for example sepia, negative)
  • Custom rotation value, not only in 90 degrees steps
  • Rotary rotation control that works dynamically with mouse

Use dialog tag instead of alerts

Replace alerts with dialog tag to have it styled nicely. Alert can still be used if there were any changes made when exiting.

Side preview section

New section that can be used instead of Lightbox. Should open on the right, but think about allowing to customize the size and placement in the options.

  • display media tags and other info like size and resolution
  • control buttons to open in Lightbox or singlemedia view and rotation
  • make it a new default left mouse click instead of Lightbox
  • button to open the media in edit mode
  • Make the tags colored since you can access the database from side panel but can't from single media view

Nested tags support

Probably the most important function that needs to get added. It was worked on from the start, but it was too complicated.

Nested tags should also be possible to search by their parent tag for example: "lake" could be automatically searched with "water". "Lightbulb_on" should be also searchable by searching "lightbulb".

This would allow to make big databases easier to work with and allow to tag media very precisely, but still searchable by easier tags.

Symbol emblems

Display symbol emblems along or instead of the grid border. Would allow to easily inform if a file is supported by browser or what group it belongs to.

Currently chosen symbols (not added yet):

  • music: ♫ 9835 266B BEAMED EIGHTH NOTES
  • picture: ✎ 9998 270E LOWER RIGHT PENCIL
  • animated:
  • video: ▶ 9654 25B6 BLACK RIGHT-POINTING TRIANGLE
  • comic book:
  • collection: ⛁ 9921 26C1 WHITE DRAUGHTS KING
  • file:
  • browser friendly:
  • document:

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.