Add IGTV

src/site/api/routes.js

@@ -65,22 +65,27 @@ module.exports = [
 		}
 	},
 	{
-		route: `/u/(${constants.external.username_regex})`, methods: ["GET"], code: ({req, url, fill}) => {
-			if (fill[0] !== fill[0].toLowerCase()) { // some capital letters
-				return Promise.resolve(redirect(`/u/${fill[0].toLowerCase()}`, 301))
+		route: `/u/(${constants.external.username_regex})(/channel)?`, methods: ["GET"], code: ({req, url, fill}) => {
+			const username = fill[0]
+			const type = fill[1] ? "igtv" : "timeline"
+
+			if (username !== username.toLowerCase()) { // some capital letters
+				return Promise.resolve(redirect(`/u/${username.toLowerCase()}`, 301))
 			}
 
 			const settings = getSettings(req)
 			const params = url.searchParams
-			return fetchUser(fill[0]).then(async user => {
-				const page = +params.get("page")
-				if (typeof page === "number" && !isNaN(page) && page >= 1) {
-					await user.timeline.fetchUpToPage(page - 1)
-				}
+			return fetchUser(username).then(async user => {
+				const selectedTimeline = user[type]
+				let pageNumber = +params.get("page")
+				if (isNaN(pageNumber) || pageNumber < 1) pageNumber = 1
+				await selectedTimeline.fetchUpToPage(pageNumber - 1)
 				const followerCountsAvailable = !(user.constructor.name === "ReelUser" && user.following === 0 && user.followedBy === 0)
 				return render(200, "pug/user.pug", {
 					url,
 					user,
+					selectedTimeline,
+					type,
 					followerCountsAvailable,
 					constants,
 					settings,
@@ -100,12 +105,12 @@ module.exports = [
 						statusCode: 503,
 						contentType: "text/html",
 						headers: {
-							"Retry-After": userRequestCache.getTtl("user/"+fill[0], 1000)
+							"Retry-After": userRequestCache.getTtl("user/"+username, 1000)
 						},
 						content: pugCache.get("pug/blocked.pug").web({
 							website_origin: constants.website_origin,
-							username: fill[0],
-							expiresMinutes: userRequestCache.getTtl("user/"+fill[0], 1000*60),
+							username,
+							expiresMinutes: userRequestCache.getTtl("user/"+username, 1000*60),
 							getStaticURL,
 							settings
 						})
@@ -120,13 +125,25 @@ module.exports = [
 	},
 	{
 		route: `/fragment/user/(${constants.external.username_regex})/(\\d+)`, methods: ["GET"], code: async ({req, url, fill}) => {
+			const username = fill[0]
+			let pageNumber = +fill[1]
+			if (isNaN(pageNumber) || pageNumber < 1) {
+				return {
+					statusCode: 400,
+					contentType: "text/html",
+					content: "Bad page number"
+				}
+			}
+			let type = url.searchParams.get("type")
+			if (!["timeline", "igtv"].includes(type)) type = "timeline"
+
 			const settings = getSettings(req)
-			return fetchUser(fill[0]).then(async user => {
-				const pageNumber = +fill[1]
+			return fetchUser(username).then(async user => {
 				const pageIndex = pageNumber - 1
-				await user.timeline.fetchUpToPage(pageIndex)
-				if (user.timeline.pages[pageIndex]) {
-					return render(200, "pug/fragments/timeline_page.pug", {page: user.timeline.pages[pageIndex], pageIndex, user, url, settings})
+				const selectedTimeline = user[type]
+				await selectedTimeline.fetchUpToPage(pageIndex)
+				if (selectedTimeline.pages[pageIndex]) {
+					return render(200, "pug/fragments/timeline_page.pug", {page: selectedTimeline.pages[pageIndex], selectedTimeline, type, pageIndex, user, url, settings})
 				} else {
 					return {
 						statusCode: 400,

src/site/html/static/js/pagination.js

@@ -75,8 +75,9 @@ class NextPage extends FreezeWidth {
 		if (this.fetching) return
 		this.fetching = true
 		this.freeze("Loading...")
+		const type = this.element.getAttribute("data-type")
 
-		return fetch(`/fragment/user/${this.element.getAttribute("data-username")}/${this.nextPageNumber}`).then(res => res.text()).then(text => {
+		return fetch(`/fragment/user/${this.element.getAttribute("data-username")}/${this.nextPageNumber}?type=${type}`).then(res => res.text()).then(text => {
 			q("#next-page-container").remove()
 			this.observer.disconnect()
 			q("#timeline").insertAdjacentHTML("beforeend", text)

src/site/pug/fragments/timeline_page.pug

@@ -1,6 +1,8 @@
+//- Needs user, selectedTimeline, url, type
+
 include ../includes/timeline_page.pug
 include ../includes/next_page_button.pug
 
 +timeline_page(page, pageIndex)
 
-+next_page_button(user, url)
++next_page_button(user, selectedTimeline, url, type)

src/site/pug/includes/next_page_button.pug

@@ -1,10 +1,10 @@
-mixin next_page_button(user, url)
-	if user.timeline.hasNextPage()
+mixin next_page_button(user, selectedTimeline, url, type)
+	if selectedTimeline.hasNextPage()
 		div.next-page-container#next-page-container
 			-
 				const nu = new URL(url)
-				nu.searchParams.set("page", user.timeline.pages.length+1)
-			a(href=`${nu.search}#page-${user.timeline.pages.length+1}` data-page=(user.timeline.pages.length+1) data-username=(user.data.username))#next-page.next-page Next page
+				nu.searchParams.set("page", selectedTimeline.pages.length+1)
+			a(href=`${nu.search}#page-${selectedTimeline.pages.length+1}` data-page=(selectedTimeline.pages.length+1) data-username=(user.data.username) data-type=type)#next-page.next-page Next page
 	else
 		div.page-number.no-more-pages
 			span.number No more posts.

src/site/pug/user.pug

@@ -1,4 +1,4 @@
-//- Needs user, followerCountsAvailable, url, constants, settings
+//- Needs user, selectedTimeline, type, followerCountsAvailable, url, constants, settings
 
 include includes/timeline_page.pug
 include includes/next_page_button.pug
@@ -7,6 +7,9 @@ include includes/feed_link
 
 - const numberFormat = new Intl.NumberFormat().format
 
+mixin selector-button(text, selectorType, urlSuffix)
+	a(href=(type !== selectorType && `/u/${user.data.username}${urlSuffix}`) class=(type === selectorType && "active")).selector= text
+
 doctype html
 html
 	head
@@ -77,17 +80,23 @@ html
 							a(href="/") Home
 							a(href=settingsReferrer) Settings
 
-			- const hasPosts = !user.data.is_private && user.timeline.pages.length && user.timeline.pages[0].length
-			main(class=hasPosts ? "" : "no-posts")#timeline.timeline
-				if hasPosts
-					each page, pageIndex in user.timeline.pages
-						+timeline_page(page, pageIndex)
-					+next_page_button(user, url)
-				else
-					div
-						div.page-number
-							span.number
-								if user.data.is_private
-									| Profile is private.
-								else
-									| No posts.
+			- const hasPosts = !user.data.is_private && selectedTimeline.pages.length && selectedTimeline.pages[0].length
+			.timeline-section
+				.selector-container
+					+selector-button("Timeline", "timeline", "")
+					if user.data.has_channel !== false
+						+selector-button("IGTV", "igtv", "/channel")
+
+				main(class=hasPosts ? "" : "no-posts")#timeline.timeline
+					if hasPosts
+						each page, pageIndex in selectedTimeline.pages
+							+timeline_page(page, pageIndex)
+						+next_page_button(user, selectedTimeline, url, type)
+					else
+						div
+							div.page-number
+								span.number
+									if user.data.is_private
+										| Profile is private.
+									else
+										| No posts.

src/site/sass/includes/_main.sass

@@ -158,25 +158,41 @@ body
 			@media screen and (max-width: $layout-a-max)
 				display: none
 
-.timeline
-	--image-size: 260px
-	$image-size: var(--image-size)
-
-	@media screen and (max-width: $layout-a-max)
-		--image-size: 150px
-		flex: 1
-
-	@media screen and (max-width: $layout-c-max)
-		--image-size: calc(33vw - 10px)
-
+.timeline-section
 	background-color: map-get($theme, "background-primary")
-	padding: 15px 15px 40px
+	padding: 0px 15px 40px
 
-	&.no-posts
+	.selector-container
+		padding: 15px
 		display: flex
-		flex-direction: column
 		justify-content: center
 
+		.selector
+			background-color: map-get($theme, "background-primary")
+			color: map-get($theme, "foreground-primary")
+			text-decoration: none
+			padding: 10px 10px 13px
+			line-height: 1
+			font-size: 22px
+			border: 1px solid transparent
+			border-bottom: 1px solid map-get($theme, "foreground-timeline-page")
+			margin: 0px 10px
+			box-shadow: map-get($theme, "shadow-down-only")
+			border-radius: 5px
+
+			&:hover, &:focus
+				border: 1px solid map-get($theme, "foreground-timeline-page")
+
+			&.active
+				background-color: map-get($theme, "background-power-primary")
+				color: map-get($theme, "foreground-power-primary")
+				cursor: default
+				border: 1px solid map-get($theme, "foreground-timeline-page")
+
+			&:hover, &:focus, &.active
+				padding-bottom: 10px
+				border-bottom: 4px solid map-get($theme, "foreground-primary")
+
 	.page-number
 		color: map-get($theme, "foreground-timeline-page")
 		line-height: 1
@@ -201,71 +217,87 @@ body
 			padding: 10px
 			background-color: map-get($theme, "background-primary")
 
-	.next-page-container
-		margin: 20px 0px
-		display: flex
-		justify-content: center
+	.timeline
+		--image-size: 260px
+		$image-size: var(--image-size)
 
-		.next-page
-			@include link-button
-			font-size: 18px
-			text-align: center
-
-	.timeline-inner
-		display: flex
-		justify-content: center
-		flex-wrap: wrap
-		margin: 0 auto
-
-		&.three-columns
-			max-width: 810px
-
-			@media screen and (max-width: $layout-a-max)
-				max-width: 480px
-
-		&.four-columns
-			max-width: 1080px
-
-		&.six-columns
-			max-width: 1620px
+		@media screen and (max-width: $layout-a-max)
+			--image-size: 150px
+			flex: 1
 
 		@media screen and (max-width: $layout-c-max)
-			display: grid
-			grid-template-columns: repeat(3, 1fr)
+			--image-size: calc(33vw - 10px)
+
+		&.no-posts
+			display: flex
+			flex-direction: column
 			justify-content: center
-			justify-items: center
 
-		@mixin sized()
-			width: $image-size
-			height: $image-size
+		.next-page-container
+			margin: 20px 0px
+			display: flex
+			justify-content: center
 
-		.sized-link
-			$margin: 5px
+			.next-page
+				@include link-button
+				font-size: 18px
+				text-align: center
 
-			margin: $margin
-			color: map-get($theme, "foreground-thumbnail-alt")
-			border: 0px map-get($theme, "edge-thumbnail-hover")
-			background-color: map-get($theme, "background-timeline-loading")
-			text-decoration: none
-			overflow: hidden
-			@include sized
+		.timeline-inner
+			display: flex
+			justify-content: center
+			flex-wrap: wrap
+			margin: 0 auto
 
-			&:hover
-				$border-width: 3px
-				margin: $margin - $border-width
-				border-width: $border-width
+			&.three-columns
+				max-width: 810px
+
+				@media screen and (max-width: $layout-a-max)
+					max-width: 480px
+
+			&.four-columns
+				max-width: 1080px
+
+			&.six-columns
+				max-width: 1620px
 
 			@media screen and (max-width: $layout-c-max)
-				$margin: 2px
+				display: grid
+				grid-template-columns: repeat(3, 1fr)
+				justify-content: center
+				justify-items: center
+
+			@mixin sized()
+				width: $image-size
+				height: $image-size
+
+			.sized-link
+				$margin: 5px
+
 				margin: $margin
+				color: map-get($theme, "foreground-thumbnail-alt")
+				border: 0px map-get($theme, "edge-thumbnail-hover")
+				background-color: map-get($theme, "background-timeline-loading")
+				text-decoration: none
+				overflow: hidden
+				@include sized
 
 				&:hover
-					$border-width: 2px
+					$border-width: 3px
 					margin: $margin - $border-width
 					border-width: $border-width
 
-			.sized-image
-				@include sized
+				@media screen and (max-width: $layout-c-max)
+					$margin: 2px
+					margin: $margin
+
+					&:hover
+						$border-width: 2px
+						margin: $margin - $border-width
+						border-width: $border-width
+
+				.sized-image
+					@include sized
 
 .post-page
 	background-color: map-get($theme, "background-post-distraction")

src/site/sass/themes/_classic.scss

@@ -54,4 +54,5 @@ $theme: (
 	"shadow-down": 0px -2px 4px 4px rgba(0, 0, 0, 0.4),
 	"shadow-right": -2px 0px 4px 4px rgba(0, 0, 0, 0.4),
 	"shadow-down-inset": 0px 6px 4px -4px rgba(0, 0, 0, 0.4) inset,
+	"shadow-down-only": 0px 2px 4px 1px rgba(0, 0, 0, 0.3)
 );