dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: production build

Browse Source
This commit is contained in:
Dejvino 2025-11-17 18:21:00 +01:00
parent cf3b915666
commit bc79301364
7 changed files with 17 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tv-player/.gitignore vendored
View File

@ -1 +1,2 @@
node_modules node_modules
dist

20
tv-player/index.html
View File

@ -4,9 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro TV Player</title> <title>Retro TV Player</title>
<!-- Load Tailwind CSS for styling --><script src="/vendor/tailwind-3.4.17.js"></script>
<script src="./src/tailwind-config.js"></script>
<style> <style>
/* Dark room aesthetic */ /* Dark room aesthetic */
body { body {
@ -18,16 +16,9 @@
canvas { canvas {
display: block; display: block;
} }
/* Custom styles for the Load Tape button */
.tape-button {
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tape-button:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
</style> </style>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="/src/main.js"></script>
</head> </head>
<body> <body>
@ -38,15 +29,12 @@
<!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple> <!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple>
<div class="flex space-x-4"> <div class="flex space-x-4">
<!-- Load Tapes Button --><button id="loadTapeButton" class="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150"> <!-- Load Tapes Button --><button id="loadTapeButton" class="px-8 py-3 bg-[#cc3333] text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150 active:translate-y-px">
Load tapes Load tapes
</button> </button>
</div> </div>
</div> </div>
<!-- Main entry point for the application -->
<script type="module" src="/src/main.js"></script>
<!-- 3D Canvas will be injected here by Three.js --> <!-- 3D Canvas will be injected here by Three.js -->
</body> </body>
</html> </html>

3
tv-player/preview.sh Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env bash
nix-shell -p nodejs --run "npx vite build && npx vite preview"

1
tv-player/src/main.js
View File

@ -1,5 +1,4 @@
import * as THREE from 'three'; import * as THREE from 'three';
import './tailwind-config.js';
import { init } from './core/init.js'; import { init } from './core/init.js';
// Start everything // Start everything

3
tv-player/src/scene/room-walls.js
View File

@ -1,8 +1,9 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { state } from '../state.js'; import { state } from '../state.js';
import wallTextureUrl from '/textures/wall.jpg';
export function createRoomWalls() { export function createRoomWalls() {
const wallTexture = state.loader.load('/textures/wall.jpg'); const wallTexture = state.loader.load(wallTextureUrl);
wallTexture.wrapS = THREE.RepeatWrapping; wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping; wallTexture.wrapT = THREE.RepeatWrapping;

9
tv-player/src/scene/root.js
View File

@ -5,6 +5,9 @@ import { createBookshelf } from './bookshelf.js';
import { createDoor } from './door.js'; import { createDoor } from './door.js';
import { createTvSet } from './tv-set.js'; import { createTvSet } from './tv-set.js';
import { PictureFrame } from './PictureFrame.js'; import { PictureFrame } from './PictureFrame.js';
import painting1 from '/textures/painting1.jpg';
import painting2 from '/textures/painting2.jpg';
import floorTextureUrl from '/textures/floor.jpg';
// --- Scene Modeling Function --- // --- Scene Modeling Function ---
export function createSceneObjects() { export function createSceneObjects() {
@ -17,7 +20,7 @@ export function createSceneObjects() {
// --- 1. Floor --- // --- 1. Floor ---
const floorGeometry = new THREE.PlaneGeometry(20, 20); const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorTexture = state.loader.load('/textures/floor.jpg'); const floorTexture = state.loader.load(floorTextureUrl);
floorTexture.wrapS = THREE.RepeatWrapping; floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(state.roomSize, state.roomSize); floorTexture.repeat.set(state.roomSize, state.roomSize);
@ -139,7 +142,7 @@ export function createSceneObjects() {
position: new THREE.Vector3(-state.roomSize/2 + 0.1, 2.0, -state.roomSize/2 + 1.5), position: new THREE.Vector3(-state.roomSize/2 + 0.1, 2.0, -state.roomSize/2 + 1.5),
width: 1.5, width: 1.5,
height: 1, height: 1,
imageUrls: ['/textures/painting1.jpg', '/textures/painting2.jpg'], imageUrls: [painting1, painting2],
rotationY: Math.PI / 2 rotationY: Math.PI / 2
}); });
state.pictureFrames.push(pictureFrame); state.pictureFrames.push(pictureFrame);
@ -148,7 +151,7 @@ export function createSceneObjects() {
position: new THREE.Vector3(state.roomSize/2 - 0.1, 2.0, 0.5), position: new THREE.Vector3(state.roomSize/2 - 0.1, 2.0, 0.5),
width: 1.5, width: 1.5,
height: 1, height: 1,
imageUrls: ['/textures/painting2.jpg', '/textures/painting1.jpg'], imageUrls: [painting2, painting1],
rotationY: -Math.PI / 2 rotationY: -Math.PI / 2
}); });
state.pictureFrames.push(pictureFrame2); state.pictureFrames.push(pictureFrame2);

10
tv-player/src/tailwind-config.js
View File

@ -1,10 +0,0 @@
// Configure Tailwind for the button
tailwind.config = {
theme: {
extend: {
colors: {
'tape-red': '#cc3333',
},
}
}
}