messageAttachment.html

<template name="messageAttachment">
	<div class="attachment">
		<!-- <div>fallback: {{fallback}}</div> -->
		{{#if markdownInPretext}}
			{{{parsedPretext}}}
		{{else}}
			{{pretext}}
		{{/if}}
		<div class="attachment-block">
			<div class="attachment-block-border background-info-font-color" style="background-color: {{color}}"></div>
			{{#if author_name}}
				{{#if author_link}}
					<div class="attachment-author">
						{{#if author_icon}}
							<img src="{{fixCordova author_icon}}">
						{{/if}}
						<a href="{{fixCordova author_link}}" target="_blank" rel="noopener noreferrer">{{author_name}}</a>
						{{#if ts}}
							{{#if message_link}}
								<span class="time-link">
									<a href="{{message_link}}" rel="noopener noreferrer">{{time}}</a>
								</span>
							{{else}}
								<span class="time">
									{{time}}
								</span>
							{{/if}}
						{{/if}}
					</div>
				{{else}}
					<div class="attachment-author">
						{{#if author_icon}}
							<img src="{{fixCordova author_icon}}">
						{{/if}}
						{{author_name}}
					{{#if ts}}
						{{#if message_link}}
							<span class="time-link">
								<a href="{{message_link}}" rel="noopener noreferrer">{{time}}</a>
							</span>
						{{else}}
							<span class="time">
								{{time}}
							</span>
						{{/if}}
					{{/if}}
					</div>
				{{/if}}
			{{/if}}
			{{#if title}}
				<div class="attachment-title">
					{{#if title_link}}
						<a href="{{fixCordova title_link}}" target="_blank" rel="noopener noreferrer">{{#if isFile}} {{_ "Attachment_File_Uploaded"}}: {{/if}}{{title}}</a>
						{{#if title_link_download}}
							<a class="icon-download attachment-download-icon" href="{{fixCordova title_link}}" target="_blank" download="" rel="noopener noreferrer"></a>
						{{/if}}
					{{else}}
						{{title}}
					{{/if}}
					{{#if collapsed}}
						<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
					{{else}}
						<span class="collapse-switch icon-down-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
					{{/if}}
				</div>
			{{/if}}

			{{#unless collapsed}}
				<div class="attachment-flex">
					{{#if thumb_url}}
						<div class="attachment-thumb">
							<img src="{{fixCordova thumb_url}}">
						</div>
					{{/if}}

					{{#if text}}
						<div class="attachment-flex-column-grow attachment-text">
							{{{parsedText}}}
						</div>
					{{/if}}
				</div>
			{{/unless}}

			{{#if image_url}}
				{{#unless mediaCollapsed}}
					<div class="attachment-image inline-image">
					{{#if loadImage}}
						<figure>
							{{> lazyloadImage src=image_url preview=image_preview height=(getImageHeight image_dimensions.height) class="gallery-item" title=title description=description}}
							{{#if labels}}
								<div class="image-labels">
									{{#each labels}}
										<span class="image-label primary-background-color color-content-background-color" style="background-color: {{bgColor}}; color: {{fontColor}};">{{label}}</span>
									{{/each}}
								</div>
							{{/if}}
							{{#if description}}
								<figcaption class="attachment-description">{{description}}</figcaption>
							{{/if}}
						</figure>
					{{else}}
						<div class="image-to-download" data-url="{{image_url}}">
							<i class="icon-picture"></i>
							<div>click to load</div>
						</div>
					{{/if}}
					</div>
				{{/unless}}
			{{/if}}

			{{#if audio_url}}
				{{#unless mediaCollapsed}}
					<div class="attachment-audio">
						<audio controls>
							<source src="{{fixCordova audio_url}}" type="{{audio_type}}" data-description="{{description}}">
							Your browser does not support the audio element.
						</audio>
					</div>
				{{/unless}}
			{{/if}}

			{{#if video_url}}
				{{#unless mediaCollapsed}}
					<div class="attachment-video">
						<video controls class="inline-video">
							<source src="{{fixCordova video_url}}" type="{{video_type}}" data-description="{{description}}">
							Your browser does not support the video element.
						</video>
					</div>
				{{/unless}}
			{{/if}}

			{{#if fields}}
				{{#unless collapsed}}
					<div class="attachment-fields">
						{{#each fields}}
							<div class="attachment-field{{# if short }} attachment-field-short{{/if}}">
								<div class="attachment-field-title">{{title}}</div>
								{{{RocketChatMarkdown value}}}
							</div>
						{{/each}}
					</div>
				{{/unless}}
			{{/if}}

			{{#unless image_url}}
				{{#if description}}
					<div class="attachment-description">{{description}}</div>
				{{/if}}
			{{/unless}}
					
			{{#if actions}}
				<div class="actions-container">
					{{#each actions}}
						{{> messageAction}}
					{{/each}}
				</div>
			{{/if}}

			{{#each actions}}
				{{> messageAction}}
			{{/each}}

			{{#each attachments}}
				{{injectIndex . ../index @index}} {{> messageAttachment}}
			{{/each}}
		</div>
	</div>
</template>