Dont use cloudfront if running local (#50)

Also move api folder into lib folder

README.md

@@ -1,6 +1,6 @@
 # top90-frontend
 
-Top90 is a website that populates with soccer goals in real time as they happen around the world
+top90 is a website that populates with soccer goals in real time as they happen around the world
 
 https://top90.io
 

src/components/Video.tsx

@@ -1,7 +1,8 @@
-import {Goal} from '../api/goals';
-import {API_BASE_URL} from '../api/core';
+import {Goal} from '../lib/api/goals';
+import {API_BASE_URL} from '../lib/api/core';
 
 import {useEffect, useState} from 'react';
+import {cloudfrontEnabled} from '../lib/utils';
 
 const buttonStyle = {
   border: 'none',
@@ -70,19 +71,29 @@ export function Video({goal}: {goal: Goal}) {
     return 'https://s3-redditsoccergoals.top90.io/' + s3Key;
   }
 
+  function thumbnailUrl(goal: Goal) {
+    if (cloudfrontEnabled()) {
+      return cloudfrontUrl(goal.ThumbnailS3Key);
+    }
+
+    return goal.ThumbnailPresignedUrl;
+  }
+
+  function videoUrl(goal: Goal) {
+    if (cloudfrontEnabled()) {
+      return cloudfrontUrl(goal.S3ObjectKey);
+    }
+
+    return goal.PresignedUrl;
+  }
+
   return (
     <div key={goal.RedditPostTitle}>
       <div className="mb-1">
         <h6>{goal.RedditPostTitle}</h6>
       </div>
-      <video
-        poster={cloudfrontUrl(goal.ThumbnailS3Key)}
-        className="shadow-sm"
-        width={'100%'}
-        controls
-        muted={true}
-      >
-        <source src={cloudfrontUrl(goal.S3ObjectKey)} type="video/mp4"></source>
+      <video poster={thumbnailUrl(goal)} className="shadow-sm" width={'100%'} controls muted={true}>
+        <source src={videoUrl(goal)} type="video/mp4"></source>
       </video>
       <div className="d-flex justify-content-between align-items-center">
         <div>

src/lib/utils.ts

@@ -10,3 +10,7 @@ export function getPreferredTheme() {
 export function setTheme(theme: string) {
   document.documentElement.setAttribute('data-bs-theme', theme);
 }
+
+export function cloudfrontEnabled() {
+  return import.meta.env.VITE_TOP90_CLOUDFRONT_ENABLED !== 'false';
+}

src/pages/Goal.tsx

@@ -1,5 +1,5 @@
 import '../index.css';
-import {getGoal as _getGoal, GoalResponse} from '../api/goals';
+import {getGoal as _getGoal, GoalResponse} from '../lib/api/goals';
 import Video from '../components/Video';
 
 import {useCallback, useEffect, useState} from 'react';

src/pages/Goals.tsx

@@ -1,9 +1,9 @@
 import Select from '../components/Select';
 import Input from '../components/Input';
 import Video from '../components/Video';
-import {Pagination} from '../api/core';
-import {getGoals as _getGoals, GetGoalsFilter, GoalsResponse} from '../api/goals';
-import {getTeams as _getTeams, TeamsResponse} from '../api/teams';
+import {Pagination} from '../lib/api/core';
+import {getGoals as _getGoals, GetGoalsFilter, GoalsResponse} from '../lib/api/goals';
+import {getTeams as _getTeams, TeamsResponse} from '../lib/api/teams';
 
 import ReactPaginate from 'react-paginate';
 import React, {useEffect, useCallback, useState, FormEvent} from 'react';