Mediabox

Mediabox - GPL3 web application that allows you to store files, play audio and video in formats that play medialement js , display images, make notes on them, add tags and write comments.



Mediabox continues the ideas of past Ostora FM and Photo , and is also a slightly modified Mediabox, created for Xvid.
')


The application has been in beta for a long time, but since it has been open source, it’s time to share it. Any comments, edits and improvements are welcome.
The logo and the CSS styles themselves were created by XVID and remained unchanged.

The application consists of three parts:

1) Frontend . Uses many different libraries:
- jquery
- Kendo UI Web, or rather version 2013.3.1119.open-source (https://github.com/Zazza/Kenju)
- bootstrap2 - JS is used only for displaying a dropdown
- medialement - to play audio and video files
- jquery.Jcrop - to make marks on images
- jquery.timer.js - need for swipebox
- jquery.swipebox.js - view images on full screen and slideshow
- shift.jquery.js - selection of files in the usual way (CTRL, SHIFL)
- load-image.js - create preview images on the frontend side
- webtoolkit.url.js - UTF8 URL decode

RequireJS is used for convenient work with a large number of JS files.
Frontend works with Backend and Storage through the API.

2) Backend . It stores information about the file structure, files (including preview for images) and provides user authorization.
The original backend was written entirely in JS ( Prudence ). Frontend is an independent part of the application, and therefore weakly connected with the backend. This approach made it relatively easy to create backend using PHP using Yii. Transferring the application to PHP was made specifically so that as many users as possible can work with the mediabox. I am not a big fan of using the Yii framework to create applications with non-standard functionality. But nevertheless, he allowed to achieve the necessary task as quickly as possible thanks to the powerful Active Record and simple unambiguous structure of the application.

DB schema:


3) Storage . The task of storage is to store, read and delete files in the file system. Theoretically, storage can use both local or remote FS and cloud storage for storing files: Amazon S3, Google Drive, Yandex disk, etc.
<a href=" github.com/Zazza/mediabox-storage ”> Simple Mediabox Storage - PHP application, Silex framework. The application does not use the database, I wanted to make it as simple as possible.

Demo

URL: mediabox.8x86.ru
Login / Password: test / test

Installation

Github: github.com/Zazza/mediabox-php-yii

From the SQL directory, you need to import mediabox-structure.sql and mediabox-data.sql files into the database.

Then in /app/config/main.php you need to fix:

'db'=>array( 'connectionString' => 'mysql:host=localhost;dbname=mediabox', 'emulatePrepare' => true, 'username' => 'mediabox', 'password' => 'mediabox', 'charset' => 'utf8', ), 

Backend requires YII framework files, by default the framework directory is located in the same place as app and web.

Login / password to enter: admin / admin

Installing Simple Storage:
Github: github.com/Zazza/mediabox-storage

 cd mediabox-storage/silex/ php composer.phar install 

API

File management

URL	Request	Answer	Description
/ fm / fs /	$ _GET ["id"]	Json { text: ..., id: ..., hasChildren: [true or false], spriteCssClass: "[folder]" }	Gets the directory structure for treeview
/ fm / chdir /	$ _GET ["id"]	* File JSON Object	Gets a list of files in the current directory
/ fm / upload /	$ _GET ["file"] $ _GET ["size"] $ _GET ["extension"]	* File JSON Object	Adds a new file to the database
/ fm / thumb / [FILE_ID] /	$ _POST ["data"]		Saves a preview if the uploaded file is an image.
/ fm / getThumb /	$ _GET ["name"], where name = file_id	Content-Type: image / png Binary data	Gets a preview
/ fm / copy /	$ _POST ["file"] (mb several) $ _POST ["folder"] (several MB)		Saves in session a list of files to copy.
/ fm / restore /	$ _POST ["file"] (mb several) $ _POST ["folder"] (several MB)		Recover files from recycle bin
/ fm / getTypesNum /	$ _GET ["id"]	Json { all => [total files], image => [number of image files], video => [number of video files], audio => [number of audio files], other => [number of other files], path => [HTML STRING] }	Gets the number of files by type and HTML string of the current path in FS
/ fm / create /	$ _GET ["name"]	** Folder JSON Object	Create a folder
/ fm / getTrash /	$ _GET ["id"] (many)	* File JSON Object	Get the list of files in the basket
/ fm / fileToTrash /	$ _GET ["id"] (many)		Move file to recycle bin
/ fm / folderToTrash /	$ _GET ["id"] (many)		Move directory to trash
/ fm / remove /	$ _GET ["id"]		Delete file from database and storage
/ fm / rmFolder /	$ _GET ["id"]		Remove directory from DB and storage
/ fm / removeFileByName /	$ _GET ["name"]	PLAIN TEXT return file_id	Delete the file from the database in the current directory by name (needed to cancel the current download)
/ fm / buffer /	* File JSON Object		Get a list of files in the buffer (for copying)
/ fm / past /			Moves files from session to current directory
/ fm / deleteFileFromBuffer /	$ _GET ["id"]	* File JSON Object	Delete file from clipboard (for copying)
/ fm / clearBuffer /			Clear buffer (copy)
/ fm / sort /	$ _GET ["type"]		Apply file sorting
/ fm / view /	$ _GET [«view»]		Apply file display mode
/ fm / types /	$ _GET ["other"] $ _GET ["image"] $ _GET ["video"] $ _GET ["music"]		Save the list - which file types to display and which not

* File JSON Object:

 { id: …, name: …, shortname: …, obj: file”, type: [video,audio,…], mimetype: …, size: …, date: …, ico: …, src: …, ext: …, } 

** Folder JSON Object:

 { Id: …, name: …, shortname: …, obj: "folder", date: …, size: …, ico: …, parent: [ID   ] } 

Audio

URL	Request	Answer	Description
/ audio / saveList /	$ _POST ["track"] (many)		Save track in current playlist
/ audio / createList /	$ _GET ["name"]		Create New Playlist
/ audio / showList /		Json { Id: ..., name: ... }	Get a list of playlists
/ audio / getTracksList /	Json { Id: ..., name: ... }		Current tracks in the default playlist
/ audio / setPlaylist /	$ _GET ["playlist-id"]		Make playlist current
/ audio / deletePlaylist /	$ _GET ["playlist-id"]		Delete playlist
/ audio / volume /	$ _GET ["level"]		Change volume

Images

URL	Request	Answer	Description
/ image / setCrop /	$ _GET ["_ id"] $ _GET ["desc"] $ _GET ["ws"] $ _GET ["x1"] $ _GET ["x2"] $ _GET ["y1"] $ _GET ["y2"]		Save tag to photo
/ image / addTag /	$ _GET ["_ id"] $ _GET ["tag"]		Add a tag
/ image / getCrops /	$ _GET ["id"]	Json { x1: ..., x2: ..., y1: ..., y2: ..., ws: [image height when ticking], description: ..., }	Get tagging (coordinates and text) for the image
/ image / getTags /	$ _GET ["id"]	Json { tag: ... }	Get tags for image
/ image / addComment /	$ _GET ["id"] $ _GET ["text"]		Add a comment
/ image / getComments /	$ _GET ["id"]	Json { text: ..., user: ..., timestamp: ..., }	Get comments for the image
/ image / getAllTags /		Json { tag, tag, ... }	Get a list of all tags
/ image / getAllCrops /		Json { label name, label name, ... }	Get a list of all notes
/ image / selTag /	$ _GET ["tag"]		Select tag - returns a list of tags and labels for current images.
/ image / selCrop /	$ _GET ["crop"]		Select a tag - returns a list of tags and labels for current images
/ image / getFsImg /		* File JSON Object: { id: ..., name: ..., shortname: ..., obj: file ”, type: [video, audio, ...], mimetype: ..., size: ..., date: ..., ico: ..., src: ..., ext: ..., }	Get a list of images that satisfy the selected tags and tags.

API Storage

URL	Request	Answer	Description
/ save /	$ _POST ["id"] $ _POST ["name"] + file	Save file
/ get /	$ _GET ["id"]	File streaming	Get file
/ remove /	$ _GET ["id"]		Delete a file

PS
Old version with a different backend.