From 54c657aa606bf8dbbec1eae137106aee77a02004 Mon Sep 17 00:00:00 2001 From: kts Date: Sat, 24 May 2014 18:35:02 -0700 Subject: [PATCH] Began implementing a centralized CSS file for colors and the like. Modules should not define major styles on their own, but rather extend the CSS defined in main.css with positional data and similar. The largest problem, however, is that elements such as input are multifunctional via their type property and cannot be easily defined in a simple and cross-browser manner. It may be prudent to generalize input elements' style, but add particular classes for types for the Module to use if need be. It may also be wise to enhance(hopefully not bloat) the rendering system so as to allow for module organization and the like. This may be as simple as allowing Modules to be added to other Modules as Submodules. Rendering - and likely processing - would then be called within the context of another Module, thereby allowing greater finesse in element positioning. --- MediaServe.php | 2 + conf/codecs.ini | 4 ++ index.php | 6 +-- main.css | 88 +++++++++++++++++++++++++++++++++++++++++ modules/BasicAuth.php | 14 +++---- modules/FileBrowser.css | 74 +++++++++++++--------------------- modules/FileBrowser.php | 40 +++++++++---------- modules/Player.css | 13 +++++- modules/Player.php | 24 ++++++++++- modules/Playlist.css | 29 ++++++++++++-- modules/Playlist.php | 57 ++++++++++++++++++++++++-- 11 files changed, 264 insertions(+), 87 deletions(-) create mode 100644 conf/codecs.ini diff --git a/MediaServe.php b/MediaServe.php index bc47420..80be3ec 100644 --- a/MediaServe.php +++ b/MediaServe.php @@ -124,11 +124,13 @@ class MediaServe { ================================ */ static function renderProgram() { + echo '
',PHP_EOL; foreach(self::$modules as $module) { if (method_exists('ktk\\MediaServe\\'.$module, 'onRender')) { call_user_func('ktk\\MediaServe\\'.$module.'::onRender'); } } + echo '
',PHP_EOL; } /* diff --git a/conf/codecs.ini b/conf/codecs.ini new file mode 100644 index 0000000..860384b --- /dev/null +++ b/conf/codecs.ini @@ -0,0 +1,4 @@ +mp3 = "audio/mpeg; codecs=mp3" +ogg = "audio/ogg; codecs=vorbis" +webm = "audio/webm; codecs=webm" +wav = "audio/wave; codecs=pcm_u8" diff --git a/index.php b/index.php index 32f368c..dd17cb2 100644 --- a/index.php +++ b/index.php @@ -1,7 +1,7 @@ ktk MediaServe - + - + diff --git a/main.css b/main.css index 4bbed01..108a785 100644 --- a/main.css +++ b/main.css @@ -4,3 +4,91 @@ html,body { height: 100%; width: 100%; } + +/* set base properties */ +#ktk_MediaServe { + position: relative; + font-family: sans-serif; + font-size: 9px; + width: 100%; + height: 100%; +} + +/* Reset general properties */ +#ktk_MediaServe * { + margin: 0; + padding: 0; + border: 0; + text-align: left; + font-size: 100%; +} + +/* Color properties for table elements */ +#ktk_MediaServe table { + background-color: #445; +} + +#ktk_MediaServe th input { + color: #DDB; + background-color: #555; +} + +#ktk_MediaServe div { + background-color: #333; + color: #CCC; +} + +#ktk_MediaServe th, +#ktk_MediaServe td { + background-color: #555 +} + +#ktk_MediaServe button, +#ktk_MediaServe input { + background-color: #666; + color: #CCA; + border-color: #222; +} + +#ktk_MediaServe button:hover, +#ktk_MediaServe input:hover { + background-color: #667; +} + +/* Style properties */ +#ktk_MediaServe button, +#ktk_MediaServe input { + padding: 1%; + border-bottom-width: 1px; + border-bottom-style: solid; + border-right-width: 1px; + border-right-style: solid; +} + +/* header elements */ +h1 { + +} + +/* Table style elements */ + +/* Form submission elements */ +#ktk_MediaServe td { + overflow: hidden; +} + +#ktk_MediaServe label, +#ktk_MediaServe button { + font-size: 100%; +} + +#ktk_MediaServe button:hover, +#ktk_MediaServe input:hover { + cursor: pointer; +} + +#ktk_MediaServe button { + background-color: #777; + color: #CCC; + padding: 1px; +} diff --git a/modules/BasicAuth.php b/modules/BasicAuth.php index ed59607..6906c6b 100644 --- a/modules/BasicAuth.php +++ b/modules/BasicAuth.php @@ -13,13 +13,13 @@ class BasicAuth { } } static public function onRender() { - echo '
'.PHP_EOL; - echo '
'; - echo ' '; - echo ' '; - echo ' '; - echo '
'; - echo '
'; + echo '
',PHP_EOL; + echo '
',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo '
',PHP_EOL; + echo '
',PHP_EOL; } static public function doLogout() { if (ini_get("session.use_cookies")) { diff --git a/modules/FileBrowser.css b/modules/FileBrowser.css index 12ea5f2..c7a3a0b 100644 --- a/modules/FileBrowser.css +++ b/modules/FileBrowser.css @@ -2,70 +2,50 @@ float: left; overflow: auto; margin: auto; - width:200px; + width: 20%; display: block; height:100%; - background-color: #444; overflow-x: hidden; - overflow-y: scroll; -} - -#ktk_MediaServe_FileBrowser * { - margin: 0; - padding: 0; - border: 0; - font-family: console, consolas, terminal; - font-size: 10px; - text-align: left; + overflow-y: auto; } #ktk_MediaServe_FileBrowser h1 { display: block; - height: 24px; + width: 100%; + height: 5%; overflow: hidden; - color: #CCC; } +#ktk_MediaServe_FileBrowser form, #ktk_MediaServe_FileBrowser table { width: 100%; } - -#ktk_MediaServe_FileBrowser table, -#ktk_MediaServe_FileBrowser tr, -#ktk_MediaServe_FileBrowser td, -#ktk_MediaServe_FileBrowser input -{ - background-color: #444; - color: #CCC; +#ktk_MediaServe_FileBrowser table { + table-layout: fixed; } -#ktk_MediaServe_FileBrowser th, +#ktk_MediaServe_FileBrowser tr { + width: 100%; +} + +#ktk_MediaServe_FileBrowser .file_name, +#ktk_MediaServe_FileBrowser #sort_name { + width: 100%; + overflow: hidden; +} + +#ktk_MediaServe_FileBrowser .file_ext, +#ktk_MediaServe_FileBrowser #sort_ext { + width: 15%; + min-width: 20%; +} + +#ktk_MediaServe_FileBrowser th button, #ktk_MediaServe_FileBrowser th input { - min-width: 32px; - background-color:#777; + width: 100%; } +#ktk_MediaServe_FileBrowser td button, #ktk_MediaServe_FileBrowser td input { - width: 160px; - background-color: #111; - color: #CCC; -} - -#ktk_MediaServe_FileBrowser button:hover, -#ktk_MediaServe_FileBrowser input:hover { - background-color: #777; - cursor: pointer; -} - -#ktk_MediaServe_FileBrowser button { - background-color: #777; - color: #CCC; - padding: 1px; -} - - -#ktk_MediaServe_FileBrowser_FilterInput { - border: 1px solid #777; - margin-left: 2px; - width: 115px; + width: 100%; } diff --git a/modules/FileBrowser.php b/modules/FileBrowser.php index 7735bb6..c46d644 100644 --- a/modules/FileBrowser.php +++ b/modules/FileBrowser.php @@ -28,7 +28,7 @@ class FileBrowser { } static function onRender() { - echo '
'.PHP_EOL; + echo '
',PHP_EOL; echo '

',MediaServe::getData('cwd'),'

'.PHP_EOL; if (MediaServe::checkModule("Playlist")) { echo '
'; @@ -46,30 +46,30 @@ class FileBrowser { echo ' '; echo ' '; echo '
'; - echo ' '.PHP_EOL; - echo ' '; - echo ' '; - echo ' '; - echo ' '.PHP_EOL; - echo ' '.PHP_EOL; - echo ' '; - echo ' '; - echo ' '; - echo ' '.PHP_EOL; + echo '
',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; foreach(MediaServe::getData('dirs') as $dir) { - echo ' '.PHP_EOL; + echo ' ',PHP_EOL; } - echo ' '.PHP_EOL; + echo ' ',PHP_EOL; - echo ' '; - echo ' '; - echo ' '; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; foreach(MediaServe::getData('files') as $file) { - echo ' '.PHP_EOL; + echo ' ',PHP_EOL; } - echo ' '.PHP_EOL; - echo '
'.$file[FileBrowser::F_EXT].'
'.$file[FileBrowser::F_EXT].'
'.PHP_EOL; - echo '
'.PHP_EOL; + echo ' ',PHP_EOL; + echo ' ',PHP_EOL; + echo '
',PHP_EOL; } /* COMMAND FUNCTIONS */ diff --git a/modules/Player.css b/modules/Player.css index beae20c..6baa346 100644 --- a/modules/Player.css +++ b/modules/Player.css @@ -1,4 +1,13 @@ -#ktk_MediaServe_Player { +div #ktk_MediaServe_Player { + position: relative; + float:left; background-color: #111; - height: 65%; + min-height: 60%; + min-width: 80%; + display: block; +} + +#ktk_MediaServe_Player audio { + display: block; + width: 100%; } diff --git a/modules/Player.php b/modules/Player.php index 73178ef..20b6938 100644 --- a/modules/Player.php +++ b/modules/Player.php @@ -3,15 +3,37 @@ namespace ktk\MediaServe; class Player { static public function onInit() { + if (!MediaServe::getData('player_file')) { + MediaServe::storeData('player_file', ""); + MediaServe::storeData('player_seek', 0); + MediaServe::storeData('player_play', FALSE); + } } static public function onProcess() { } static public function onRender() { + $codecs = MediaServe::loadConf('codecs'); + $filename = MediaServe::getData('player_file'); + $filetype = $codecs[pathinfo($filename, PATHINFO_EXTENSION)]; + if (!$filetype) { + $filetype = 'application/octet-stream'; + } echo '
',PHP_EOL; - echo "Player goes here"; + echo '',PHP_EOL; echo '
',PHP_EOL; } static public function onClose() { + // if we've started playing, do not auto play again + if (MediaServe::getData('player_play') == TRUE) { + MediaServe::storeData('player_play', FALSE); + } + } + + static public function openFile($file) { + MediaServe::storeData('player_file', $file); + MediaServe::storeData('player_play', TRUE); } } ?> diff --git a/modules/Playlist.css b/modules/Playlist.css index 1de4bbf..3e8573a 100644 --- a/modules/Playlist.css +++ b/modules/Playlist.css @@ -1,10 +1,31 @@ +#ktk_MediaServe_Playlist_Controls { + display: block; + border 1px solid red; + width: 100%; + height: 5%; +} + +#ktk_MediaServe_Playlist_Controls form { + float: left; + height: 100%; +} + #ktk_MediaServe_Playlist * { - font-size: 10px; } #ktk_MediaServe_Playlist { - background-color: #444; - color: #BBA; height: 35%; + width: 80%; overflow-y: auto; - font-size: 12px; +} + +#ktk_MediaServe_Playlist ul { + margin: 0; + padding: 0; +} + +#ktk_MediaServe_Playlist li { +} + +#ktk_MediaServe_Playlist li button { + width: 100%; } diff --git a/modules/Playlist.php b/modules/Playlist.php index 6ebf26b..e9537b7 100644 --- a/modules/Playlist.php +++ b/modules/Playlist.php @@ -2,19 +2,53 @@ namespace ktk\MediaServe; class Playlist { - static private $playlist; + const PATH_SHORT = 0; + const PATH_FULL = 1; + static public function onInit() { if (!MediaServe::getData('playlist')) { MediaServe::storeData('playlist', array()); + MediaServe::storeData('path_detail', self::PATH_SHORT); } } static public function onProcess() { } static public function onRender() { + $detail = MediaServe::getData('path_detail'); + + echo '
',PHP_EOL; + echo '
'; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo ' '; + echo '
'; + echo '
'; + echo ' '; + echo ' '; + echo '
'; + echo '
',PHP_EOL; echo '
',PHP_EOL; - foreach (MediaServe::getData('playlist') as $file) { - echo $file.'
'; + echo '
',PHP_EOL; + echo ' '; + echo ' '; + echo '
    '; + if ($detail == self::PATH_FULL) { + foreach (MediaServe::getData('playlist') as $file) { + echo '
  • '; + echo ''; + echo '
    • '; + } + } else { + foreach (MediaServe::getData('playlist') as $file) { + echo '
  • '; + echo ''; + echo '
    • '; + } } + echo '
',PHP_EOL; + echo '
',PHP_EOL; echo '
',PHP_EOL; } static public function onClose() { @@ -23,5 +57,22 @@ class Playlist { static public function addFile($file) { array_push(MediaServe::getData('playlist'), $file); } + + static public function openFile($file) { + if (MediaServe::checkModule("Player")) { + Player::openFile($file); + } + } + + static public function clearPlaylist() { + MediaServe::storeData('playlist', array()); + } + + static function changePathDetail($detail) { + if ($detail != self::PATH_SHORT && $detail != self::PATH_FULL) { + return NULL; + } + MediaServe::storeData('path_detail', $detail); + } } ?>