apostrophe/views/videoEditor.html

Apostrophe is a user-friendly content management system. You'll need more than this core module. See apostrophenow.org to get started.

{%- extends "baseWidgetEditor.html" -%}

{%- block modalClass -%}
  {{super()}} apos-video-editor apos-ui-modal-no-sidebar
{%- endblock -%}

{%- block modalLabel  -%}
  {{ __('Edit Video') }}
{%- endblock -%}

{%- block modalInstructions -%}
  <p>{{ __('Paste a video link.') }}</p>
{%- endblock -%}

{%- block formEnd -%}
  {%- block previewButton -%}
    <input data-preview="data-preview" type="submit" value="Preview" class="apos-preview-button"/>
    {%- include "progress.html" -%}
  {%- endblock -%}
  <div class="apos-widget-preview-container apos-requires-preview">
    {# We decided to move float preview into the main area editor so #}
    {# this preview is just for things whose appearance is not obvious #}
    {# or which require custom settings be tweaked (example: RSS feed) #}
  </div>
  {# Video chooser #}

  <div class="apos-media-chooser apos-chooser-drag-peer" data-chooser>
    {# I float right #}
    <a href="#" data-next class="apos-next apos-chooser-pager"></a>
    {# I float left #}
    <a href="#" data-previous class="apos-previous apos-chooser-pager"></a>
    {# I sting like a bee #}
    <h5 class="apos-media-chooser-title">{{ __('Recently Added In Video Library') }}:</h5>

    {# UX note: you can pretty up the search submit button but please don't remove it #}
    {# entirely as some users will not press enter. -Tom #}
    <div class="apos-media-chooser-search">
      <label class="apos-chooser-search-label">{{ __('Search') }}</label>
      <input type="text" name="search" class="apos-chooser-search" />
      <input type="submit" class="apos-search-submit" value="Go" name="search-submit" />
      <a href="#" class="apos-remove-search apos-control apos-button" data-remove-search>x</a>
    </div>
    <ul data-chooser-items class="apos-media-chooser-items clearfix">
      {# I am a template. I get cloned and populated by jQuery. If you #}
      {# leave my data attributes intact you can edit me quite a bit. #}
      <li data-chooser-item class="apos-media-chooser-item apos-template">
        <div class="apos-media-chooser-add">+</div>
        <div class="apos-media-chooser-item-box">
          {# jQuery will give this img a proper src #}
          {# Use the smallest possible empty GIF in the meantime #}
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-image />
        </div>
      </li>
    </ul>

  </div>
{%- endblock -%}