hogumathi-app/hogumathi_app/templates/partial/timeline-tweet.html

<div class="dtc w-10">
	<img loading="lazy"  src="{{ tweet.avi_icon_url }}" alt="Avi">
	{% if True or enable_select_tweets %}
	<br>
	<input type="checkbox" name="select_tweet" value="{{ tweet.id }}">
	{% endif %}
</div>
<div class="dtc w-90 v-top">
	{% if tweet.title %}
	<h2 class="w-100 mt0">
	<a href="{{ tweet.url }}">
	{{ tweet.title }}
	</a>
	</h2>
	{% endif %}
	<p class="w-100 mt0 pt0">
	<strong><a href="{{ tweet.author_url }}" class="w-100">{{ tweet.display_name }}</a></strong>
	{% if tweet.author_is_verified %}
	<small class="verified">[verified]</small>
	{% endif %}
	
	<a href="{{ tweet.author_url }}" class="silver">@{{ tweet.handle }}</a>
	<a href="{{ tweet.url }}">{{ tweet.created_at }}</a> [<a href="{{ tweet.source_url }}" target="tweet_{{ tweet.id }}">source</a>]
	
	{% if tweet.is_viewed %}
	[viewed]
	{% endif %}
	</p>
	<p class="w-100">
	
	{% if tweet.html %}
		{{ tweet.html | safe }}
	{% else %}
		{{ tweet.text | replace('<', '&lt;') | replace('\n', '<br>') | safe }}
	{% endif %}
	</p>

	{% if tweet.quoted_tweet %}
	<div class="dt qt-box">
	<div class="dt-row">
		{% with tweet = tweet.quoted_tweet %}
			{% include "partial/timeline-tweet.html" %}
		{% endwith %}

	</div>
	</div>
	{% endif %}
	
	{% if not skip_embed_replies %}
	{% if tweet.replied_tweet %}
	<p style="color: silver">
	Replying to:
	</p>
	<div class="reply_to w-100" style="border: 1px solid silver; padding: 6px">
		<div class="dt reply-box">
		<div class="dt-row">
			{% with tweet = tweet.replied_tweet %}
				{% include "partial/timeline-tweet.html" %}
			{% endwith %}

		</div>
		</div>
	</div>
	{% elif tweet.replied_tweet_id %}
	<p style="color: silver">
	Replying to:
	</p>
	{% if tweet.actions.view_replied_tweet %}
	<p class="reply_to w-100" style="border: 1px solid silver; padding: 6px">
		<a href="{{ url_for(tweet.actions.view_replied_tweet.route, **tweet.actions.view_replies.route_params) }}">View in Thread</a>.
	</p>
	{% endif %}
	{% endif %}
	{% endif %}
	
	{% if tweet.note %}
	<p class="note w-100" style="border: 1px solid black; background-color: yellow; padding: 6px">
		{{ tweet.note.replace('\n', '<br>') | safe }}
	</p>
	{% endif %}

	{% if tweet.photos %}
	<p class="w-100">
		<ul>
		{% for photo in tweet.photos %}
			<li><img loading="lazy" class="w-100" src="{{ photo.preview_image_url }}" 
			referrerpolicy="no-referrer" onclick="this.src='{{ photo.url }}'" style="max-height: {{ photo.height }};""></li>
		{% endfor %}
		</ul>

	</p>
	{% endif %}

	{% if tweet.videos %}
	<p class="w-100">
		<p>VIDEOS</p>
		<ul>
		{% for video in tweet.videos %}
			<li><img loading="lazy" class="w-100" 
			       src="{{ video.preview_image_url }}" referrerpolicy="no-referrer"
				   
				   
				   {% if video.image_url %}
				   onclick="this.src='{{ video.image_url }}'; this.onclick = undefined" 
				   {% endif %}
				   
				   {% if video.url %}
				   ondblclick="swapVideoPlayer(this, '{{ video.url }}', '{{ video.content_type }}')"
				   {% endif %}
				   
				   style="max-height: {{ video.height }};"
				   >
				   
				   <dl>
				    {% if video.duration_str  %}
					<dt>Duration</dt>
					<dd>{{ video.duration_str }}</dt>
					{% elif video.duration_ms  %}
					<dt>Duration</dt>
					<dd>{{ video.duration_ms / 1000 / 60 }} minutes</dt>
					{% endif %}
				   </dl>
				   
				   {% if video.public_metrics and video.public_metrics.view_count %}
				   <p class="w-100">
						view count: {{ video.public_metrics.view_count }}
				   </p>
				   {% endif %}
				   
				   </li>
				   
		{% endfor %}
		</ul>

	</p>
	{% endif %}
	
		{% if tweet.card %}
		

		<div class="card-box w-100">
			<div style="display: flex; flex-direction: row;">
				{% if tweet.card.preview_image_url %}
				<img style="margin-right: 4px; max-height: 150px; max-width: 150px;" src="{{ tweet.card.preview_image_url }}">
				{% endif %}
				
				<div style="display: flex; flex-direction: column">
					<span><a href="{{ tweet.card.source_url }}">{{ tweet.card.display_url }}</a></span>
					<span><strong>{{ tweet.card.title }}</strong></span>
					<p>{{ tweet.card.content }}</p>
				</div>
			</div>
		</div>
		{% endif %}
		
		
				

		{% if False and tweet.replied_tweet %}
			<a href="{{ tweet.replied_tweet.url }}">View Parent</a>
			<a href="{{ url_for('.get_tweet_html', tweet_id=tweet.replied_tweet.conversation_id) }}">View Conversation</a>
		{% endif %}
		
		{% if tweet.public_metrics %}
		

		<p class="w-100">
		{% for k, v in tweet.public_metrics.items() %}
			{% if v != None %}
			{{ k.replace('_count', 's').replace('ys', 'ies').replace('_', ' ') }}: {{ v }}, 
			{% endif %}
		{% endfor %}
		
		</p>
		{% endif %}
		
		
		
		{% if tweet.non_public_metrics %}
		

		
		<p class="w-100">
			{% for k, v in tweet.non_public_metrics.items() %}
				{% if v != None %}
				{{ k.replace('_count', 's').replace('ys', 'ies').replace('_', ' ') }}: {{ v }},
				{% endif %}				
			{% endfor %}
			
		</p>
		{% endif %}
		
		{% if tweet.attachments %}
		<ul>
		{% for a in tweet.attachments %}
			{% if a.content_type == 'application/vnd-hogumathi.livestream-details+json' %}
			<li class="livestream-details">
				<dl>
					
					{% if a.content.scheduled_start_time %}
					<dt>Scheduled Start Time</dt>
					<dd>{{ a.content.scheduled_start_time }}</dd>
					{% endif %}
					
					{% if a.content.start_time %}
					<dt>Start Time</dt>
					<dd>{{ a.content.start_time }}</dd>
					{% endif %}
					
					{% if a.content.chat_embed_url %}
					<dt>Chat</dt>
					<dd>
						<iframe class="w-100" height="400" src="{{ a.content.chat_embed_url }}" referrerpolicy="origin"></iframe>
					</dd>
					{% endif %}
					
					
				</dl>
			</li>
			{% else %}
			<li><a href="{{ a.url }}">{{ a.name }}</a> {{ a.content_type }} ({{ a.size }})
			{% endif %}
			</li>
		{% endfor %}
		</ul>
		{% endif %}
	
		{% if show_conversation_id %}
		<p class="w-100">
			Conversation: {{ tweet.conversation_id }}
			
		</p>
		{% endif %}
</div>