From 6910f37c3b15f2a4ffaee9222f6df75c3652e936 Mon Sep 17 00:00:00 2001
From: Wes Weitzel <wesweitzel@gmail.com>
Date: Sun, 1 Oct 2023 10:32:10 -0700
Subject: [PATCH] Dont use cloudfront if running local (#50)

Also move api folder into lib folder
---
 README.md                  |  2 +-
 src/components/Video.tsx   | 31 +++++++++++++++++++++----------
 src/{ => lib}/api/core.ts  |  0
 src/{ => lib}/api/goals.ts |  0
 src/{ => lib}/api/teams.ts |  0
 src/lib/utils.ts           |  4 ++++
 src/pages/Goal.tsx         |  2 +-
 src/pages/Goals.tsx        |  6 +++---
 8 files changed, 30 insertions(+), 15 deletions(-)
 rename src/{ => lib}/api/core.ts (100%)
 rename src/{ => lib}/api/goals.ts (100%)
 rename src/{ => lib}/api/teams.ts (100%)

diff --git a/README.md b/README.md
index 21e8923..e1ce08a 100644
--- a/README.md
+++ b/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
 
diff --git a/src/components/Video.tsx b/src/components/Video.tsx
index 6e9d69b..2ddcdc7 100644
--- a/src/components/Video.tsx
+++ b/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>
diff --git a/src/api/core.ts b/src/lib/api/core.ts
similarity index 100%
rename from src/api/core.ts
rename to src/lib/api/core.ts
diff --git a/src/api/goals.ts b/src/lib/api/goals.ts
similarity index 100%
rename from src/api/goals.ts
rename to src/lib/api/goals.ts
diff --git a/src/api/teams.ts b/src/lib/api/teams.ts
similarity index 100%
rename from src/api/teams.ts
rename to src/lib/api/teams.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9743779..7368760 100644
--- a/src/lib/utils.ts
+++ b/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';
+}
diff --git a/src/pages/Goal.tsx b/src/pages/Goal.tsx
index 06a9e87..b9735e6 100644
--- a/src/pages/Goal.tsx
+++ b/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';
diff --git a/src/pages/Goals.tsx b/src/pages/Goals.tsx
index c8f3663..0cdd09d 100644
--- a/src/pages/Goals.tsx
+++ b/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';