Merge pull request #9 from misabiko/dev

Load article sidebar menu, compact option and mute videos option
misabiko · Dec 28, 2023 · 7c3e078 · 7c3e078
2 parents c5c191c + dd56e1f
commit 7c3e078
Show file tree

Hide file tree

Showing 24 changed files with 212 additions and 19 deletions.
diff --git a/src/articles/ArticleComponent.svelte b/src/articles/ArticleComponent.svelte
@@ -35,6 +35,7 @@
 			loadingStates.push(loadingStore.getLoadingState(actualArticle.idPair, mediaIndex, timelineProps.shouldLoadMedia))
 	}
 
+	//TODO Properly test media loading
 	afterUpdate(() => {
 		//TODO Use mediaRefs?
 		const articleMediaEls = divRef?.querySelectorAll('.articleMedia')

diff --git a/src/articles/gallery/GalleryArticleView.svelte b/src/articles/gallery/GalleryArticleView.svelte
@@ -138,6 +138,7 @@
 					class='articleMedia'
 					controls
 					preload='auto'
+					muted={timelineProps.muteVideos}
 					on:click|preventDefault={() => onMediaClick(actualArticle.idPair, i)}
 					on:loadeddata={() => isLoading ? loadingStore.mediaLoaded(actualArticle.idPair, i) : undefined}
 					on:load={() => isLoading ? loadingStore.mediaLoaded(actualArticle.idPair, i) : undefined}

diff --git a/src/articles/index.ts b/src/articles/index.ts
@@ -233,6 +233,7 @@ export function getDerivedArticleWithRefs(a: DerivedArticleWithRefs): ArticleWit
 //Props for every article in the timeline
 export type TimelineArticleProps = {
 	animatedAsGifs: boolean;
+	muteVideos: boolean;
 	compact: boolean;
 	hideText: boolean;
 	shouldLoadMedia: boolean;

diff --git a/src/articles/social/SocialArticleView.svelte b/src/articles/social/SocialArticleView.svelte
@@ -28,6 +28,8 @@
 	let minimized = false
 	const isArticleRepost = articleProps.type === 'reposts'
 
+	let compact: boolean | null = null;
+
 	function onUsernameClick(clickedArticle: Article) {
 		if (!clickedArticle.author)
 			return
@@ -243,6 +245,7 @@
 							article={quoted}
 							{timelineProps}
 							onMediaClick={index => onMediaClick(actualArticle.idPair, index)}
+							{compact}
 						/>
 					{/if}
 					<SocialNav
@@ -252,6 +255,7 @@
 						{modal}
 						{onLogData}
 						{onLogJSON}
+						{compact}
 					/>
 				</div>
 			{/if}
@@ -262,6 +266,7 @@
 				repost={isArticleRepost ? rootArticle : undefined}
 				{onLogData}
 				{onLogJSON}
+				bind:compact
 			/>
 		</div>
 	</div>
@@ -274,6 +279,7 @@
 			bind:divRef
 			bind:mediaRefs
 			bind:loadingStates
+			{compact}
 		/>
 	{/if}
 </div>
diff --git a/src/articles/social/SocialMedia.svelte b/src/articles/social/SocialMedia.svelte
@@ -17,6 +17,8 @@
 	export let mediaRefs: (HTMLImageElement | HTMLVideoElement)[] = [];
 	export let loadingStates: LoadingState[] | null = null;
 
+	export let compact: boolean | null;
+
 	afterUpdate(() => {
 		const articleMediaEls = divRef?.querySelectorAll('.articleMedia')
 		if (articleMediaEls) {
@@ -39,6 +41,11 @@
 		margin-top: 1rem;
 	}
 
+	.socialMedia.socialMediaCompact {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
 	.socialMedia video {
 		 width: 100%;
 		 border-radius: 8px;
@@ -51,6 +58,15 @@
 		border-radius: 8px;
 	}
 
+	.socialMediaCompact .imagesHolder, .socialMediaCompact video.articleMedia {
+		width: 50%;
+		aspect-ratio: 1;
+	}
+
+	.socialMediaCompact .imagesHolder:only-child, .socialMediaCompact video.articleMedia:only-child {
+		width: unset;
+	}
+
 	.imagesHolder:not(:last-child) {
 		margin-bottom: 2px;
 	}
@@ -67,6 +83,7 @@
 
 	.moreMedia {
 		display: flex;
+		width: 100%;
 	}
 	.moreMedia > button {
 		margin-left: auto;
@@ -75,7 +92,7 @@
 	}
 </style>
 
-<div class='socialMedia' bind:this={divRef}>
+<div class='socialMedia' class:socialMediaCompact={compact ?? timelineProps.compact} bind:this={divRef}>
 	{#each article.medias.slice(0, !showAllMedia && timelineProps.maxMediaCount !== null ? timelineProps.maxMediaCount : undefined) as media, index (index)}
 		{@const isLoading = loadingStates && loadingStates[index] === LoadingState.Loading}
 		{#if loadingStates && loadingStates[index] === LoadingState.NotLoaded}
@@ -109,6 +126,7 @@
 					class='articleMedia'
 					controls
 					preload='auto'
+					muted={timelineProps.muteVideos}
 					on:click|preventDefault={() => onMediaClick(index)}
 					bind:this={mediaRefs[index]}
 			>

diff --git a/src/articles/social/SocialNav.svelte b/src/articles/social/SocialNav.svelte
@@ -18,6 +18,8 @@
 	export let onLogData: () => void
 	export let onLogJSON: () => void
 
+	export let compact: boolean | null;
+
 	let actions = Object.values(getServices()[article.idPair.service].articleActions)
 		.filter(a => a.icon !== undefined)
 		.sort((a, b) => a.index - b.index)
@@ -126,7 +128,7 @@
 			<button class='dropdown-item' on:click={() => toggleMarkAsRead(article.idPair)}>
 				Mark as read
 			</button>
-			<button class='dropdown-item' on:click={() => timelineProps.compact = !timelineProps.compact}>
+			<button class='dropdown-item' on:click={() => compact = !compact}>
 				{ timelineProps.compact ? 'Show expanded' : 'Show compact' }
 			</button>
 			{#if article.url}

diff --git a/src/containers/MasonryContainer.svelte b/src/containers/MasonryContainer.svelte
@@ -90,7 +90,9 @@
 	}
 
 	function getRatio(article: ArticleProps): number {
-		return 1 + getActualArticle(article).medias.reduce((acc, curr) => acc + (curr.ratio ?? 1), 0)
+		return 1 + getActualArticle(article).medias
+			.slice(0, props.timelineArticleProps.maxMediaCount ?? undefined)
+			.reduce((acc, curr) => acc + (curr.ratio ?? 1), 0)
 	}
 </script>
 

diff --git a/src/extension/pixiv/followIllusts/FollowIllusts.svelte b/src/extension/pixiv/followIllusts/FollowIllusts.svelte
@@ -31,6 +31,7 @@
 				customMethod: null,
 				reversed: true,
 			},
+			compact: true,
 		}
 	}
 

diff --git a/src/extension/pixiv/userPage/UserArtworksPage.svelte b/src/extension/pixiv/userPage/UserArtworksPage.svelte
@@ -8,7 +8,7 @@
 	import {defaultTimeline} from '../../../timelines'
 	import MasonryContainer from '../../../containers/MasonryContainer.svelte'
 	import {loadMainStorage} from '../../../storages'
-	import UserPageEndpoint, {getUserId, UserAPIEndpoint} from '../../../services/pixiv/endpoints/user'
+	import {getUserId, UserAPIEndpoint} from '../../../services/pixiv/endpoints/user'
 	import {everyRefreshType} from '../../../services/endpoints'
 	import portal from '../../../usePortal'
 	import {SortMethod} from '../../../sorting'
@@ -30,6 +30,7 @@
 				customMethod: null,
 				reversed: true,
 			},
+			compact: true,
 		}
 	}
 

diff --git a/src/extension/pixiv/userPage/UserBookmarksPage.svelte b/src/extension/pixiv/userPage/UserBookmarksPage.svelte
@@ -30,6 +30,7 @@
 				customMethod: null,
 				reversed: false,
 			},
+			compact: true,
 		}
 	}
 

diff --git a/src/filters/index.ts b/src/filters/index.ts
@@ -35,6 +35,7 @@ type GenericFilter = {
 	offset: number
 	includeOffset: boolean
 }
+//TODO Number of medias (with equal, less than, greater than, etc)
 
 export function getFilterName(filterType: GenericFilter['type'], inverted: boolean): string {
 	if (inverted) {

diff --git a/src/services/pixiv/endpoints/bookmarks.ts b/src/services/pixiv/endpoints/bookmarks.ts
@@ -47,7 +47,7 @@ export default class BookmarkPageEndpoint extends PageEndpoint {
 			url.searchParams.set('is_first_page', this.hostPage.toString());
 			url.searchParams.set('lang', 'en`');
 
-			const response: FollowAjaxResponse = await PixivService.fetch(url.toString()).then(r => r.json());
+			const response: FollowAjaxResponse = await PixivService.fetch(url.toString(), {headers: {'Accept': 'application/json'}});
 			if (response?.body?.works) {
 				for (const work of Object.values(response.body.works))
 					getWritable<PixivArticle>({id: parseInt(work.id), service: PixivService.name})?.update(a => {
@@ -108,7 +108,7 @@ export class BookmarkAPIEndpoint extends LoadableEndpoint {
 		url.searchParams.set('rest', this.r18 ? 'hide' : 'show');
 		url.searchParams.set('lang', 'en');
 
-		const response: FollowAjaxResponse = await PixivService.fetch(url.toString()).then(r => r.json());
+		const response: FollowAjaxResponse = await PixivService.fetch(url.toString(), {headers: {'Accept': 'application/json'}})
 		if (response.error) {
 			console.error('Failed to fetch', response);
 			return [];

diff --git a/src/services/pixiv/endpoints/follow.ts b/src/services/pixiv/endpoints/follow.ts
@@ -73,7 +73,7 @@ export class FollowAPIEndpoint extends LoadableEndpoint {
 		const url = new URL('https://www.pixiv.net/ajax/follow_latest/illust');
 		url.searchParams.set('p', (this.currentPage + 1).toString());
 		url.searchParams.set('mode', this.r18 ? 'r18' : 'all');
-		const response: FollowAPIResponse = await PixivService.fetch(url.toString()).then(r => r.json());
+		const response: FollowAPIResponse = await PixivService.fetch(url.toString(), {headers: {'Accept': 'application/json'}});
 
 		const markedAsReadStorage = getMarkedAsReadStorage(PixivService);
 

diff --git a/src/services/pixiv/endpoints/user.ts b/src/services/pixiv/endpoints/user.ts
@@ -77,7 +77,7 @@ export class UserAPIEndpoint extends LoadableEndpoint {
 		let url = new URL(`https://www.pixiv.net/ajax/user/${this.userId}/profile/all`);
 		url.searchParams.set('p', (this.currentPage + 1).toString());
 		url.searchParams.set('lang', 'en`');
-		const listResponse: UserListAjaxResponse = await PixivService.fetch(url.toString()).then(r => r.json());
+		const listResponse: UserListAjaxResponse = await PixivService.fetch(url.toString(), {headers: {'Accept': 'application/json'}});
 		const illustIds = Object.keys(listResponse.body.illusts);
 		//Decreasing order sort
 		illustIds.sort((a, b) => parseInt(b) - parseInt(a));
@@ -91,7 +91,7 @@ export class UserAPIEndpoint extends LoadableEndpoint {
 		url.searchParams.set('is_first_page', (this.currentPage === 0 ? 1 : 0).toString());
 		url.searchParams.set('lang', 'en');
 
-		const response: UserAjaxResponse = await PixivService.fetch(url.toString()).then(r => r.json()).then(r => r.json());
+		const response: UserAjaxResponse = await PixivService.fetch(url.toString(), {headers: {'Accept': 'application/json'}});
 		if (response.error) {
 			console.error('Failed to fetch', response);
 			return [];

diff --git a/src/services/pixiv/service.ts b/src/services/pixiv/service.ts
@@ -22,7 +22,7 @@ export const PixivService: PixivServiceType = {
 	...newFetchingService(),
 	async fetchArticle(store: Writable<PixivArticle>) {
 		const article = get(store);
-		const json: PagesResponse = await this.fetch(`https://www.pixiv.net/ajax/illust/${article.id}/pages`).then(r => r.json());
+		const json: PagesResponse = await this.fetch(`https://www.pixiv.net/ajax/illust/${article.id}/pages`, {headers: {'Accept': 'application/json'}});
 
 		store.update(a => {
 			for (let i = 0; i < a.medias.length; ++i) {
@@ -68,7 +68,7 @@ export const PixivService: PixivServiceType = {
 						'X-CSRF-TOKEN': csrfToken,
 					},
 					body: JSON.stringify({illust_id: idPair.id}),
-				}).then(r => r.json());
+				});
 
 				if (response.error)
 					throw new Error('Error during like: ' + response.message);
@@ -117,7 +117,7 @@ export const PixivService: PixivServiceType = {
 						comment: '',
 						tags: [],
 					}),
-				}).then(r => r.json());
+				});
 
 				if (response.error)
 					throw new Error('Error during bookmark: ' + response.message);

diff --git a/src/services/service.ts b/src/services/service.ts
@@ -18,6 +18,7 @@ export interface Service<A extends Article = Article> {
 	readonly articles: { [id: string]: Writable<A> };
 	readonly endpointConstructors: Record<string, EndpointConstructorInfo>
 	userEndpoint: ((author: ArticleAuthor) => Endpoint) | null,
+	loadArticle: ((id: string) => Promise<ArticleWithRefs | null>) | null,
 	articleActions: { [name: string]: ArticleAction<A> };
 	requestImageLoad?: (id: ArticleId, index: number) => void;
 	getCachedArticles?: () => {[id: string]: object}
@@ -175,6 +176,7 @@ export function newService<A extends Article = Article>(name: string): Service<A
 		articles: {},
 		endpointConstructors: {},
 		userEndpoint: null,
+		loadArticle: null,
 		articleActions: {},
 		keepArticle() { return true; },
 		defaultFilter(filterType: string) { return {type:filterType, service: name};},
@@ -184,7 +186,11 @@ export function newService<A extends Article = Article>(name: string): Service<A
 		async fetch(url, init) {
 			if (this.isOnDomain) {
 				const response = await fetch(url, init);
-				return await response.json();
+
+				if (init?.headers && (init.headers as Record<string, string>)['Accept'] === 'application/json')
+					return await response.json();
+				else
+					return await response.text();
 			}else if (this.fetchInfo.type === FetchType.Extension) {
 				const response = await fetchExtension('extensionFetch', {
 					soshalthing: true,

diff --git a/src/services/twitter/pageAPI.ts b/src/services/twitter/pageAPI.ts
@@ -396,7 +396,7 @@ export type ResponseError = {
 	data: object;
 };
 
-type ResponseSingleError = {
+export type ResponseSingleError = {
 	name: string;
 	source: string;
 	code: number;