Files Gallery 0.15.0

Files Gallery 0.15.0 includes a new audio and video player, a dedicated audioplayer, album cover art pictures for audio files and much more.

See demo

Player

In this release, we have added a beautiful new custom media player for your video and audio files. The new player matches the style and themes of Files Gallery, and comes with several new features. No more browser-native players that look and behave differently across browsers and platforms.

New Video Player Demo Documentation

• Unified theme-specific player design for Audio, Video, Youtube and Vimeo.
• Support for remote m3u8 playlists by using url files Demo
• Support for remote video url's by using url files Demo
• Autoplay next file when video or audio track ends (like playlist).
• New Javascript config player options.

Audioplayer

New dedicated audioplayer to easily play audio tracks in a folder like a playlist, without having to open and close files separately. * The audioplayer is disabled by default.

Audioplayer Demo Documentation

• Automatically play audio tracks in folder as a playlist.
• Click to play tracks directly from audio files listed in the layout.
• Easily navigate previous and next tracks in playlist.
• Browse other files while the audioplayer plays in the background.
• Optional global player can play audio tracks from a pre-defined location.
• New Javascript config audioplayer options.

More Features

• New mediatags loads album cover art for audio files into the layout and modal.
• New imagemagick_prefer_imagick config option to choose ImageMagick method [forum]
• New Javascript config sort.options to choose available sort options [forum]
• New Javascript config layouts option to chose available layouts [forum]
• Fixed thumbnail errors in ImageMagick and FFmpeg when there are certain characters [forum]
• Code editor now supports all text/* files, even if they aren't known text or code formats.
• Audio and video video files with custom thumbnails now get play icon.
• Escape key will now first exit modal fullscreen before exiting modal completely.
• JS config option video_popup is now set to false and videos will instead display in modal.
• New Javascript config option popup.include_videos decides if videos are included in popup.
• Removed JS config option video_attributes as options are now assigned from player.

New Config Options

The following new PHP config options have been added.

_files/config/config.php

'imagemagick_prefer_imagick' => true, // If installed and available, Files Gallery will prefer to use the PHP Imagick extension ahead of ImageMagick CLI.

New Javascript Options

The following new Javascript options have been added.

_files/js/custom.js

// array of available layout options / can also be a full object with min/max properties
layouts: ['list', 'imagelist', 'blocks', 'grid', 'rows', 'columns'],

// options for the optional audioplayer / disabled by default
// built on top of https://github.com/sampotts/plyr, and you can merge native plyr options
audioplayer: {
  // controls: this.controls, // Plyr controls array or html / please avod
  enabled: false,       // enable audioplayer / disabled by default, as it could be confusing when clicking audio files
  autoplay: true,       // attempt to autoplay audio tracks as soon as they open
  include_dirs: '',     // include dirs regex (will exclude all dirs except those that match the regex)
  exclude_dirs: '',     // exclude dirs regex
  autopause: true,      // pause player when video/audio opens in modal/popup
  autoplay_click: true, // attempt to autoplay audio on document.click if initial autoplay is blocked by browser interaction policy
  list_click: true,     // play audio files in audio player when clicked from the layout
  filter: true,         // synchronize playlist with list filters / if false, all items in dir will play, regardless of filter
  sort: 'list',         // list, initial, shuffle, name_asc, name_desc, date_asc, date_desc
  autohide: true,       // hide audioplayer on scroll down, re-emerge on scroll up
  remember_state: true, // remember audioplayer playing state when navigating to new folders with audio tracks / also uses localStorage
  loop: true,           // loop tracks / migrated to this.myloop and deleted here, because we need to keep default Plyr object/disabled
  autoplay_next: true,  // autoplay next track when current track ends (if there are multiple tracks)
  allow_nav: true,      // allow navigation between tracks in current dir with next/previous buttons
  files: '',            // if you want to load global files into the audioplayer, assign the root path to load tracks from 'path/music' or array ['path/to/track1.mp3', 'path/to/track2.mp3'] (urls can be absolute)
  mini_default: false,  // mini player is default
  mini_remember: true,  // remember mini player state localStorage
  history: _c.config.history, // listen to #hash on page load and push history / a bit dodgy ...
  title: '%title% — %artist%', // title template, from ID3 tags if available / %filename% %nicename% %title% %artist% %album%
  title_default: '%nicename%', // default title, when ID3 tags don't exist for file or title is disabled
  title_autohide: true, // autohide title, show only on hover and temporarily when new track loads
  title_show_duration: 3000, // temporarily show title for 3 seconds when new track loads
},

// options to load album cover pictures from audio files / built with https://github.com/aadsm/jsmediatags
mediatags: {
  layout_pictures: true, // attempt to load audio album cover pictures into main items layout
  modal_picture: true, // attempt to load audio album cover picture into modal
  tags: ['album', 'artist', 'genre', 'picture', 'title'], // tags to read
  types: ['mpeg', 'mp3', 'mp4', 'ogg', 'flac', 'x-m4a', 'x-wav'], // supported audio types
  observer_options: {}, // default intersection observer options for loading pictures in main layout
},

// player / video, audio, embed player that opens in the modal on click
// built on top of Plyr https://github.com/sampotts/plyr
player: {
  // video: {}, // options specifically for video, inherits default options
  // audio: {}, // options specifically for audio, inherits default options
  // embed: {}, // options specifically for embed (Youtube, Vimeo), inherits default options

  // default player options for video, audio and embed
  // also accepts Plyr options https://github.com/sampotts/plyr#options
  default: {
    enabled: true, // enable the custom (Plyr) video player / if disabled, native browser player will be used
    autoplay: true, // autoplay when item opens
    //controls: this.controls, // custom Plyr controls array or html / avoid because it's complicated
    autoplay_next: true, // autoplay next modal item on audio/video end event
    autoplay_next_media_only: false, // autplay next modal item on audio/video end event, only if next item is media (audio/video/embed)
  }
},

//
popup: {
  include_videos: true, // include videos when navigating files in the popup (supports images and videos, but videos will by default open in modal when clicked)
}

//
sort: {
  options: ['name', 'kind', 'size', 'date', 'shuffle'] // available sort options
},

How to update?

Simply download latest Files Gallery index.php or see the update docs.