Fix demo application on Tizen 5.0

package.json

@@ -7,8 +7,9 @@
 	},
 	"type": "module",
 	"scripts": {
-		"dev": "vite --open",
+		"dev": "vite",
 		"build": "vite build",
+		"build:tizen": "vite build --outDir tizen/dist",
 		"preview": "vite preview",
 		"deploy": "PORT=9494 NODE_ENV=production node build/",
 		"deploy:electron": "vite build && electron-builder -mw --x64 --config build.config.json; electron-builder -m --arm64 --config build.config.json",

src/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import I18n from './lib/components/Lang/I18n.svelte';
-	import { Link, navigate, Route, Router } from 'svelte-navigator';
-	import { Container, handleKeyboardNavigation } from './lib/actions/focusAction';
+	import { Link, Route, Router } from 'svelte-navigator';
+	import { handleKeyboardNavigation, mainContainer } from './lib/actions/focusAction';
 	import SeriesPage from './lib/pages/SeriesPage.svelte';
 	import MoviesPage from './lib/pages/MoviesPage.svelte';
 	import LibraryPage from './lib/pages/LibraryPage.svelte';
@@ -12,14 +12,14 @@
 	import { Bookmark, CardStack, Gear, Laptop, MagnifyingGlass } from 'radix-icons-svelte';
 	import NavbarItem from './lib/components-new/NavbarItem.svelte';
 
-	const mainContainer = new Container('main').setDirection('horizontal').setFocusByDefault(true);
-
 	const navBarContainer = mainContainer.createChild('nav').setDirection('vertical');
 	const isNavBarOpen = navBarContainer.hasFocusWithin;
 
 	const contentContainer = mainContainer.createChild('content').setDirection('vertical');
 
-	onMount(() => navigate('series'));
+	onMount(() => {
+		contentContainer.focus();
+	});
 </script>
 
 <I18n />
@@ -31,7 +31,7 @@
 			})}
 		>
 			<div>
-				<Link to="series" class="rounded-sm flex items-center">
+				<Link to="" class="rounded-sm flex items-center">
 					<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
 					<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
 				</Link>
@@ -65,7 +65,7 @@
 		</nav>
 
 		<div class="flex-1 flex flex-col min-w-0">
-			<Route path="series">
+			<Route>
 				<SeriesPage container={contentContainer} />
 			</Route>
 			<Route path="movies">

src/lib/actions/focusAction.ts

@@ -1,4 +1,5 @@
 import { derived, get, type Readable, type Writable, writable } from 'svelte/store';
+import { navigate } from 'svelte-navigator';
 
 export type Registerer = (htmlElement: HTMLElement) => { destroy: () => void };
 
@@ -228,6 +229,7 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
 
 	if (!currentlyFocusedObject) {
 		console.error('No focused object!!!');
+		mainContainer.focus();
 		return;
 	}
 
@@ -245,3 +247,6 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
 }
 
 export const focusedObject = Container.focusedObject;
+export const mainContainer = new Container('main')
+	.setDirection('horizontal')
+	.setFocusByDefault(true);

tizen/.gitignore

@@ -0,0 +1,2 @@
+.sign/*
+*.wgt

tizen/.project

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>Reiverr</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>json.validation.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.tizen.web.project.builder.WebBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>json.validation.nature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+		<nature>org.tizen.web.project.builder.WebNature</nature>
+	</natures>
+</projectDescription>

tizen/.tproject

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<tproject xmlns="http://www.tizen.org/tproject">
+    <platforms>
+        <platform>
+            <name>tv-samsung-7.0</name>
+        </platform>
+    </platforms>
+    <package>
+        <blacklist/>
+    </package>
+</tproject>

tizen/config.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/SvelteTizen" version="1.0.0" viewmodes="maximized">
+    <tizen:application id="JZUbM5WimZ.SvelteTizen" package="JZUbM5WimZ" required_version="2.3"/>
+    <content src="index.html"/>
+    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
+    <icon src="icon.png"/>
+    <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>
+    <name>SvelteTizen</name>
+    <tizen:profile name="tv-samsung"/>
+    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
+</widget>

tizen/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
+
+    <title>Tizen Web IDE - Tizen - Samsung Tizen TV basic Application</title>
+
+    <link rel="stylesheet" type="text/css" href="css/style.css"/>
+    <script src="js/main.js"></script>
+    <meta http-equiv="refresh" content="0; url=dist/index.html" />
+</head>
+
+<body>
+  
+</body>
+</html>

vite.config.ts

@@ -5,7 +5,8 @@ import viteLegacyPlugin from '@vitejs/plugin-legacy';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [viteLegacyPlugin(), svelte(), viteSingleFile()]
+	plugins: [viteLegacyPlugin(), svelte(), viteSingleFile()],
+	optimizeDeps: { exclude: ['svelte-navigator'] }
 
 	// base: '/dist',
 	//     experimental: {