Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SAAS-991 - initial playlist editor redesign

This commit is contained in:
Duncan Sommerville 2015-08-06 19:16:04 -04:00
parent cc36fcd37b
commit 02d96d7bd0
10 changed files with 190 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
airtime_mvc/application/controllers/LibraryController.php
View File

@ -459,7 +459,9 @@ class LibraryController extends Zend_Controller_Action
}
$this->view->form = $form;
$this->view->dialog = $this->view->render('library/edit-file-md.phtml');
$this->view->id = $file_id;
$this->view->type = "md";
$this->view->html = $this->view->render('library/edit-file-md.phtml');
}
public function getFileMetadataAction()

2
airtime_mvc/application/controllers/NewPlaylistController.php
View File

@ -90,6 +90,7 @@ class NewPlaylistController extends Zend_Controller_Action
$this->view->form = $form;
$this->view->obj = $obj;
$this->view->type = "sb";
$this->view->id = $obj->getId();
if ($isJson) {
@ -99,6 +100,7 @@ class NewPlaylistController extends Zend_Controller_Action
}
} else {
$this->view->obj = $obj;
$this->view->type = "pl";
$this->view->id = $obj->getId();
if ($isJson) {
return $this->view->html = $this->view->render($viewPath);

2
airtime_mvc/application/forms/EditAudioMD.php
View File

@ -171,7 +171,7 @@ class Application_Form_EditAudioMD extends Zend_Form
// Add the submit button
$this->addElement('button', 'editmdsave', array(
'ignore' => true,
'class' => 'btn btn-small',
'class' => 'btn btn-small md-save',
'label' => _('Save'),
'decorators' => array(
'ViewHelper'

102
airtime_mvc/application/views/scripts/playlist/_playlist.phtml
View File

@ -4,73 +4,65 @@ if (isset($this->obj)) {
$count = count($contents);
}
?>
<a href="#" class="close-round" id="lib_pl_close"></a>
<div class="btn-toolbar spl-no-top-margin clearfix">
<?php if (isset($this->obj)) : ?>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Empty playlist content") ?>' type="button" id="pl-bl-clear-content"><?php echo _("Clear") ?></button>
</div>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Shuffle playlist") ?>' type="button" id="playlist_shuffle_button"><?php echo _("Shuffle") ?></button>
</div>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Save playlist") ?>' type="button" id="save_button"><?php echo _("Save") ?></button>
</div>
<div class='btn-group pull-right'>
<button id="spl_delete" class="btn" role="button" aria-disabled="false"><?php echo _("Delete") ?></button>
</div>
<div class='btn-group pull-right'>
<a href="#" id="spl_crossfade" class="btn crossfade-main-button" style="display:<?php echo $count > 0 ?"block;":"none;"?>">
<i class='crossfade-main-icon'></i><span class="ui-button-text"><?php echo _("Playlist crossfade") ?></span>
</a>
</div>
<?php endif; ?>
</div>
<?php if (isset($this->obj)) : ?>
<input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>
<input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"></input>
<input class='obj_type' type='hidden' value='playlist'></input>
<div class="playlist_title">
<h3 id="obj_name">
<a id="playlist_name_display" contenteditable="true"><?php echo $this->escape($this->obj->getName()); ?></a>
</h3>
<h4 id="obj_length"><?php echo $this->length; ?></h4>
</div>
<div id='sp-success' class='success' style='display:none'></div>
<div class="inner_playlist_wrapper">
<input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>
<input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"></input>
<input class='obj_type' type='hidden' value='playlist'></input>
<div class="playlist_title">
<h3 id="obj_name">
<a id="playlist_name_display" contenteditable="true"><?php echo $this->escape($this->obj->getName()); ?></a>
</h3>
<h4 id="obj_length"><?php echo _("Playlist Length: ") . $this->length; ?></h4>
</div>
<div id='sp-success' class='success' style='display:none'></div>
<fieldset class="toggle closed" id="fieldset-metadate_change">
<legend style="cursor: pointer;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><?php echo _("View / edit description"); ?></legend>
<dl class="zend_form">
<dt id="description-label"><label for="description"><?php echo _("Description") ?></label></dt>
<dd id="description-element">
<textarea cols="80" rows="24" id="description" name="description"><?php echo $this->escape($this->obj->getDescription()); ?></textarea>
</dd>
</dl>
</fieldset>
<?php //echo $this->form; ?>
<div id="crossfade_main" class="crossfade-main clearfix" style="display:none;">
<span class="ui-icon ui-icon-closethick sp-closethick-center"></span>
<dl id="spl_editor-main" class="inline-list">
<dt><?php echo _("Fade in: "); ?><span class='spl_cue_hint'>(ss.t)</span></dt>
<dd><span contenteditable="true" class="spl_text_input spl_main_fade_in">00</span></dd>
<dd class="edit-error"></dd>
<dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'>(ss.t)</span></dt>
<dd><span contenteditable="true" class="spl_text_input spl_main_fade_out">00</span></dd>
<dd class="edit-error"></dd>
</dl>
</div>
<div class="btn-toolbar spl-no-margin clearfix">
<?php if (isset($this->obj)) : ?>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Empty playlist content") ?>' type="button" id="pl-bl-clear-content"><?php echo _("Clear") ?></button>
</div>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Shuffle playlist") ?>' type="button" id="playlist_shuffle_button"><?php echo _("Shuffle") ?></button>
</div>
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='<?php echo _("Save playlist") ?>' type="button" id="save_button"><?php echo _("Save") ?></button>
</div>
<div class='btn-group pull-right'>
<a href="#" id="spl_crossfade" class="btn crossfade-main-button" style="display:<?php echo $count > 0 ?"block;":"none;"?>">
<i class='crossfade-main-icon'></i><span class="ui-button-text"><?php echo _("Playlist crossfade") ?></span>
</a>
</div>
<?php endif; ?>
</div>
<div class="clear"></div>
<div class="" style="clear:both; float:none; width:100%;">
<ul class="spl_sortable">
<?php $this->contents = $contents;
echo $this->render('playlist/update.phtml') ?>
</ul>
<?php //echo $this->form; ?>
<div id="crossfade_main" class="crossfade-main clearfix" style="display:none;">
<span class="ui-icon ui-icon-closethick sp-closethick-center"></span>
<dl id="spl_editor-main" class="inline-list">
<dt><?php echo _("Fade in: "); ?><span class='spl_cue_hint'>(ss.t)</span></dt>
<dd><span contenteditable="true" class="spl_text_input spl_main_fade_in">00</span></dd>
<dd class="edit-error"></dd>
<dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'>(ss.t)</span></dt>
<dd><span contenteditable="true" class="spl_text_input spl_main_fade_out">00</span></dd>
<dd class="edit-error"></dd>
</dl>
</div>
</div>
<ul class="spl_sortable">
<?php $this->contents = $contents;
echo $this->render('playlist/update.phtml') ?>
</ul>
<?php else : ?>
<div><?php echo _("No open playlist") ?></div>
<?php endif; ?>
<?php endif; ?>

4
airtime_mvc/application/views/scripts/playlist/_smart-block.phtml
View File

@ -4,7 +4,6 @@ if (isset($this->obj)) {
$count = count($contents);
}
?>
<a href="#" class="close-round" id="lib_pl_close"></a>
<div class="btn-toolbar spl-no-top-margin clearfix">
<?php if (isset($this->obj)) : ?>
<div class='btn-group pull-right'>
@ -13,9 +12,6 @@ if (isset($this->obj)) {
<div class='btn-group pull-right'>
<button class="btn btn-inverse" title='Save smart block&#39s title, description, and criteria' type="button" id="save_button"><?php echo _("Save") ?></button>
</div>
<div class='btn-group pull-right'>
<button id="spl_delete" class="btn" role="button" aria-disabled="false"><?php echo _("Delete") ?></button>
</div>
<div class='btn-group pull-right'>
<a href="#" id="spl_crossfade" class="btn crossfade-main-button" style="display:<?php echo ($this->obj->isStatic() && $count > 0) ?"block;":"none;"?>">
<i class='crossfade-main-icon'></i><span class="ui-button-text"><?php echo _("Playlist crossfade") ?></span>

20
airtime_mvc/application/views/scripts/webstream/_webstream.phtml
View File

@ -1,4 +1,3 @@
<a href="#" class="close-round" id="lib_pl_close"></a>
<div class="btn-toolbar spl-no-top-margin clearfix">
<?php if (isset($this->obj)) : ?>
@ -25,17 +24,14 @@
<h4 id="ws_length"><?php echo $this->obj->getDefaultLength(); ?></h4>
</div>
<fieldset class="toggle" id="fieldset-metadate_change">
<legend style="cursor: pointer;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><?php echo _("View / edit description"); ?></legend>
<dl class="zend_form">
<dt id="description-label"><label for="description"><?php echo _("Description") ?></label></dt>
<dd id="description-element">
<textarea cols="80" rows="24" id="description" name="description"><?php echo $this->obj->getDescription(); ?></textarea>
</dd>
</dl>
</fieldset>
<dl class="zend_form">
<dt id="description-label"><label for="description"><?php echo _("Description") ?></label></dt>
<dd id="description-element">
<textarea cols="80" rows="24" id="description" name="description"><?php echo $this->obj->getDescription(); ?></textarea>
</dd>
</dl>
<dl class="zend_form">
<dt id="submit-label" style="display: none;">&nbsp;</dt>
<div id="url-error" class="errors" style="display:none;"></div>

61
airtime_mvc/public/css/_showbuilder.css
View File

@ -395,8 +395,16 @@ div.ColVis_collectionBackground {
cursor: default;
}
.nav-tabs .close-round {
margin: 1px 0 0 10px;
}
/* Media editors */
textarea {
resize: none;
}
/* File Metadata Editor */
#edit-md-dialog {
@ -434,20 +442,59 @@ div.ColVis_collectionBackground {
/* Playlist/Block/Webstream Editors */
.inner_playlist_wrapper {
flex: 1 100%;
}
.side_playlist {
/*margin-top: 34px;*/
position: relative;
width: 100%; /* Override because we're using flexbox */
overflow-x: hidden;
overflow-y: auto;
position: relative;
overflow: hidden;
flex: 1;
}
.side_playlist h3 {
color: #efefef;
font-size: 20px;
}
.side_playlist .playlist_title h3 a:hover {
background-color: transparent;
}
.side_playlist label, .side_playlist h4, .side_playlist span {
color: #efefef;
font-size: 14px;
font-weight: normal;
}
.editor_pane_wrapper {
padding: 4px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
position: absolute;
right: 4px;
bottom: 4px;
top: 4px;
left: 4px;
}
.spl-no-margin {
margin: 0;
padding-bottom: 4px;
}
.spl_sortable {
position: relative;
overflow: auto;
flex: 1 100%;
padding: 0;
}
.spl_sortable .list-item-container {
@ -530,6 +577,7 @@ div.ColVis_collectionBackground {
padding: 0;
}
/* Hacky stuff here */
#show_builder .dataTables_scrolling {
top: 69px;
}
@ -542,6 +590,7 @@ div.ColVis_collectionBackground {
margin: 0;
padding: 5px;
}
/* ~~~~~~~~~~~~~~~~ */
.datatable tr, .datatable td {
border: none !important;

19
airtime_mvc/public/js/airtime/library/_library.js
View File

@ -182,7 +182,7 @@ var AIRTIME = (function(AIRTIME) {
var selected = mod.getChosenItemsLength(),
check = false;
if (selected === 1) {
if (selected >= 1) {
check = true;
}
@ -364,11 +364,12 @@ var AIRTIME = (function(AIRTIME) {
var openTabObjectIds = $(".obj_id"),
mediaIds = [];
for (var i in aMedia) {
mediaIds.push(aMedia[i].id);
mediaIds.push(aMedia[i].id.toString());
}
openTabObjectIds.each(function(i, el) {
var v = $(el).val();
if ($.inArray(v, mediaIds)) {
if ($.inArray(v, mediaIds) > -1) {
AIRTIME.playlist.fnOpenPlaylist({id: v});
AIRTIME.playlist.closeTab();
}
@ -805,10 +806,12 @@ var AIRTIME = (function(AIRTIME) {
if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
$previouslySelected.prevUntil($tr).each(function (i, el) {
mod.selectItem($(el));
mod.checkItem($(el));
});
} else {
$previouslySelected.nextUntil($tr).each(function (i, el) {
mod.selectItem($(el));
mod.checkItem($(el));
});
}
}
@ -1211,11 +1214,11 @@ var validationTypes = {
};
$(document).ready(function() {
$('#editmdsave').live("click", function() {
$('.active-tab .md-save').live("click", function() {
var file_id = $('#file_id').val(),
data = $("#edit-md-dialog form").serializeArray();
data = $(".active-tab #edit-md-dialog form").serializeArray();
$.post(baseUrl+'library/edit-file-md', {format: "json", id: file_id, data: data}, function() {
$("#edit-md-dialog").dialog().remove();
//$("#edit-md-dialog").dialog().remove();
// don't redraw the library table if we are on calendar page
// we would be on calendar if viewing recorded file metadata
@ -1227,10 +1230,6 @@ $(document).ready(function() {
AIRTIME.playlist.closeTab();
});
$('#editmdcancel').live("click", function() {
$("#edit-md-dialog").dialog().remove();
});
$('#edit-md-dialog').live("keyup", function(event) {
if (event.keyCode === 13) {
$('#editmdsave').click();

93
airtime_mvc/public/js/airtime/library/_spl.js
View File

@ -363,7 +363,7 @@ var AIRTIME = (function(AIRTIME){
nameElement.text(nameElement.text().replace("\n", ""));
var name = $pl.find("#playlist_name_display").text();
$(".nav.nav-tabs .active a").text(name);
$(".nav.nav-tabs .active a > span.tab-name").text(name);
}
function redrawLib() {
@ -435,67 +435,65 @@ var AIRTIME = (function(AIRTIME){
/*
* Should all be moved to builder.js eventually
*/
function openFileMdEditor(json) {
var tabId = $openTabs[json.id];
if ($openTabs[json.id] !== undefined) {
AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
return;
function buildNewTab(json) {
var tabId = $openTabs[json.type + json.id];
if (tabId !== undefined) {
AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
return undefined;
}
$tabCount++;
var wrapper = "<div class='side_playlist pl-content pl-tab-content-" + $tabCount + "'><div class='editor_pane_wrapper'></div></div>",
t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount),
var wrapper = "<div id='pl-tab-content-" + $tabCount + "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>",
t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + $tabCount),
pane = $(".editor_pane_wrapper:last"),
name = pane.append(json.dialog).find("#track_title").val() + $.i18n._(" - Metadata Editor"),
tab = "<li id='pl-tab-" + $tabCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
name = json.type == "md" ? // file
pane.append(json.html).find("#track_title").val() + $.i18n._(" - Metadata Editor")
: pane.append(json.html).find("#playlist_name_display").text(),
tab =
"<li tab-id='" + $tabCount + "' tab-type='" + json.type + "' id='pl-tab-" + $tabCount + "' role='presentation' class='active'>" +
"<a href='#'><span class='tab-name'></span>" +
"<span href='#' class='close-round lib_pl_close'></span>" +
"</a>" +
"</li>",
tabs = $(".nav.nav-tabs");
if (json.id) {
$openTabs[json.id] = $tabCount;
$openTabs[json.type + json.id] = $tabCount;
}
$(".nav.nav-tabs li").removeClass("active");
tabs.append(tab);
var newTab = $("#pl-tab-" + $tabCount);
tabs.find("#pl-tab-" + $tabCount + " span.tab-name").text(name);
newTab.on("click", function() {
AIRTIME.showbuilder.switchTab(t, newTab);
var newTab = $("#pl-tab-" + $tabCount);
AIRTIME.showbuilder.switchTab(t, newTab);
return {wrapper: pane, tab: newTab, pane: t};
}
function openFileMdEditor(json) {
var newTab = buildNewTab(json);
if (newTab === undefined) {
return;
}
newTab.tab.on("click", function() {
AIRTIME.showbuilder.switchTab(newTab.pane, newTab.tab);
});
pane.find("#editmdcancel").on("click", function() {
newTab.wrapper.find(".md-cancel").on("click", function() {
closeTab();
});
AIRTIME.showbuilder.switchTab(t, newTab);
}
function openPlaylist(json) {
var tabId = $openTabs[json.id];
if ($openTabs[json.id] !== undefined) {
AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
var newTab = buildNewTab(json);
if (newTab === undefined) {
return;
}
$tabCount++;
var wrapper = "<div class='side_playlist pl-content pl-tab-content-" + $tabCount + "'><div class='editor_pane_wrapper'></div></div>",
t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount),
pane = $(".editor_pane_wrapper:last"),
name = pane.append(json.html).find("#playlist_name_display").text(),
tab = "<li id='pl-tab-" + $tabCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
tabs = $(".nav.nav-tabs");
if (json.id) {
$openTabs[json.id] = $tabCount;
}
$(".nav.nav-tabs li").removeClass("active");
tabs.append(tab);
var newTab = $("#pl-tab-" + $tabCount);
newTab.on("click", function() {
AIRTIME.showbuilder.switchTab(t, newTab);
newTab.tab.on("click", function() {
AIRTIME.showbuilder.switchTab(newTab.pane, newTab.tab);
$.post(baseUrl+'new-playlist/edit',
{format: "json", id: t.find(".obj_id").val(), type: t.find(".obj_type").val()});
{format: "json", id: newTab.pane.find(".obj_id").val(), type: newTab.pane.find(".obj_type").val()});
});
AIRTIME.showbuilder.switchTab(t, newTab);
AIRTIME.playlist.init();
// functions in smart_blockbuilder.js
@ -516,10 +514,14 @@ var AIRTIME = (function(AIRTIME){
}
function closeTab() {
delete $openTabs[$(".active-tab").find(".obj_id").val()];
$(".nav.nav-tabs .active").remove();
var pane = $(".active-tab"),
tab = $(".nav.nav-tabs .active"),
toPane = pane.next().length > 0 ? pane.next() : pane.prev(),
toTab = tab.next().length > 0 ? tab.next() : tab.prev();
delete $openTabs[tab.attr("tab-type") + pane.find(".obj_id").val()];
tab.remove();
$pl.remove();
AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $("#timeline-tab"));
AIRTIME.showbuilder.switchTab(toPane, toTab);
}
mod.closeTab = function() {
@ -901,7 +903,10 @@ var AIRTIME = (function(AIRTIME){
});
});
$pl.on("click", "#lib_pl_close", function() {
$(".lib_pl_close").unbind().click(function() {
var tabId = $(this).closest("li").attr("tab-id");
AIRTIME.showbuilder.switchTab($("#pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
$pl.hide();
// We need to update the text on the add button
AIRTIME.library.checkAddButton();

28
airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js
View File

@ -303,19 +303,23 @@ var AIRTIME = (function(AIRTIME) {
return;
}
var data = $(".lib-selected:first").data("aData");
var selected = $(".lib-selected");
if (data.ftype === "audioclip") {
$.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){
AIRTIME.playlist.fileMdEdit(json);
//buildEditMetadataDialog(json);
});
} else if (data.ftype === "playlist" || data.ftype === "block") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit');
AIRTIME.playlist.validatePlaylistElements();
} else if (data.ftype === "stream") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'new-webstream/edit');
}
selected.each(function(i, el) {
var data = $(el).data("aData");
if (data.ftype === "audioclip") {
$.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){
AIRTIME.playlist.fileMdEdit(json);
//buildEditMetadataDialog(json);
});
} else if (data.ftype === "playlist" || data.ftype === "block") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit');
AIRTIME.playlist.validatePlaylistElements();
} else if (data.ftype === "stream") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'new-webstream/edit');
}
});
});
mod.createToolbarDropDown();