mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-23 09:53:15 +00:00
wip extract video editor functionality to import into edit tools
This commit is contained in:
Mike Ng
211
templates/web/prod/actions/Tools/videoEditor.html.twig
Normal file
211
templates/web/prod/actions/Tools/videoEditor.html.twig
Normal file
@@ -0,0 +1,211 @@
|
||||
{% set selectionLength = records|length %}
|
||||
{% set isVideo = 'false' %}
|
||||
|
||||
{% if selectionLength == 1 %}
|
||||
{% for record in records %}
|
||||
{% set subdefs = record.get_subdefs() %}
|
||||
{% if record.get_type() == 'video' %}
|
||||
{% set isVideo = 'true' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div id='prod-tool-box' class="PNB10">
|
||||
|
||||
{# jquery Tabs #}
|
||||
<div id="tool-tabs" class="tabs">
|
||||
{# jquery menu #}
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#thumbExtractor">
|
||||
{{ "video tool" | trans }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#rangeExtractor">
|
||||
{{ "video range extractor" | trans }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if selectionLength == 1 %}
|
||||
{% for record in records %}
|
||||
{% if record.get_type() == 'video' %}
|
||||
<div id="thumbExtractor" class="tabBox">
|
||||
<div class="PNB10 main_title">
|
||||
<img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
|
||||
{{ "screenshot video" | trans }}
|
||||
</div>
|
||||
<hr style='margin-top:25px;'/>
|
||||
<div class="PNB part_title_left"></div>
|
||||
|
||||
<div class="PNB frame_video">
|
||||
{% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
|
||||
{% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
|
||||
{% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
|
||||
{% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
|
||||
|
||||
{% set technical_info = record.get_technical_infos %}
|
||||
{% set width = technical_info[dataW].value %}
|
||||
{% set height = technical_info[dataH].value %}
|
||||
|
||||
{% if width and height %}
|
||||
{% set rawRatio = (width / height)|number_format(3, '.') %}
|
||||
{% set rawRatioLength = rawRatio|length %}
|
||||
{% set ratio = rawRatio|slice(0,rawRatioLength-1) %}
|
||||
{% else %}
|
||||
{% set ratio = '' %}
|
||||
{% endif %}
|
||||
|
||||
<video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
|
||||
{% for subdef in previewHtml5 %}
|
||||
<source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
|
||||
{% endfor %}
|
||||
{{ 'No preview available' | trans }}
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="PNB action_bar_left">
|
||||
</div>
|
||||
|
||||
<div id="thumb_camera_button" class="PNB">
|
||||
<img src="/assets/prod/images/ThumbExtractor/camera_button.png"
|
||||
alt="{{ 'take a screenshot' | trans }}"/>
|
||||
</div>
|
||||
|
||||
<div class="PNB part_title_right">
|
||||
</div>
|
||||
|
||||
<div class="PNB frame_canva">
|
||||
<div id="thumb_delete_button">
|
||||
<img src="/assets/prod/images/ThumbExtractor/delete.png"/>
|
||||
</div>
|
||||
<p id='thumb_info'>{{ 'To take a screenshot click on camera' | trans }}</p>
|
||||
<canvas id="thumb_canvas"></canvas>
|
||||
<div id="alt_canvas_container"
|
||||
style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
|
||||
{% for subdef in outputFormats %}
|
||||
<canvas data-width="{{ subdef.get_width() }}" data-name="{{ subdef.get_name() }}"
|
||||
class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="thumb_slider" class="PNB">
|
||||
<div id="thumb_wrapper">
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumb_submit_action PNB">
|
||||
<input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
|
||||
<input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
|
||||
<button id="thumb_validate_button" class="btn btn-inverse"
|
||||
type="button">{{ "validate" | trans }}</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="rangeExtractor" class="">
|
||||
<div class="main_title">
|
||||
<img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
|
||||
{{ "video range extractor" | trans }}
|
||||
</div>
|
||||
<div class="video-range-editor-container"></div>
|
||||
<div class="video-data-container">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Ratio</dt>
|
||||
<dd>{{ ratio }}</dd>
|
||||
<dt>Type</dt>
|
||||
<dd>{{ record.get_mime() }}</dd>
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
|
||||
<dt>{{ 'Images par secondes' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
|
||||
</dd>
|
||||
{% endif %}
|
||||
{% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
|
||||
<dt>{{ 'Codec Audio' | trans }}</dt>
|
||||
<dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
|
||||
{% endif %}
|
||||
<dt>{{ 'Size' | trans }}</dt>
|
||||
<dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
|
||||
(null) %}
|
||||
{% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
|
||||
{% if width is not none and height is not none %}
|
||||
{{ width ~ " x " ~ height }}
|
||||
{% endif %}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# hidden iframe to handle upload #}
|
||||
<iframe
|
||||
id="uploadHdsub"
|
||||
name="uploadHdsub"
|
||||
height="0"
|
||||
width="0"
|
||||
border="0"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var toolsConfig = {
|
||||
selectionLength: {{ selectionLength }},
|
||||
isVideo: '{{ isVideo }}',
|
||||
databaseId: {% if selectionLength == 1 %}{{ record.get_base_id }}{% else %}0{% endif %},
|
||||
databoxId: {% if selectionLength == 1 %}{{ record.get_sbas_id() }}{% else %}0{% endif %},
|
||||
recordId: {% if selectionLength == 1 %}{{ record.get_record_id }}{% else %}0{% endif %},
|
||||
translations: {
|
||||
alertTitle: '{{ "alert" | trans }}',
|
||||
noImgSelected: '{{ "no image selected" | trans }}',
|
||||
processing: '{{ "processing" | trans }}',
|
||||
thumbnailTitle: '{{ 'thumbnail validation' | trans }}',
|
||||
updateTitle: '{{ 'Successful update' | trans }}'
|
||||
},
|
||||
T_fields: {{ JSonFields|raw }},
|
||||
videoEditorConfig: {% if videoEditorConfig is not null %}{{ videoEditorConfig|json_encode()|raw }}{% else %}{}{% endif %},
|
||||
records: [
|
||||
|
||||
{% for record in records %}
|
||||
{
|
||||
id: {{ record.get_record_id }},
|
||||
type: "{{ record.get_type() }}",
|
||||
{% if record.get_type() == 'video' %}
|
||||
{% if selectionLength == 1 %}
|
||||
{% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
|
||||
{% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
|
||||
{% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
|
||||
{% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
|
||||
|
||||
{% set technical_info = record.get_technical_infos %}
|
||||
{% set width = technical_info[dataW].value %}
|
||||
{% set height = technical_info[dataH].value %}
|
||||
|
||||
{% if width and height %}
|
||||
{% set ratio = (width / height)|number_format(2, '.') %}
|
||||
{% else %}
|
||||
{% set ratio = '' %}
|
||||
{% endif %}
|
||||
|
||||
sources: [
|
||||
{% for subdef in previewHtml5 %}
|
||||
{
|
||||
ratio: '{{ ratio }}',
|
||||
framerate: {{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }},
|
||||
type: "{{ subdef.get_mime() }}",
|
||||
src: "{{ subdef.get_url() }}"
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user