214 lines
8.6 KiB
Svelte
214 lines
8.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import SEO from "$lib/components/SEO.svelte";
|
|
|
|
export let data;
|
|
|
|
let rawData = data?.getStockNews;
|
|
let marketNews = data?.getMarketNews;
|
|
let news = rawData.slice(0, 10) ?? [];
|
|
|
|
const formatDate = (dateString) => {
|
|
// Create a date object for the input dateString
|
|
const inputDate = new Date(dateString);
|
|
|
|
// Create a date object for the current time in New York City
|
|
const nycTime = new Date().toLocaleString("en-US", {
|
|
timeZone: "America/New_York",
|
|
});
|
|
const currentNYCDate = new Date(nycTime);
|
|
|
|
// Calculate the difference in milliseconds
|
|
const difference = inputDate.getTime() - currentNYCDate.getTime();
|
|
|
|
// Convert the difference to minutes
|
|
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
|
|
|
|
if (minutes < 60) {
|
|
return `${minutes} minutes`;
|
|
} else if (minutes < 1440) {
|
|
const hours = Math.round(minutes / 60);
|
|
return `${hours} hour${hours !== 1 ? "s" : ""}`;
|
|
} else {
|
|
const days = Math.round(minutes / 1440);
|
|
return `${days} day${days !== 1 ? "s" : ""}`;
|
|
}
|
|
};
|
|
|
|
async function handleScroll() {
|
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
|
if (isBottom && news?.length !== rawData?.length) {
|
|
const nextIndex = news?.length;
|
|
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
|
news = [...news, ...filteredNewResults];
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
};
|
|
});
|
|
|
|
function checkIfYoutubeVideo(link) {
|
|
const url = new URL(link);
|
|
if (url.hostname === "www.youtube.com") {
|
|
const searchParams = url.searchParams;
|
|
searchParams?.delete("t"); // Remove the "t" parameter
|
|
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
|
|
|
if (videoIdMatch) {
|
|
return videoIdMatch[1];
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Track whether each video should be shown
|
|
let showVideo = {};
|
|
function handlePlayClick(index: number) {
|
|
showVideo = { ...showVideo, [index]: true };
|
|
}
|
|
</script>
|
|
|
|
<SEO
|
|
title="All
|
|
Stock News"
|
|
description="The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites."
|
|
/>
|
|
|
|
<div class="w-full overflow-hidden m-auto mt-5">
|
|
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
|
<div
|
|
class="relative flex justify-center items-start overflow-hidden w-full"
|
|
>
|
|
<main class="w-full lg:w-3/4 lg:pr-10">
|
|
<div class="w-full m-auto">
|
|
<div class="grid grid-cols-1 gap-y-3">
|
|
{#if news?.length !== 0}
|
|
{#each news as item, index}
|
|
<div class="w-full flex flex-col bg-default rounded-md m-auto">
|
|
{#if checkIfYoutubeVideo(item.url)}
|
|
{#if showVideo[index]}
|
|
<!-- Show the YouTube iframe when the user clicks play -->
|
|
<div class="w-full aspect-video mb-4">
|
|
<iframe
|
|
class="w-full h-full rounded-md border border-gray-800"
|
|
src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
|
|
frameborder="0"
|
|
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
{:else}
|
|
<!-- Show the image placeholder with a play button -->
|
|
<div class="w-full aspect-video">
|
|
<div class="mb-3 sm:order-3 lg:pr-2">
|
|
<div
|
|
class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
|
|
style="background-image: url({item?.image});"
|
|
tabindex="0"
|
|
on:click={() => handlePlayClick(index)}
|
|
>
|
|
<div
|
|
class="absolute left-[50%] top-[50%] z-10 h-[46px] w-[70px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-[#212121] opacity-80 transition-all before:absolute before:left-[50%] before:top-[50%] before:-translate-x-1/2 before:-translate-y-1/2 before:border-y-[11px] before:border-l-[19px] before:border-r-0 before:border-transparent before:border-l-white before:content-[''] group-hover:bg-[#ff0000] group-hover:opacity-100"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<div class="mt-3 w-full">
|
|
<h3 class="text-sm text-white/80 truncate mb-2">
|
|
{formatDate(item?.publishedDate)} · {item?.site}
|
|
</h3>
|
|
<a
|
|
href={item?.url}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
class="text-lg sm:text-xl font-bold text-white"
|
|
>
|
|
{item?.title}
|
|
<p class="text-white text-sm mt-2 font-normal">
|
|
{item?.text?.length > 200
|
|
? item?.text?.slice(0, 200) + "..."
|
|
: item?.text}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
{:else}
|
|
<!-- Default news article display -->
|
|
<div class="w-full flex flex-col sm:flex-row">
|
|
<a
|
|
href={item?.url}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
|
|
>
|
|
<div class="flex-shrink-0 m-auto">
|
|
<img
|
|
src={item?.image}
|
|
class="h-auto w-full rounded-md"
|
|
alt="news image"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</a>
|
|
<div class="mt-3 sm:mt-0 w-full">
|
|
<h3 class="text-sm text-white/80 truncate mb-2">
|
|
{formatDate(item?.publishedDate)} · {item?.site}
|
|
</h3>
|
|
<a
|
|
href={item?.url}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
class="text-lg sm:text-xl font-bold text-white"
|
|
>
|
|
{item?.title}
|
|
<p class="text-white text-sm mt-2 font-normal">
|
|
{item?.text?.length > 200
|
|
? item?.text?.slice(0, 200) + "..."
|
|
: item?.text}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<aside class="hidden lg:block relative fixed w-1/4">
|
|
{#if marketNews?.length !== 0}
|
|
<div
|
|
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
|
|
>
|
|
<div class="p-4 text-sm">
|
|
<h3 class="text-xl text-white font-bold mb-3">Market News</h3>
|
|
<ul class="text-white">
|
|
{#each marketNews?.slice(0, 10) as item}
|
|
<li class="mb-3 last:mb-1">
|
|
{formatDate(item?.publishedDate)} ago -
|
|
<a
|
|
class="sm:hover:text-white text-blue-400"
|
|
href={item?.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer nofollow">{item?.title}</a
|
|
>
|
|
- {item?.site}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|