Geekly Articles each Day

Mediabox

Mediaboxは、ファイルの保存、 jsプレイを仲介する形式でのオーディオとビデオの再生 、画像の表示、メモの作成、タグの追加、コメントの書き込みを可能にするGPL3 Webアプリケーションです。



Mediaboxは、過去のOstora FMとPhotoのアイデアを引き継いでおり、Xvid用に作成されたわずかに変更されたMediaboxです。



このアプリケーションは長い間ベータ版でしたが、オープンソースであるため、パブリックドメインに入れる時が来ました。 コメント、変更、改善を歓迎します。
ロゴおよびCSSスタイル自体はXVIDによって作成され、変更されていません。

アプリケーションは3つの部分で構成されています。

1） フロントエンド 。 多くの異なるライブラリを使用します：
-jquery
-Kendo UI Web、またはむしろバージョン2013.3.1119.open-source（https://github.com/Zazza/Kenju）
-bootstrap2-JSはドロップダウンの表示にのみ使用されます
-medialement-オーディオおよびビデオファイルの再生用
-jquery.Jcrop-画像にメモを作成します
-jquery.timer.js-スワイプボックスに必要
-jquery.swipebox.js-フルスクリーンとスライドショーで写真を見る
-shift.jquery.js-通常の方法でのファイルの選択（CTRL、SHIFL）
-load-image.js-フロントエンド側でプレビュー画像を作成します
-webtoolkit.url.js-UTF8 URLデコード

RequireJSは、多数のJSファイルを扱う便利な作業に使用されます。
フロントエンドは、APIを介してバックエンドとストレージで動作します。

2） バックエンド 。 ファイル構造、ファイル（画像のプレビューを含む）に関する情報を保存し、ユーザー認証を提供します。
バックエンドはもともと完全にJS（ Prudence ）で書かれていました。 フロントエンドはアプリケーションの独立した部分です。つまり、バックエンドに緩やかに接続されています。 この方法は、Yiiを使用してPHPを使用してバックエンドを作成するのが比較的簡単です。 アプリケーションをPHPに移植することは、できるだけ多くのユーザーがmediaboxで作業できるように特別に作成されました。 私は、Yiiフレームワークを使用して非標準の機能を備えたアプリケーションを作成することを大ファンではありません。 それにもかかわらず、強力なActive Recordとアプリケーションの単純な明確な構造のおかげで、可能な限り迅速に目的のタスクを達成することができました。

DBスキーマ：


3） ストレージ 。 ストレージタスクは、ファイルシステム内のファイルを保存、読み取り、削除することです。 理論的には、ストレージはローカルまたはリモートのファイルシステムとクラウドストレージの両方を使用してファイルを保存できます：Amazon S3、Googleドライブ、Yandexドライブなど。
<a href=" github.com/Zazza/mediabox-storage ”>シンプルメディアボックスストレージ-PHPアプリケーション、Silexフレームワーク。 アプリケーションはデータベースを使用しません。できるだけシンプルにしたかったのです。

デモ


URL： mediabox.8x86.ru
ログイン/パスワード：テスト/テスト

設置


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

SQLディレクトリから、mediabox-structure.sqlおよびmediabox-data.sqlファイルをデータベースにインポートする必要があります。

次に、/ app / config / main.phpで修正する必要があります。
'db'=>array( 'connectionString' => 'mysql:host=localhost;dbname=mediabox', 'emulatePrepare' => true, 'username' => 'mediabox', 'password' => 'mediabox', 'charset' => 'utf8', ),


バックエンドが動作するにはYIIフレームワークファイルが必要です。デフォルトでは、フレームワークディレクトリはアプリとWebがある場所にあります。

ログイン/パスワード：admin / admin

シンプルストレージのインストール：
Github： github.com/Zazza/mediabox-storage

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


API


ファイル管理


URLリクエスト答え説明
/ fm / fs /$ _GET ["id"]ジョンソン
{
テキスト：...、
id：...、
hasChildren：[trueまたはfalse]、
spriteCssClass： "[フォルダ]"
}
ツリービューのディレクトリ構造を取得します
/ fm / chdir /$ _GET ["id"]*ファイルJSONオブジェクト現在のディレクトリ内のファイルのリストを取得します
/ fm /アップロード/$ _GET ["ファイル"]
$ _GET ["サイズ"]
$ _GET ["拡張子"]		*ファイルJSONオブジェクトデータベースに新しいファイルエントリを追加します
/ fm /親指/ [FILE_ID] /$ _POST ["データ"]アップロードされたファイルが画像の場合、プレビューを保存します
/ fm / getThumb /$ _GET ["name"]、name = file_idコンテンツタイプ：image / png
バイナリデータ		プレビューを取得
/ fm /コピー/$ _POST ["ファイル"]（数MB）
$ _POST ["folder"]（数MB）		セッションでコピーするファイルのリストを保存します
/ fm /復元/$ _POST ["ファイル"]（数MB）
$ _POST ["folder"]（数MB）		ごみ箱からファイルを回復する
/ fm / getTypesNum /$ _GET ["id"]ジョンソン
{
すべて=> [合計ファイル]、
image => [画像ファイルの数]、
video => [ビデオファイルの数]、
音声=> [音声ファイルの数]、
その他=> [他のファイルの数]、
パス=> [HTML STRING]
}		FSの現在のパスのタイプおよびHTML文字列ごとのファイル数を取得します
/ fm /作成/$ _GET ["name"]**フォルダJSONオブジェクトフォルダーを作成
/ fm / getTrash /$ _GET ["id"]（多く）*ファイルJSONオブジェクトごみ箱内のファイルのリストを取得する
/ fm / fileToTrash /$ _GET ["id"]（多く）ファイルをゴミ箱に移動する
/ fm / folderToTrash /$ _GET ["id"]（多く）ディレクトリをゴミ箱に移動
/ fm /削除/$ _GET ["id"]データベースとストレージからファイルを削除する
/ fm / rmFolder /$ _GET ["id"]データベースとストレージからディレクトリを削除する
/ fm / removeFileByName /$ _GET ["name"]平文
file_idを返します		現在のディレクトリ内のデータベースから名前でファイルを削除します（現在のダウンロードをキャンセルする必要があります）
/ fm /バッファ/*ファイルJSONオブジェクトバッファー内のファイルのリストを取得します（コピー用）
/ fm /過去/セッションから現在のディレクトリにファイルを移動します
/ fm / deleteFileFromBuffer /
$ _GET ["id"]*ファイルJSONオブジェクトクリップボードからファイルを削除（コピー用）
/ fm / clearBuffer /バッファをクリア（コピー）
/ fm /並べ替え/$ _GET ["type"]ファイルの並べ替えを適用する
/ fm /ビュー/$ _GET ["view"]ファイル表示モードを適用する
/ fm /タイプ/$ _GET ["other"]
$ _GET ["画像"]
$ _GET ["ビデオ"]
$ _GET ["音楽"]		保存リスト-表示するファイルの種類と表示しない種類


*ファイルJSONオブジェクト：
 { id: …, name: …, shortname: …, obj: file”, type: [video,audio,…], mimetype: …, size: …, date: …, ico: …, src: …, ext: …, }


**フォルダJSONオブジェクト：
 { Id: …, name: …, shortname: …, obj: "folder", date: …, size: …, ico: …, parent: [ID   ] }


音声


URLリクエスト答え説明
/オーディオ/ saveList /$ _POST ["track"]（多く）現在のプレイリストにトラックを保存
/オーディオ/ createList /$ _GET ["name"]新しいプレイリストを作成する
/オーディオ/ showList /ジョンソン
{
Id：...、
名前：...
}		プレイリストのリストを取得する
/オーディオ/ getTracksList /ジョンソン
{
Id：...、
名前：...
}		デフォルトのプレイリストの現在のトラック
/オーディオ/ setPlaylist /$ _GET ["playlist-id"]プレイリストを最新にする
/オーディオ/ deletePlaylist /$ _GET ["playlist-id"]プレイリストを削除
/オーディオ/ボリューム/$ _GET ["レベル"]音量を変える


画像

URLリクエスト答え説明
/ image / setCrop /$ _GET ["_ id"]
$ _GET ["desc"]
$ _GET ["ws"]
$ _GET ["x1"]
$ _GET ["x2"]
$ _GET ["y1"]
$ _GET ["y2"]		写真にタグを保存
/画像/ addTag /$ _GET ["_ id"]
$ _GET ["タグ"]		タグを追加
/ image / getCrops /$ _GET ["id"]ジョンソン
{
x1：...、
x2：...、
y1：...、
y2：...、
ws：[タグ付けされたときの画像の高さ]、
説明：...、
}		画像の注釈（座標とテキスト）を取得します
/ image / getTags /$ _GET ["id"]ジョンソン
{
タグ：...
}		画像のタグを取得
/ image / addComment /$ _GET ["id"]
$ _GET ["テキスト"]		コメントを追加
/ image / getComments /$ _GET ["id"]ジョンソン
{
テキスト：...、
ユーザー：...、
タイムスタンプ：...、
}		画像のコメントを取得
/ image / getAllTags /ジョンソン
{
タグ、タグ、...
}		すべてのタグのリストを取得します
/ image / getAllCrops /ジョンソン
{
タグ名、タグ名、...
}		すべてのメモのリストを取得する
/画像/ selTag /$ _GET ["タグ"]タグを選択-現在の画像のタグとタグのリストを返します
/画像/ selCrop /$ _GET ["作物"]タグを選択-現在の画像のタグとタグのリストを返します
/ image / getFsImg /*ファイルJSONオブジェクト：
{
id：...、
名前：...、
ショートネーム：...、
obj：ファイル”、
タイプ：[ビデオ、オーディオ、...]、
mimetype：...、
サイズ：...、
日付：...、
ico：...、
src：...、
ext：...、
}		選択したタグとタグに一致する画像のリストを取得します。


ストレージAPI


URLリクエスト答え説明
/保存/$ _POST ["id"]
$ _POST ["name"] +ファイル		ファイルを保存
/取得/$ _GET ["id"]ファイルストリーミングファイルを取得
/削除/$ _GET ["id"]ファイルを削除


PS
異なるバックエンドを持つ古いバージョン 。

Source: https://habr.com/ru/post/J221737/

More articles:


All Articles