blob: 37227a5b0f677ca7a1f1279bc837de37cd2ea223 [file] [log] [blame]
<!-- Copyright 2016 The Chromium Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.
-->
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="files_icon_button.html">
<link rel="import" href="files_metadata_box.html">
<link rel="import" href="files_safe_media.html">
<link rel="import" href="files_tooltip.html">
<link rel="import" href="icons.html">
<dom-module id="files-quick-view">
<link rel="import" type="css" href="files_quick_view.css">
<template>
<dialog id="dialog">
<div id="toolbar">
<div class="buttons-group">
<paper-button on-tap="close" i18n-values="aria-label:QUICK_VIEW_CLOSE_BUTTON_LABEL" tabindex="0" has-tooltip>
<iron-icon icon="files:arrow-back"></iron-icon>
</paper-button>
</div>
<div id="file-path">[[filePath]]</div>
<div class="buttons-group">
<paper-button id="open-button" on-tap="onOpenInNewButtonTap" hidden$="[[!hasTask]]" i18n-values="aria-label:QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL" tabindex="0" has-tooltip>
<iron-icon icon="files:open-in-new"></iron-icon>
</paper-button>
<files-icon-button toggles id="metadata-button" on-tap="onMetadataButtonTap_" active="{{metadataBoxActive}}" i18n-values="aria-label:QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL" tabindex="0" has-tooltip>
</files-icon-button>
</div>
</div>
<div id="mainPanel">
<div id="contentPanel" metadata-box-active$="[[metadataBoxActive]]" on-tap="onContentPanelTap_">
<div id="innerContentPanel" type$="[[type]]" tabindex="0">
<!-- PDF, Text -->
<template is="dom-if" if="[[browsable]]">
<webview on-loadstart='applyTextCss' class="content" src="[[contentUrl]]"></webview>
</template>
<!-- document/HTML -->
<template is="dom-if" if="[[isHtml_(type, subtype)]]">
<files-safe-media hidden="[[!contentUrl]]" type="html" class="content" src="[[contentUrl]]"></files-safe-media>
<template is="dom-if" if="[[!contentUrl]]">
<div generic-thumbnail="[[type]]"></div>
<div class="no-preview">[[noPreviewText]]</div>
</template>
</template>
<!-- Image -->
<template is="dom-if" if="[[isImage_(type)]]">
<files-safe-media hidden="[[!contentUrl]]" type="image" class="content no-close-on-click" src="[[contentUrl]]"></files-safe-media>
<template is="dom-if" if="[[!contentUrl]]">
<div generic-thumbnail="image"></div>
<div class="no-preview">[[noPreviewText]]</div>
</template>
</template>
<!-- Video -->
<template is="dom-if" if="[[isVideo_(type)]]">
<template is="dom-if" if="[[!contentUrl]]">
<div class="thumbnail" hidden="[[!videoPoster]]">
<files-safe-media type="image" id="video-poster" src="[[videoPoster]]"></files-safe-media>
</div>
<div hidden="[[videoPoster]]" generic-thumbnail="video"></div>
<div class="no-preview">[[noPlaybackText]]</div>
</template>
<template is="dom-if" if="[[contentUrl]]">
<files-safe-media type="video" class="content no-close-on-click" controls autoplay="[[autoplay]]" src="[[contentUrl]]" poster="[[videoPoster]]"></files-safe-media>
</template>
</template>
<!-- Audio -->
<template is="dom-if" if="[[isAudio_(type)]]">
<files-safe-media type="image" id="audio-artwork" class="no-close-on-click" src="[[audioArtwork]]" hidden="[[!audioArtwork]]"></files-safe-media>
</template>
<div>
<files-safe-media type="audio" class="no-close-on-click" autoplay="[[autoplay]]" controls src="[[audioUrl_(contentUrl, type)]]" hidden="[[!isAudio_(type)]]"></files-safe-media>
</div>
<template is="dom-if" if="[[isAudio_(type)]]">
<template is="dom-if" if="[[!contentUrl]]">
<div generic-thumbnail="audio"></div>
<div class="no-preview">[[noPlaybackText]]</div>
</template>
</template>
<div hidden="[[!isUnsupported_(type, subtype, browsable)]]">
<div generic-thumbnail$="[[type]]"></div>
<div class="no-preview">[[noPreviewText]]</div>
</div>
</div> <!-- innerContentPanel -->
</div> <!-- contentPanel -->
<files-metadata-box id="metadata-box" hidden$="[[!metadataBoxActive]]"></file-metadata-box>
</div> <!-- mainPanel -->
<files-tooltip></files-tooltip>
</dialog>
</template>
</dom-module>
<script src="files_quick_view.js"></script>