Minor ui fixes
This commit is contained in:
WardPearce
@@ -1,11 +1,10 @@
|
||||
<script lang="ts">
|
||||
import Comment_1 from './Comment.svelte';
|
||||
import { getComments } from '$lib/api';
|
||||
import { type Comment, type Comments } from '$lib/api/model';
|
||||
import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
|
||||
import { interfaceLowBandwidthMode } from '$lib/store';
|
||||
import { numberWithCommas } from '$lib/time';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import CommentSelf from './Comment.svelte';
|
||||
|
||||
interface Props {
|
||||
comment: Comment;
|
||||
@@ -16,6 +15,8 @@
|
||||
|
||||
let replies: Comments | undefined = $state(undefined);
|
||||
|
||||
const replyText: string = comment.replies?.replyCount > 1 ? 'replies' : 'reply';
|
||||
|
||||
async function loadReplies(continuation: string) {
|
||||
try {
|
||||
replies = await getComments(videoId, {
|
||||
@@ -39,91 +40,96 @@
|
||||
|
||||
<div class="comment">
|
||||
{#if !$interfaceLowBandwidthMode}
|
||||
<img
|
||||
class="circle small"
|
||||
src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
|
||||
alt="comment profile"
|
||||
/>
|
||||
{/if}
|
||||
<div>
|
||||
<div class="row">
|
||||
<a href={`/channel/${comment.authorId}`}>
|
||||
<p class="no-margin">
|
||||
<span class="bold" class:channel-owner={comment.authorIsChannelOwner}
|
||||
>{comment.author}</span
|
||||
>
|
||||
<div class="comment-header">
|
||||
<img
|
||||
class="circle small"
|
||||
src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
|
||||
alt="comment profile"
|
||||
/>
|
||||
<div class="comment-info">
|
||||
<a href={`/channel/${comment.authorId}`} class="author">
|
||||
<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
|
||||
{comment.author}
|
||||
</span>
|
||||
<span class="secondary-text">{comment.publishedText}</span>
|
||||
</a>
|
||||
<p class="no-margin">
|
||||
{@html commentTimestamps(comment.contentHtml)}
|
||||
</p>
|
||||
</a>
|
||||
{#if comment.isPinned}
|
||||
<i>push_pin</i>
|
||||
{/if}
|
||||
{#if comment.isEdited}
|
||||
<i>edit</i>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="no-margin">
|
||||
{@html commentTimestamps(comment.contentHtml)}
|
||||
</p>
|
||||
<div style="display: flex;">
|
||||
<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
|
||||
{#if comment.creatorHeart}
|
||||
<div>
|
||||
<img
|
||||
class="circle"
|
||||
style="width: 25px; height: 25px"
|
||||
src={proxyGoogleImage(comment.creatorHeart.creatorThumbnail)}
|
||||
alt="Creator profile"
|
||||
/>
|
||||
<i style="font-size: 20px;margin-left: 5px;" class="absolute left red-text bottom fill"
|
||||
>favorite</i
|
||||
>
|
||||
<div class="comment-actions">
|
||||
<p class="no-margin no-padding"><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
|
||||
{#if comment.replies && !replies}
|
||||
<button
|
||||
onclick={async () => loadReplies(comment.replies.continuation)}
|
||||
class="transparent replies"
|
||||
>
|
||||
<i class="white-text">expand_more</i>
|
||||
<span class="white-text">{comment.replies.replyCount} {replyText}</span>
|
||||
</button>
|
||||
{:else if replies}
|
||||
<button onclick={() => (replies = undefined)} class="transparent replies">
|
||||
<i class="white-text">expand_less</i>
|
||||
<span class="white-text">Hide {replyText}</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if replies}
|
||||
{#if replies}
|
||||
<div style="margin-left: 5em;">
|
||||
{#each replies.comments as reply}
|
||||
<Comment_1 comment={reply} {videoId} />
|
||||
<CommentSelf comment={reply} {videoId} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if comment.replies && !replies}
|
||||
<button
|
||||
onclick={async () => loadReplies(comment.replies.continuation)}
|
||||
class="transparent replies"
|
||||
>
|
||||
<i class="primary-text">expand_more</i>
|
||||
<span class="primary-text">{comment.replies.replyCount} {$_('replies')}</span>
|
||||
</button>
|
||||
{:else if replies}
|
||||
<button onclick={() => (replies = undefined)} class="transparent replies">
|
||||
<i class="primary-text">expand_less</i>
|
||||
<span class="primary-text">{$_('hideReplies')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.comment img {
|
||||
margin: 0.5em 1em 0 1em;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
margin-bottom: 0.8em;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.channel-owner {
|
||||
background-color: var(--primary);
|
||||
padding: 0 0.5em;
|
||||
border-radius: 1em;
|
||||
color: var(--surface-variant);
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.comment-header img {
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.comment-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-left: 0;
|
||||
padding: 0.1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,15 +26,17 @@ article, dialog {
|
||||
}
|
||||
|
||||
button.row {
|
||||
padding: 0 !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: var(--on-surface) !important;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button.row:hover {
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
|
||||
@@ -89,21 +89,26 @@
|
||||
<span>{$_('player.share.title')}</span>
|
||||
<menu class="no-wrap mobile">
|
||||
{#if !Capacitor.isNativePlatform()}
|
||||
<a
|
||||
href="#share"
|
||||
<button
|
||||
class="row"
|
||||
onclick={async () => {
|
||||
await Clipboard.write({ string: location.href });
|
||||
}}>{$_('player.share.materialiousLink')}</a
|
||||
}}>{$_('player.share.materialiousLink')}</button
|
||||
>
|
||||
{/if}
|
||||
<a
|
||||
href="#share"
|
||||
onclick={async () => {
|
||||
await Clipboard.write({
|
||||
string: `https://www.youtube.com/playlist?list=${data.playlist.playlistId}`
|
||||
});
|
||||
}}>{$_('player.share.youtubeLink')}</a
|
||||
>
|
||||
<!--Silly hack so svelte doesnt error-->
|
||||
{#if true}
|
||||
<button
|
||||
class="row"
|
||||
onclick={async () => {
|
||||
await Clipboard.write({
|
||||
string: `https://www.youtube.com/playlist?list=${data.playlist.playlistId}`
|
||||
});
|
||||
}}
|
||||
>
|
||||
{$_('player.share.youtubeLink')}
|
||||
</button>
|
||||
{/if}
|
||||
</menu>
|
||||
</button>
|
||||
</article>
|
||||
|
||||
@@ -540,8 +540,8 @@
|
||||
<div class="tooltip">{$_('player.addToPlaylist')}</div>
|
||||
<menu class="no-wrap mobile">
|
||||
{#each personalPlaylists as personalPlaylist}
|
||||
<a
|
||||
href="#add"
|
||||
<button
|
||||
class="row"
|
||||
onclick={async () => await toggleVideoToPlaylist(personalPlaylist.playlistId)}
|
||||
>
|
||||
<nav>
|
||||
@@ -554,7 +554,7 @@
|
||||
<i>add</i>
|
||||
{/if}
|
||||
</nav>
|
||||
</a>
|
||||
</button>
|
||||
{/each}
|
||||
</menu>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user