superdesk-ui-framework 4.0.51 → 4.0.53

package/examples/pages/playgrounds/video-editor.html

@@ -1,706 +0,0 @@
-<div class="sd-page-grid--basic" doc-modal>
-    <header class="sd-top-menu">
-        <a href="" class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-        <p class="sd-top-menu__header">Video editor test</p>
-    </header>
-
-    <section class="sd-content sd-page-content--slide-in" ng-class="{
-            'sd-page-content--slide-in--open' : editorOpen}">
-
-        <div class="sd-sidebar-menu sd-page-content__left-tabs">
-            <ul class="authoring-active">
-                <li sd-tooltip="Dashboard" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--dashboard"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li sd-tooltip="Monitoring" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--view"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li sd-tooltip="Highlights" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--marked-star"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li sd-tooltip="Spiked" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--spike"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li class="sd-sidebar-menu__spacer">
-                </li>
-                <li sd-tooltip="Personal" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--personal"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li sd-tooltip="Search" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn">
-                        <i class="sd-sidebar-menu__main-icon big-icon--global-search"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-                <li sd-tooltip="Media archive" flow="right">
-                    <a href="" class="sd-sidebar-menu__btn sd-sidebar-menu__btn--active" ng-click="menuItemActive1 = !menuItemActive1" ng-class="{'sd-sidebar-menu__btn--closed': menuItemActive1}">
-                        <i class="sd-sidebar-menu__main-icon big-icon--picture"></i>
-                        <i class="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div id="leftContent" class="sd-page-content__content-block sd-page-content__content-block--main" ng-class="{'open-filters': leftFilterOpen, 'open-preview': leftPreviewOpen, 'dark-ui': darkUI}">
-            <!-- left content -->
-            <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
-                <div class="subnav__sliding-toolbar" ng-show="select1 || select2 || select3 || select4 || select5 || select6 || select7 || select8">
-                    <div class="sliding-toolbar__inner">
-                        <a class="btn" ng-click="select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false">Cancel</a>
-                        <span class="sliding-toolbar__info-text">1 item selected</span>
-                    </div>
-                    <a class="btn btn--primary" ng-click="openModal('videoModal'); multiEdit = true; select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false; select11 = true; select12 = true; select13 = true; select14 = true">Edit metadata</a>
-                    <a class="btn btn--alert"><i class="icon-trash"></i>Delete</a>
-                </div>
-                
-                <div class="dropdown" dropdown>
-                    <button class="dropdown__toggle navbtn navbtn--text-only dropdown-toggle" dropdown-toggle>Monitoring<span class="dropdown__caret"></span></button>
-                    <ul class="dropdown__menu scrollable">
-                        <li><div class="dropdown__menu-label ng-binding">Monitoring</div></li>
-                        <li><button>Working stage</button></li>
-                        <li><button>Incoming stage</button></li>
-                    </ul>
-                </div>
-                <div class="subnav__spacer subnav__spacer--no-margin"></div>
-                <div class="sd-searchbar" ng-class="{'sd-searchbar--focused': focused}" >
-                    <label for="search-input" class="sd-searchbar__icon"></label>
-                    <input id="search-input"
-                           class="sd-searchbar__input"
-                           type="text"
-                           placeholder="Search media"
-                           ng-keyup="searchOnEnter($event)"
-                           ng-model="query"
-                           tabindex="1"
-                           ng-focus="focused = true">
-                    <button class="sd-searchbar__cancel" ng-if="query">
-                        <i class="icon-remove-sign"></i>
-                    </button>
-                    <button id="sd-searchbar__search-btn" class="sd-searchbar__search-btn" ng-if="focused" tabindex="2">
-                        <i class="big-icon--chevron-right"></i>
-                    </button>
-                </div>
-                <div class="dropdown dropdown--align-right" dropdown>
-                    <button class="dropdown__toggle navbtn" dropdown__toggle>
-                        <i class="icon-dots-vertical"></i>
-                    </button>
-                    <ul class="dropdown__menu">
-                        <li>
-                            <div class="dropdown__menu-label">Actions</div>
-                        </li>
-                        <li class="dropdown__menu-divider"></li>
-                        <li><button>Action 1</button></li>
-                        <li><button>Action 2</button></li>
-                        <li><button>Action 3</button></li>
-                        <li><button>Action 4</button></li>
-                        
-                    </ul>
-                </div>
-                <div class="dropdown dropdown--align-right" dropdown>
-                    <button class="dropdown__toggle navbtn sd-create-btn" dropdown__toggle>
-                        <i class="icon-plus-large"></i>
-                        <span class="circle"></span>
-                    </button>
-                    <ul class="dropdown__menu">
-                        <li>
-                            <div class="dropdown__menu-label">Upload</div>
-                        </li>
-                        <li class="dropdown__menu-divider"></li>
-                        <li>
-                            <button ng-click="openModal('uploadModal')"><i class="icon-plus-sign icon--blue"></i>Upload media</button>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
-                <button class="navbtn navbtn--left navbtn--darker" ng-click="leftFilterOpen = !leftFilterOpen" ng-class="{'navbtn--active': leftFilterOpen}">
-                    <i class="icon-filter-large"></i>
-                </button>
-                <div class="subnav__stretch-bar" ng-init="planningType = 'events-planning'">
-                    <sd-check ng-model="planningType" type="radio" ng-value="all" label-position="inside">all</sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="text" label-position="inside"><i class="icon-text"></i></sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="photo" label-position="inside"><i class="icon-photo"></i></sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="graphic" label-position="inside"><i class="icon-graphic"></i></sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="composite" label-position="inside"><i class="icon-composite"></i></sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="video" label-position="inside"><i class="icon-video"></i></sd-check>
-                    <sd-check ng-model="planningType" type="radio" ng-value="audio" label-position="inside"><i class="icon-audio"></i></sd-check>
-                </div>
-                <div class="subnav__spacer subnav__spacer--no-margin"></div>
-                <div class="subnav__content-bar">
-                    <span>Total:</span> <span class="badge" style="margin: 0 10px 0 6px;">6432</span>
-                    <div class="dropdown dropdown--align-right" dropdown>
-                        <button class="dropdown__toggle" dropdown__toggle>
-                            Updated<span class="dropdown__caret"></span>
-                        </button>
-                        <ul class="dropdown__menu">
-                            <li><button>Updated</button></li>
-                            <li><button>Created</button></li>
-                            <li><button>Urgency</button></li>
-                            <li><button>Category</button></li>
-                            <li><button>Slugline</button></li>
-                            <li><button>Priority</button></li>
-                            <li><button>Genre</button></li>
-                        </ul>
-                    </div>
-                    <a class="icn-btn" sd-tooltip="Descending" flow="bottom" ng-click="sortDesc = !sortDesc" ng-hide="!sortDesc"><i class="icon-descending"></i></a>
-                    <a class="icn-btn" sd-tooltip="Ascending" flow="bottom" ng-click="sortDesc = !sortDesc" ng-show="!sortDesc"><i class="icon-ascending"></i></a>
-
-                </div>
-                <button class="navbtn" ng-click="darkUI = !darkUI">
-                    <i class="icon-adjust"></i>
-                </button>
-                <button class="navbtn">
-                    <i class="icon-th-list"></i>
-                </button>
-            </div>
-            <div class="sd-column-box--3">
-                <div class="sd-filters-panel">
-                    <div class="side-panel side-panel--transparent side-panel--shadow-left">
-                        <div class="side-panel__header side-panel__header--border-b">
-                            <a class="icn-btn side-panel__close" sd-tooltip="Close filters" flow="left" ng-click="leftFilterOpen = !leftFilterOpen"><i class="icon-close-small"></i></a>
-                            <h3 class="side-panel__heading">Advanced filters</h3>  
-                        </div>
-                        <div class="side-panel__content">
-                            <div class="side-panel__content-block">
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <label class="sd-line-input__label">Title</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--is-select sd-line-input--no-margin">
-                                        <label class="sd-line-input__label">Source</label>
-                                        <select class="sd-line-input__select">
-                                            <option value="">Select ingest source...</option>
-                                            <option value="">Associated Press</option>
-                                            <option value="">Reuters</option>
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <label class="sd-line-input__label">Location</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--no-margin sd-line-input--with-button">
-                                        <span class="sd-line-input__plus-btn"></span>
-                                        <label class="sd-line-input__label">Category</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--no-margin sd-line-input--with-button">
-                                        <span class="sd-line-input__plus-btn"></span>
-                                        <label class="sd-line-input__label">Subject</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--is-select ">
-                                        <label class="sd-line-input__label">Usage right</label>
-                                        <select class="sd-line-input__select">
-                                            <option value="">--- Not selected ---</option>
-                                            <option value="single">Single usage</option>
-                                            <option value="time">Time restricted</option>
-                                            <option value="bananas">Indefinite usage</option>
-                                            <option value="indefinite">Pears</option>
-                                        </select>
-                                        <span class="sd-line-input__hint">Dolor in hendrerit.</span>
-                                    </div>
-                                </div>
-                                <div class="form__row form__row--flex">
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <a class="icn-btn sd-line-input__icon-right"><i class="icon-calendar"></i></a>
-                                        <label class="sd-line-input__label">From</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <a class="icn-btn sd-line-input__icon-right"><i class="icon-time"></i></a>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row form__row--flex">
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <a class="icn-btn sd-line-input__icon-right"><i class="icon-calendar"></i></a>
-                                        <label class="sd-line-input__label">To</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                    <div class="sd-line-input sd-line-input--no-margin">
-                                        <a class="icn-btn sd-line-input__icon-right"><i class="icon-time"></i></a>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <sd-check ng-model="abc2">Check me!</sd-check>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="side-panel__footer side-panel__footer--button-box">
-                            <div class="flex-grid flex-grid--boxed-small flex-grid--wrap-items flex-grid--small-2">
-                                <a class="btn btn--hollow">Clear</a>
-                                <a class="btn btn--primary">Submit</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="sd-column-box__main-column">
-                    <div class="sd-list-header">
-                        <span class="sd-list-header__name"><a href="">National desk</a> / <a href="">Working stage</a></span>
-                    </div>
-                    <!-- List item view -->
-                
-                    <div class="sd-list-item-group sd-list-item-group--space-between-items" ng-class="{'sd-list-item-group--dark-ui' : darkUI}">
-                        <!-- list item  1 -->
-                        <div class="sd-list-item sd-shadow--z1 locked" ng-class="{'sd-list-item--selected' : select1, 'sd-list-item--activated' : selectThis1}">
-                            <div class="sd-list-item__border"></div>
-                            <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : select1}">
-                                <div class="sd-list-item__checkbox-container">
-                                    <sd-check ng-model="select1"></sd-check>
-                                </div>
-                                <span class="icn-mix sd-list-item__item-type">
-                                    <i class="icon-video"></i>
-                                </span>
-                            </div>
-                            <div class="sd-list-item__column">
-                                <div class="sd-list-item__row">
-                                    <span class="badge badge--success">1</span>
-                                    <span class="badge badge--warning badge--square ">3</span>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" ng-click="leftPreviewOpen = !leftPreviewOpen; selectThis1 = !selectThis1">
-                                <div class="sd-list-item__row">
-                                    <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a slugline</span>Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Praesent nonummy mi in odio. <button class="btn btn--sd-green btn--hollow btn--small sd-margin-l--1" ng-class="{'btn--ui-dark': darkUI}" ng-click="openModal('videoModal')">video editor test</button></span>
-                                    <time title="March 22, 2017 11:08 AM">Thursday, 13:29</time>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__action-menu">
-                                <button class="icn-btn">
-                                    <i class="icon-dots-vertical"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- list item  2 -->
-                        <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--selected' : select2}">
-                            <div class="sd-list-item__border"></div>
-                            <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : select2}">
-                                <div class="sd-list-item__checkbox-container">
-                                    <sd-check ng-model="select2"></sd-check>
-                                </div>
-                                <span class="icn-mix sd-list-item__item-type">
-                                    <i class="icon-video"></i>
-                                </span>
-                            </div>
-                            <div class="sd-list-item__column">
-                                <div class="sd-list-item__row">
-                                    <span class="badge badge--primary">2</span>
-                                    <span class="badge badge--alert badge--square">4</span>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
-                                <div class="sd-list-item__row">
-                                    <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a slugline</span>In ac dui quis mi consectetuer lacinia. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.</span>
-                                    <time title="March 22, 2017 11:08 AM">Thursday, 13:06</time>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__action-menu">
-                                <button class="icn-btn">
-                                    <i class="icon-dots-vertical"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- list item  3 -->
-                        <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--selected' : select4}">
-                            <div class="sd-list-item__border"></div>
-                            <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : select4}">
-                                <div class="sd-list-item__checkbox-container">
-                                    <sd-check ng-model="select4"></sd-check>
-                                </div>
-                                <span class="icn-mix sd-list-item__item-type">
-                                    <i class="icon-video"></i>
-                                </span>
-                            </div>
-                            <div class="sd-list-item__column">
-                                <div class="sd-list-item__row">
-                                    <span class="badge badge--primary">2</span>
-                                    <span class="badge badge--warning badge--square">3</span>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
-                                <div class="sd-list-item__row">
-                                    <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a slugline</span>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.</span>
-                                    <time title="March 22, 2017 11:08 AM">Thursday, 12:56</time>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__action-menu">
-                                <button class="icn-btn">
-                                    <i class="icon-dots-vertical"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- list item  4 -->
-                        <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--selected' : select5}">
-                            <div class="sd-list-item__border"></div>
-                            <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : select5}">
-                                <div class="sd-list-item__checkbox-container">
-                                    <sd-check ng-model="select5"></sd-check>
-                                </div>
-                                <span class="icn-mix sd-list-item__item-type">
-                                    <i class="icon-video"></i>
-                                </span>
-                            </div>
-                            <div class="sd-list-item__column">
-                                <div class="sd-list-item__row">
-                                    <span class="badge badge--light">&nbsp;</span>
-                                    <span class="badge badge--square">5</span>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
-                                <div class="sd-list-item__row">
-                                    <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a slugline</span>Pellentesque auctor neque nec urna. Vestibulum turpis sem, aliquet eget lobortis...</span>
-                                    <time title="March 22, 2017 11:08 AM">Thursday, 12:37</time>
-                                </div>
-                            </div>
-                            <div class="sd-list-item__action-menu">
-                                <button class="icn-btn">
-                                    <i class="icon-dots-vertical"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-                <div class="sd-preview-panel" ng-class="{'sd-preview-panel--dark-ui' : darkUI}">
-                    <div class="side-panel side-panel--shadow-right" ng-class="{'side-panel--dark-ui' : darkUI}">
-                        <div class="side-panel__header">
-                            <div class="side-panel__tools">
-                                <a class="icn-btn" sd-tooltip="Edit details" flow="top" ng-click="editorOpen = true; leftPreviewOpen = false"><i class="icon-pencil"></i></a>
-                                <a class="icn-btn" sd-tooltip="Close details" flow="top" ng-click="leftPreviewOpen = !leftPreviewOpen; selectThis1 = !selectThis1"><i class="icon-close-small"></i></a>
-                            </div>
-                            <ul class="nav-tabs" ng-class="{'nav-tabs--ui-dark' : darkUI}">
-                                <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'event-details'}" class="nav-tabs__tab">
-                                    <button ng-click="tab = 'event-details'" class="nav-tabs__link"><span translate="">Content</span></button>
-                                </li>
-                                <li ng-class="{'nav-tabs__tab--active': tab === 'event-history'}" class="nav-tabs__tab">
-                                    <button ng-click="tab = 'event-history'" class="nav-tabs__link"><span translate="">History</span></button>
-                                </li>
-                            </ul> 
-                        </div>
-                        <div class="side-panel__content" ng-if="!tab || tab === 'event-details'">
-                            <div class="side-panel__content-block side-panel__content-block--pad-small side-panel__content-block--flex">
-                                <div class="side-panel__content-block-inner side-panel__content-block-inner--grow">
-                                    <p class="sd-text__date-and-author"><time>Created 23.08.2017 by </time> <span class="sd-text__author">Mika Karapet</span></p> 
-                                    <p class="sd-text__date-and-author"><time>Updated 3 hours ago by</time> <span class="sd-text__author">John Doe</span></p>
-                                </div>
-                                <div class="side-panel__content-block-inner side-panel__content-block-inner--right">
-                                    <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                                </div>
-                            </div>
-                            <div class="side-panel__content-block side-panel__content-block--image">
-                                <a class="icn-btn side-panel__image-actions" ng-click="openModal('videoModal')">
-                                    <i class="icon-fullscreen"></i>
-                                </a>
-                                <img src="/d_trump.jpg" alt="test">
-                            </div>
-                            <div class="side-panel__content-block">
-                                <div class="form__row">
-                                    <label class="form-label form-label--light">Slugline</label>
-                                    <p class="sd-text__slugline">This is a slugline</p>
-                                </div>
-                                <div class="form__row">
-                                    <label class="form-label form-label--light">Description</label>
-                                    <p>Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Praesent nonummy mi in odio.</p>
-                                </div>
-
-                                <div sd-toggle-box data-title="Details" data-style="circle">
-                                    <div class="form__row">
-                                        <label class="form-label form-label--light">Usage right</label>
-                                        <p>Single usage</p>
-                                    </div>
-                                    <div class="form__row">
-                                        <label class="form-label form-label--light">Category</label>
-                                        <p>Some category</p>
-                                    </div>
-                                    <div class="form__row">
-                                        <label class="form-label form-label--light">Subject</label>
-                                        <p>Arts, culture and entertainment, Music</p>
-                                    </div>
-                                    <div class="form__row">
-                                        <label class="form-label form-label--light">Long Description</label>
-                                        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-                                    </div>
-                                    <div class="form__row">
-                                        <label class="form-label form-label--light">Internal Note</label>
-                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing.</p>
-                                    </div>
-                                </div>
-                                <h3 class="side-panel__heading side-panel__heading--big" ng-hide="multiEdit">Related items</h3>
-                                <div class="sd-grid-list sd-grid-list--x-small sd-margin-y--2" ng-hide="multiEdit">
-                                    <!-- related item 1 -->
-                                    <div class="sd-grid-item sd-grid-item--small sd-grid-item--with-click">
-                                        <div class="sd-grid-item__thumb">
-                                            <img src="/d_trump_2.jpg" alt="test">
-                                        </div>
-                                        <div class="sd-grid-item__content">
-                                            <time title="20.11.2017">20.11.2017</time>
-                                            <span class="sd-grid-item__slugline">This is a slugline</span>
-                                        </div>
-                                    </div>
-                                    <!-- related item 2 -->
-                                    <div class="sd-grid-item sd-grid-item--small sd-grid-item--with-click">
-                                        <div class="sd-grid-item__thumb">
-                                            <img src="/bill.jpg" alt="test">
-                                        </div>
-                                        <div class="sd-grid-item__content">
-                                            <time title="20.11.2017">20.11.2017</time>
-                                            <span class="sd-grid-item__slugline">This is a slugline</span>
-                                        </div>
-                                    </div>
-                                    <!-- related item 3 -->
-                                    <div class="sd-grid-item sd-grid-item--small sd-grid-item--with-click">
-                                        <div class="sd-grid-item__thumb">
-                                            <img src="/hillary.jpg" alt="test">
-                                        </div>
-                                        <div class="sd-grid-item__content">
-                                            <time title="20.11.2017">20.11.2017</time>
-                                            <span class="sd-grid-item__slugline">This is a slugline</span>
-                                        </div>
-                                    </div>
-                                    <!-- related item 4 -->
-                                    <div class="sd-grid-item sd-grid-item--small sd-grid-item--with-click">
-                                        <div class="sd-grid-item__thumb">
-                                            <img src="/bush_1.jpg" alt="test">
-                                        </div>
-                                        <div class="sd-grid-item__content">
-                                            <time title="20.11.2017">20.11.2017</time>
-                                            <span class="sd-grid-item__slugline">This is a slugline</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="side-panel__content" ng-if="tab === 'event-history'">
-                            <div class="side-panel__content-block">
-                                <ul class="simple-list simple-list--dotted simple-list--no-padding">
-                                    <li class="simple-list__item">
-                                        <p><strong>Created by</strong> Mika Karapet</p>
-                                        <time class="small">Tuesday, 12. September 13:10</time>
-                                    </li>
-                                    <li class="simple-list__item">
-                                        <p><strong>Coverage created by</strong> Vince Ryan</p>
-                                        <time class="small">Tuesday, 12. September 13:13</time>
-                                    </li>
-                                    <li class="simple-list__item">
-                                        <p><strong>Updated by</strong> Karel Petrak</p>
-                                        <time class="small">Tuesday, 12. September 13:13</time>
-                                    </li>
-                                    <li class="simple-list__item">
-                                        <p><strong>Coverage updated by</strong> John Doe</p>
-                                        <time class="small">Tuesday, 12. September 13:21</time>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="side-panel__footer">
-
-                        </div>
-                    </div>      
-                </div>
-            </div>
-            <!-- END left content -->
-        </div>
-
-        <!-- SPLIT CONTENT -->
-        <div id="editPane" 
-             class="sd-edit-panel sd-page-content__content-block sd-page-content__content-block--right sd-page-content__content-block--30-slide" ng-class="{'open-filters': rightFilterOpen, 'open-preview': rightPreviewOpen}">
-            <!-- Eitor content -->
-
-            <div class="side-panel side-panel--shadow-right" ng-if="!itemType || itemType === 'planning'" ng-include="'playgrounds/photo-snippets/edit-photo-metadata.html'"></div>
-            <!-- END Editor content -->
-        </div>
-    </section>
-    <footer class="sd-bottom-bar">
-        This is the optional footer.
-    </footer>
-
-        <!-- //////////////////////////////////////////////////////////////////////// Video Edit modal //////////////////////////////////////////////////////////////////////// -->
-    <div sd-modal data-model="videoModal" class="modal--fullscreen modal--dark-ui" ng-init="showMetadata = true">
-        <div class="modal__header modal__header--flex">
-            <div class="modal__sliding-toolbar" ng-show="!contentChanged">
-                <div class="sliding-toolbar__inner"></div>
-                <a class="btn" ng-click="contentChanged = true">Cancel</a>
-                <a class="btn btn--primary" ng-click="contentChanged = true">Save</a>
-            </div>
-            <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'viewVideo'" translate>Video details</h3>
-            <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'editVideo'" translate>Edit video</h3>
-            <div class="modal__header-buttons  modal__header-buttons--center modal__header-element-grow button-nav" ng-init="nav = 'viewVideo'">
-                <button class="button-nav__btn" ng-click="nav = 'viewVideo'; showMetadata = true" ng-class="{'button-nav__btn--active' : nav === 'viewVideo'}">Details / Metadata</button>
-                <button class="button-nav__btn" ng-click="nav = 'editVideo'; showMetadata = false" ng-class="{'button-nav__btn--active': nav === 'editVideo'}">Edit video</button>
-            </div>
-            <div class="modal__header-buttons modal__header-buttons--right">
-                <button class="btn btn--primary btn--ui-dark btn--hollow" ng-click="closeModal('videoModal')">Done</button>
-            </div>
-        </div>
-        <div class="modal__body modal__body--no-padding">
-            <div class="sd-column-box--2">
-                <div class="sd-column-box__main-column sd-column-box__main-column--photo-preview">
-                    <a class="sd-photo-preview__slide-in-button" ng-show="!showMetadata && nav === 'viewVideo'" ng-click="showMetadata = !showMetadata" data-sd-tooltip="Open metadata" data-flow="left">
-                        <i class="icon-backward-thin"></i>
-                    </a>
-
-                    <div class="sd-photo-preview" ng-class="{'sd-photo-preview--view-video' : nav === 'viewVideo'}" ng-show="nav === 'viewVideo'">
-                        <div class="sd-photo-preview__video" >
-                            <div class="sd-photo-preview__video-inner">
-                                <div class="sd-photo-preview__video-container">
-                                    <video controls="" sd-sources="" data-renditions="item.renditions" class="ng-isolate-scope"><source src="/ferocious_beast.webm" type="video/webm"></video>
-                                </div>
-                                <div class="sd-photo-preview__video-tools sd-photo-preview__video-tools--blank">
-                                    <span class="sd-photo-preview__label mlr-auto">DJI_0270.mp4</span>
-                                </div>  
-                            </div>               
-                        </div>
-                    </div>
-
-                    <div class="sd-photo-preview" ng-class="{'sd-photo-preview--edit-video' : nav === 'editVideo'}" ng-show="nav === 'editVideo'">
-                        <div class="sd-photo-preview__video">
-                            <div class="sd-photo-preview__video-inner">
-                                <div class="sd-photo-preview__video-container">
-                                    <video controls="" sd-sources="" data-renditions="item.renditions" class="ng-isolate-scope"><source src="/ferocious_beast.webm" type="video/webm"></video>
-                                </div>                 
-                                <div class="sd-photo-preview__video-tools">
-                                    <button class="btn btn--ui-dark btn--hollow btn--icon-only btn--large">
-                                        <i class="icon-chevron-right-thin"></i>
-                                    </button>
-                                    <button class="btn btn--ui-dark btn--hollow btn--icon-only btn--large">
-                                        <i class="icon-crop"></i>
-                                    </button>
-                                    <button class="btn btn--ui-dark btn--hollow btn--icon-only btn--large">
-                                        <i class="icon-rotate-left"></i>
-                                    </button>
-                                    <span class="sd-photo-preview__label mlr-auto">DJI_0270.mp4</span>
-                                    <div>
-                                        <span class="sd-text--bold-s">Quality:</span>
-                                        <div class="dropdown dropdown--align-right" dropdown>
-                                            <button class="dropdown__toggle dark-ui" dropdown__toggle>
-                                                Same<span class="dropdown__caret dropdown__caret--white"></span>
-                                            </button>
-                                            <ul class="dropdown__menu">
-                                                <li><button>Same</button></li>
-                                                <li><button>High</button></li>
-                                                <li><button>Low</button></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </div>
-                        <!-- VIDEO Frames timeline  -->
-                        <div class="sd-photo-preview__thumb-strip sd-photo-preview__thumb-strip--video">
-                            <div class="sd-photo-preview__thumbnail-edit">
-                                <div class="sd-photo-preview__thumbnail-edit-label">Video thumbnail</div>
-                                <div class="image-overlay">
-                                    <div class="image-overlay__button-block">
-                                        <a class="image-overlay__button" sd-tooltip="Use current frame">
-                                            <i class="icon-photo"></i>
-                                        </a>
-                                        <a class="image-overlay__button" sd-tooltip="Upload image">
-                                            <i class="icon-upload"></i>
-                                        </a>
-                                        <a class="image-overlay__button" sd-tooltip="Edit thumbnail">
-                                            <i class="icon-pencil"></i>
-                                        </a>
-                                    </div>
-                                </div>
-                                <img src="/d_trump.jpg" alt="Trt">
-                            </div>
-                            <div class="sd-photo-preview__video-frames">
-
-                            </div>
-                        </div>
-                        <!-- END VIDEO Frames timeline  -->
-                    </div>
-
-                </div>
-                <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large sd-column-box__slide-in-column--dark-ui" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}">
-                    <div class="sd-column-box__slide-in-column-inner sd-slide-in-panel">
-
-                        <div class="sd-slide-in-panel__header">
-                            <h3 class="sd-slide-in-panel__heading">Metadata</h3>
-                            <a class="icn-btn sd-slide-in-panel__close" sd-tooltip="Close details" flow="top" ng-click="showMetadata = !showMetadata"><i class="icon-close-small"></i></a>
-                        </div>
-                        <div class="sd-slide-in-panel__content">
-                            <div class="sd-slide-in-panel__content-block sd-slide-in-panel__content-block--first">
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed">
-                                        <label class="sd-line-input__label">Title</label>
-                                        <input class="sd-line-input__input" type="text" value="Image title" >
-                                        <div class="sd-line-input__hint">Hendrerit in vulputate velit esse molestie consequat.</div>
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed">
-                                        <label class="sd-line-input__label">Description</label>
-                                        <textarea class="sd-line-input__input"></textarea>
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--with-button sd-line-input--dark-ui sd-line-input--boxed">
-                                        <span class="sd-line-input__plus-btn"></span>
-                                        <label class="sd-line-input__label">Category</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--with-button sd-line-input--dark-ui sd-line-input--boxed">
-                                        <span class="sd-line-input__plus-btn"></span>
-                                        <label class="sd-line-input__label">Subject</label>
-                                        <input class="sd-line-input__input" type="text">
-                                    </div>
-                                </div>
-                                <div class="form__row">
-                                    <div class="sd-line-input sd-line-input--is-select sd-line-input--dark-ui sd-line-input--boxed">
-                                        <label class="sd-line-input__label">Usage right</label>
-                                        <select class="sd-line-input__select">
-                                            <option value="">--- Not selected ---</option>
-                                            <option value="single">Single usage</option>
-                                            <option value="time">Time restricted</option>
-                                            <option value="bananas">Indefinite usage</option>
-                                            <option value="indefinite">Pears</option>
-                                        </select>
-                                        <span class="sd-line-input__hint">Dolor in hendrerit.</span>
-                                    </div>
-                                </div>
-                                <div class="form__row" ng-init="contentChanged = true">
-                                    <span ng-model="contentChanged" sd-switch></span><label>For publication</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div> 
-                </div>
-
-            </div>
-        </div>
-    </div>
-    <!-- //////////////////////////////////////////////////////////////////////// END Video Edit modal //////////////////////////////////////////////////////////////////////// -->
-
-</div>