apostrophe/views/videoEditor.html

Apostrophe is a user-friendly content management system. This core module of Apostrophe provides rich content editing and essential facilities to integrate Apostrophe into your Express project. Apostrophe also includes simple facilities for storing your r

{%- 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 -%}