space/tv-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

testing something

Browse Source
This commit is contained in:
Space
2026-03-01 12:31:14 +01:00
parent e724dec0b7
commit 6ec08f30f0
7 changed files with 412 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
functions/control/main.py
View File

@@ -11,7 +11,8 @@ DEFAULT_STATE = {
},
"image_popup": {
"showing": False,
"image_url": ""
"image_url": "",
"caption": ""
}
}
@@ -54,6 +55,7 @@ def main(args):
return {"status": "success"}
elif route == "push_image":
image_b64 = body.get("image_b64", "")
caption = body.get("caption", "")
image_bytes = base64.b64decode(image_b64)
file_name = f"tv-image-{int(time.time() * 1000)}.jpg"
MINIO_CLIENT.put_object(
@@ -62,6 +64,7 @@ def main(args):
public_url = f"https://content2.reversed.dev/{BUCKET}/{file_name}"
current = _read_state()
current["image_popup"]["image_url"] = public_url
current["image_popup"]["caption"] = caption
current["image_popup"]["showing"] = True
_write_state(current)
return {"status": "success", "image_url": public_url}

44
mobile/App.tsx
View File

@@ -2,14 +2,20 @@ import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import { BottomNav } from "./src/components/BottomNav";
import { NotFoundPage } from "./src/pages/NotFound";
import { ImagePage } from "./src/pages/image";
import { IndexPage } from "./src/pages/index";
import { TextPage } from "./src/pages/text";
import { Route, RouterProvider, useRouter } from "./src/router";
interface Tab {
label: string;
route: Route;
page: React.ComponentType;
}
const TABS: Tab[] = [{ label: "Home", route: "home", page: IndexPage }];
const TABS: Tab[] = [
{ label: "Home", route: "home", page: IndexPage },
{ label: "Text", route: "text", page: TextPage },
{ label: "Image", route: "image", page: ImagePage },
];
export { TABS, type Tab };
function Screen() {
@@ -46,3 +52,39 @@ const styles = StyleSheet.create({
backgroundColor: "#fff",
},
});
function Screen() {
const { route } = useRouter();
return (
<>
{TABS.map((tab) => {
if (tab.route === route) {
const Page = tab.page;
return <Page key={tab.route} />;
}
return null;
})}
{!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
</>
);
}
export default function App() {
return (
<RouterProvider>
<View style={styles.container}>
<StatusBar style="auto" />
<Screen />
<BottomNav />
</View>
</RouterProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
});

145
mobile/src/pages/image.tsx Normal file
View File

@@ -0,0 +1,145 @@
import * as ImagePicker from "expo-image-picker";
import { useState } from "react";
import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
const BASE_URL =
"https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
export function ImagePage() {
const [caption, setCaption] = useState("");
const [uploading, setUploading] = useState(false);
const [previewUri, setPreviewUri] = useState<string | null>(null);
const handleTakePhoto = async () => {
const { granted } = await ImagePicker.requestCameraPermissionsAsync();
if (!granted) {
alert("Camera permission is required to take photos.");
return;
}
const result = await ImagePicker.launchCameraAsync({
mediaTypes: "images",
quality: 1,
base64: true,
});
if (result.canceled) return;
const asset = result.assets[0];
setPreviewUri(asset.uri);
setUploading(true);
try {
const res = await fetch(`${BASE_URL}/push_image`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ image_b64: asset.base64, caption }),
});
const data = await res.json();
if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
} catch (error) {
console.error("Upload error:", error);
alert("Failed to upload image.");
} finally {
setUploading(false);
}
};
const handleDismiss = () => {
fetch(`${BASE_URL}/push_dismiss_image`, { method: "POST" })
.then((r) => r.json())
.then((data) => {
if (data.status !== "success") alert("Failed to dismiss image.");
})
.catch((error) => {
console.error("Error dismissing image:", error);
alert("Error dismissing image.");
});
};
return (
<View style={styles.container}>
<Text style={styles.title}>Image Popup</Text>
<Text style={styles.subtitle}>Show a photo on the TV with an optional caption.</Text>
<View style={styles.field}>
<Text style={styles.label}>Caption (optional)</Text>
<TextInput
style={styles.input}
placeholder="Add a caption..."
value={caption}
onChangeText={setCaption}
/>
</View>
{previewUri && (
<Image source={{ uri: previewUri }} style={styles.preview} />
)}
{uploading ? (
<ActivityIndicator size="large" style={{ marginTop: 8 }} />
) : (
<View style={styles.actions}>
<View style={styles.actionBtn}>
<Button title="Take Photo & Show" onPress={handleTakePhoto} />
</View>
<View style={styles.actionBtn}>
<Button title="Dismiss" onPress={handleDismiss} color="#e55" />
</View>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#f9f9f9",
gap: 20,
},
title: {
fontSize: 26,
fontWeight: "700",
color: "#111",
marginTop: 8,
},
subtitle: {
fontSize: 14,
color: "#888",
marginTop: -12,
},
field: {
gap: 6,
},
label: {
fontSize: 13,
fontWeight: "600",
color: "#555",
textTransform: "uppercase",
letterSpacing: 0.5,
},
input: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
padding: 12,
fontSize: 16,
backgroundColor: "#fff",
},
preview: {
width: "100%",
height: 200,
borderRadius: 10,
resizeMode: "cover",
},
actions: {
flexDirection: "row",
gap: 12,
marginTop: 4,
},
actionBtn: {
flex: 1,
},
});

186
mobile/src/pages/index.tsx
View File

@@ -1,118 +1,26 @@
import * as ImagePicker from "expo-image-picker";
import { useState } from "react";
import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
const BASE_URL =
"https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useRouter } from "../router";
export function IndexPage() {
const [text, setText] = useState("");
const [uploading, setUploading] = useState(false);
const [previewUri, setPreviewUri] = useState<string | null>(null);
const handleSend = () => {
if (text.trim() === "") {
alert("Please enter some text before sending.");
return;
}
fetch(`${BASE_URL}/push_text`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text }),
})
.then((r) => r.json())
.then((data) => {
if (data.status === "success") {
alert("Text sent successfully!");
} else {
alert("Failed to send text.");
}
})
.catch((error) => {
console.error("Error sending text:", error);
alert("Error sending text.");
});
};
const handlePullText = () => {
fetch(`${BASE_URL}/pull_text`)
.then((r) => r.json())
.then((data) => {
alert(data.text ?? "No text received.");
})
.catch((error) => {
console.error("Error pulling text:", error);
alert("Error pulling text.");
});
};
const handleTakePhoto = async () => {
const { granted } = await ImagePicker.requestCameraPermissionsAsync();
if (!granted) {
alert("Camera permission is required to take photos.");
return;
}
const result = await ImagePicker.launchCameraAsync({
mediaTypes: "images",
quality: 0.8,
base64: true,
});
if (result.canceled) return;
const asset = result.assets[0];
setPreviewUri(asset.uri);
setUploading(true);
try {
// Send base64 image to server — server uploads to Minio and saves the URL
const res = await fetch(`${BASE_URL}/push_image`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ image_b64: asset.base64 }),
});
const data = await res.json();
if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
alert("Image uploaded and sent to TV!");
} catch (error) {
console.error("Upload error:", error);
alert("Failed to upload image.");
} finally {
setUploading(false);
}
};
const { navigate } = useRouter();
return (
<View style={styles.container}>
<Text style={styles.title}>TV Control</Text>
<Text style={styles.subtitle}>Choose what to send to the TV.</Text>
<View style={styles.section}>
<Text style={styles.sectionLabel}>Text</Text>
<TextInput
style={styles.input}
placeholder="Type something..."
value={text}
onChangeText={setText}
/>
<View style={styles.row}>
<Button title="Send Text" onPress={handleSend} />
<Button title="Pull Text" onPress={handlePullText} />
</View>
</View>
<View style={styles.cards}>
<TouchableOpacity style={styles.card} onPress={() => navigate("text")} activeOpacity={0.8}>
<Text style={styles.cardIcon}>💬</Text>
<Text style={styles.cardTitle}>Text Popup</Text>
<Text style={styles.cardDesc}>Display a message on the TV screen.</Text>
</TouchableOpacity>
<View style={styles.section}>
<Text style={styles.sectionLabel}>Image</Text>
{previewUri && (
<Image source={{ uri: previewUri }} style={styles.preview} />
)}
{uploading ? (
<ActivityIndicator size="large" style={{ marginTop: 12 }} />
) : (
<Button title="Take Photo & Send to TV" onPress={handleTakePhoto} />
)}
<TouchableOpacity style={styles.card} onPress={() => navigate("image")} activeOpacity={0.8}>
<Text style={styles.cardIcon}>📷</Text>
<Text style={styles.cardTitle}>Image Popup</Text>
<Text style={styles.cardDesc}>Take a photo and show it on the TV.</Text>
</TouchableOpacity>
</View>
</View>
);
@@ -121,44 +29,48 @@ export function IndexPage() {
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f9f9f9",
padding: 24,
gap: 24,
backgroundColor: "#f9f9f9",
gap: 20,
},
title: {
fontSize: 28,
fontSize: 30,
fontWeight: "700",
marginBottom: 8,
color: "#111",
marginTop: 8,
},
section: {
width: "100%",
gap: 8,
subtitle: {
fontSize: 15,
color: "#888",
marginTop: -12,
},
sectionLabel: {
fontSize: 14,
fontWeight: "600",
color: "#555",
textTransform: "uppercase",
letterSpacing: 0.5,
cards: {
gap: 16,
marginTop: 8,
},
input: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 8,
padding: 10,
fontSize: 16,
card: {
backgroundColor: "#fff",
borderRadius: 16,
borderWidth: 1,
borderColor: "#e8e8e8",
padding: 20,
gap: 6,
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.06,
shadowRadius: 4,
elevation: 2,
},
row: {
flexDirection: "row",
gap: 8,
cardIcon: {
fontSize: 28,
},
preview: {
width: "100%",
height: 200,
borderRadius: 8,
resizeMode: "cover",
cardTitle: {
fontSize: 18,
fontWeight: "600",
color: "#111",
},
});
cardDesc: {
fontSize: 14,
color: "#888",
},
});

117
mobile/src/pages/text.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
const BASE_URL =
"https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
export function TextPage() {
const [title, setTitle] = useState("");
const handleShow = () => {
if (title.trim() === "") {
alert("Please enter some text before sending.");
return;
}
fetch(`${BASE_URL}/push_text`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title }),
})
.then((r) => r.json())
.then((data) => {
if (data.status !== "success") alert("Failed to send text.");
})
.catch((error) => {
console.error("Error sending text:", error);
alert("Error sending text.");
});
};
const handleDismiss = () => {
fetch(`${BASE_URL}/push_dismiss_text`, { method: "POST" })
.then((r) => r.json())
.then((data) => {
if (data.status !== "success") alert("Failed to dismiss text.");
})
.catch((error) => {
console.error("Error dismissing text:", error);
alert("Error dismissing text.");
});
};
return (
<View style={styles.container}>
<Text style={styles.title}>Text Popup</Text>
<Text style={styles.subtitle}>Display a text message on the TV.</Text>
<View style={styles.field}>
<Text style={styles.label}>Message</Text>
<TextInput
style={styles.input}
placeholder="Type something..."
value={title}
onChangeText={setTitle}
multiline
/>
</View>
<View style={styles.actions}>
<View style={styles.actionBtn}>
<Button title="Show on TV" onPress={handleShow} />
</View>
<View style={styles.actionBtn}>
<Button title="Dismiss" onPress={handleDismiss} color="#e55" />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#f9f9f9",
gap: 20,
},
title: {
fontSize: 26,
fontWeight: "700",
color: "#111",
marginTop: 8,
},
subtitle: {
fontSize: 14,
color: "#888",
marginTop: -12,
},
field: {
gap: 6,
},
label: {
fontSize: 13,
fontWeight: "600",
color: "#555",
textTransform: "uppercase",
letterSpacing: 0.5,
},
input: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
padding: 12,
fontSize: 16,
backgroundColor: "#fff",
minHeight: 80,
textAlignVertical: "top",
},
actions: {
flexDirection: "row",
gap: 12,
marginTop: 4,
},
actionBtn: {
flex: 1,
},
});

2
mobile/src/router.tsx
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext, useState } from "react";
export type Route = "home" | "mystery";
export type Route = "home" | "text" | "image";
interface RouterContextValue {
route: Route;

71
tv/src/App.tsx
View File

@@ -1,11 +1,22 @@
import { useEffect, useState } from "react";
interface TextState {
showing: boolean;
title: string;
}
interface ImagePopupState {
showing: boolean;
image_url: string;
caption: string;
}
function App() {
const [screenStatus, setScreenStatus] = useState<
"notfullscreen" | "fullscreen"
>("notfullscreen");
const [text, setText] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [textState, setTextState] = useState<TextState>({ showing: false, title: "" });
const [imagePopup, setImagePopup] = useState<ImagePopupState>({ showing: false, image_url: "", caption: "" });
useEffect(() => {
const handleFullscreenChange = () => {
@@ -31,16 +42,17 @@ function App() {
)
.then((response) => response.json())
.then((data) => {
setText(data.state?.text ?? "");
setImageUrl(data.state?.image_url ?? "");
const state = data.state ?? {};
setTextState(state.text ?? { showing: false, title: "" });
setImagePopup(state.image_popup ?? { showing: false, image_url: "", caption: "" });
})
.catch((error) => {
console.error("Error pulling state:", error);
});
};
handlePullState(); // Initial pull when entering fullscreen
const interval = setInterval(handlePullState, 5000); // Poll every 5 seconds
handlePullState();
const interval = setInterval(handlePullState, 5000);
return () => clearInterval(interval);
}
@@ -71,7 +83,7 @@ function App() {
TV View
</h1>
<p className="text-gray-500 text-sm max-w-xs">
Enter fullscreen mode to enter fullscreen mode.
Enter fullscreen mode to start displaying content.
</p>
</div>
@@ -97,18 +109,41 @@ function App() {
</button>
</div>
) : (
<div className="flex flex-col items-center gap-6 text-center w-full h-full justify-center">
{imageUrl && (
<img
src={imageUrl}
alt="TV display"
className="max-w-full max-h-[70vh] rounded-2xl object-contain shadow-2xl"
/>
<div className="w-screen h-screen relative">
{/* Text popup modal */}
{textState.showing && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/70 backdrop-blur-sm">
<div className="bg-gray-900 border border-gray-700 rounded-3xl px-16 py-12 shadow-2xl max-w-3xl w-full mx-8">
<h1 className="text-6xl font-bold tracking-tight text-white text-center">
{textState.title}
</h1>
</div>
</div>
)}
{text && (
<h1 className="text-4xl font-bold tracking-tight text-white">
{text}
</h1>
{/* Image popup modal */}
{imagePopup.showing && imagePopup.image_url && (
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/75 backdrop-blur-sm">
<div className="flex flex-col items-center gap-5 p-6 bg-gray-950/80 rounded-3xl border border-white/10 shadow-2xl max-w-[90vw] max-h-[92vh]">
{imagePopup.caption && (
<h2 className="text-4xl font-bold text-white tracking-tight text-center">
{imagePopup.caption}
</h2>
)}
<img
src={imagePopup.image_url}
alt="TV display"
className="max-w-full max-h-[78vh] rounded-2xl object-contain shadow-xl"
/>
</div>
</div>
)}
{/* Background idle state */}
{!textState.showing && !imagePopup.showing && (
<div className="flex items-center justify-center w-full h-full">
<p className="text-gray-600 text-lg">Waiting for content...</p>
</div>
)}
</div>
)}