diff --git a/.gitignore b/.gitignore index db64de7..1ea3d81 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,6 @@ node_modules # Parcel build cache .parcel-cache/ + +# dotenv +.env \ No newline at end of file diff --git a/js/common.js b/js/common.js index 2ce768b..43a90fe 100644 --- a/js/common.js +++ b/js/common.js @@ -44,12 +44,37 @@ export const startElmApp = (mainModule) => { app.ports.sendAnalyticsEvent.subscribe((event) => { const { category, action, label, value, ...others } = JSON.parse(event); console.debug({ category, action, label, value, others }); - if (gtag) { + if (gtag) { // Google Analytics const data = Object.assign({ "event_category": category, "event_label": label }, value ? { value } : {}); gtag("event", action, Object.assign({}, data, others)); } + + // Send timer settings to my analytics on timer start. + if (`${import.meta.env.VITE_SURVEY_URL}` !== "" && action === "sync_timer_start") { + const params = new URLSearchParams({ + host: document.location.host, + fg: others.setting_fgColor || "", + bg: others.setting_bgColor || "", + ff: others.setting_fgFont || "", + init: others.setting_initial || "", + h: others.setting_show_hours || "", + p: others.setting_show_progress || "", + }); + + fetch(`${import.meta.env.VITE_SURVEY_URL}?${params.toString()}`).then((res) => { + if (res.ok) { + console.debug("Survey request sent."); + } else { + console.log("Survey request failed."); + } + }).catch((err) => { + console.log("Survey request failed.", err); + }) + } }); + + } diff --git a/public/about/en.html b/public/about/en.html index 53b9467..f3226a9 100644 --- a/public/about/en.html +++ b/public/about/en.html @@ -1,238 +1,295 @@ - - - - About SyncTimer - - - - - - + + - - + gtag("event", "activate_tab", { event_label: to }); + } + + - -
-
-

Sync Timer

-

- Countdownable simple timer (stopwatch) for watchparty streaming. -

-
- -
+ +
+
+

Sync Timer

+

+ Countdownable simple timer (stopwatch) for watchparty streaming. +

+
+
-
-
- -
+
+
+
+
-
-
-
-
-

What is SyncTimer?

-

- This timer can be used for simultaneous viewing and distribution of - movies with fans on YouTube and other sites. -

-

- It works only with a browser, and anyone can use it for free, with - no login required. -

-
-
-

Features

-
-
-
- SyncTimer1 -
-

- Can start from the negative -

-
    -
  • Countdown makes it easy to match timing with viewers.
    • -
  • - Allows time for video start operations during the countdown. -
    • -
-
-
-
- SyncTimer2 -
-

- Chroma key support, monospace display -

-
    -
  • Transparent background display for OBS, etc.
    • -
  • - Fixed character width so that the layout does not collapse. -
    • -
-
-
-
- SyncTimer3 -
-

Settings can be saved

-
    -
  • - Timer settings are automatically reflected in the browser URL - as a query -
    • -
  • - Simply enter the URL with the query and the same settings will - be applied -
    • -
-
+
+
+
+
+
+

What is SyncTimer?

+

+ This timer can be used for simultaneous viewing and distribution of + movies with fans on YouTube and other sites. +

+

+ It works only with a browser, and anyone can use it for free, with + no login required. +

+
+
+

Features

+
+
+
+ SyncTimer1 +
+

+ Can start from the negative +

+
    +
  • Countdown makes it easy to match timing with viewers.
    • +
  • + Allows time for video start operations during the countdown. +
    • +
-
-
-

Usage

-
-
-
- - -
- - - + - - + function onPlayerReady(event) { + event.target.setVolume(10); + } + + + + \ No newline at end of file diff --git a/public/about/index.html b/public/about/index.html index cf7ac49..446672e 100644 --- a/public/about/index.html +++ b/public/about/index.html @@ -1,218 +1,254 @@ - - - - SyncTimerについて - - - - - - + + - - + gtag("event", "activate_tab", { event_label: to }); + } + + - -
-
-

Sync Timer

-

同時視聴配信のためのシンプルなタイマー

-
- -
+ +
+
+

Sync Timer

+

同時視聴配信のためのシンプルなタイマー

+
+
-
-
- -
+
+
+
+
-
-
-
-
-

Sync Timer とは？

-

- YouTubeなどでファンと一緒に映画などの同時視聴配信を行うときに使えるタイマーです。 -

-

ブラウザのみで動作し、ログイン不要でどなたでも無料で使えます。

-
-
-

SyncTimerの特徴

-
-
-
- SyncTimer1 -
-

マイナスから開始できる

-
    -
  • カウントダウンで視聴者とタイミングを合わせやすい
    • -
  • 動画の開始操作をする余裕ができる
    • -
-
-
-
- SyncTimer2 -
-

- クロマキー合成対応・等幅表示 -

-
    -
  • OBSなどで背景を透過して表示可能
    • -
  • 文字幅を固定しているのでレイアウトが崩れない
    • -
-
-
-
- SyncTimer3 -
-

設定を維持できる

-
    -
  • タイマーの設定がブラウザのURLに自動反映される
    • -
  • URLを入力するだけで同じ設定が適用される
    • -
-
+
+
+
+
+
+

Sync Timer とは？

+

+ YouTubeなどでファンと一緒に映画などの同時視聴配信を行うときに使えるタイマーです。 +

+

ブラウザのみで動作し、ログイン不要でどなたでも無料で使えます。

+
+
+

SyncTimerの特徴

+
+
+
+ SyncTimer1 +
+

マイナスから開始できる

+
    +
  • カウントダウンで視聴者とタイミングを合わせやすい
    • +
  • 動画の開始操作をする余裕ができる
    • +
-
-
-

使い方を動画で見る

-
-
-
- - -
- - - + - - + function onPlayerReady(event) { + event.target.setVolume(10); + } + + + + \ No newline at end of file