Merge demo and options pages

Repository details (talkie)
Project page
talkie
Project log category
(588 entries)
Repository
@joelpurra/talkie
Owner
@joelpurra
Contributors
Contributors on Github
Project status
⏲️ This project has had recent commits.
📂 This project is open.
🌠 This project is popular.
Repository activity period
🗓
Commits
630 commits
Stars
71 stars
Commit details (737192fc)
Author
Authored at
Committer
Joel Purra
Committed at

Commit message

Merge demo and options pages

  • The options page is a concept in web extensions, with browser support in menus etcetera.
    • It is sometimes wrapped in a smaller <iframe>, to integrate with the browser's own styling. This keeps the options page layout simple and small.
  • The demo page is a standalone page (opened in a separate tab/window), used to showcase Talkie's features.
  • Because of a (temporary? accidental?) change in how some browsers handle the options page in iframe mode, Talkie switched to always using a separate tab for the options page.
  • With both the demo and options pages being full tabs, their perceived differences are much smaller than before.
    • Several sections/headings/tabs are the same: voices, about.
    • In particular, the voice listing (used to demo available voices) on the demo page is confused with changing the voice settings (used to change default voice per language, pitch and speed) in the options page.
  • The main Talkie button's popup linked to both pages, as well as a smaller in-popup version of the options. It was not clear to users which link opened which page.
  • To reduce confusion between the two pages, they have been merged into one, the new options page. The new page is based on the demo page, but includes all (non-overlapping) features of the old options page.
  • In particular, the voice settings have been changed to a mixture of the old demo listing (view only) and old options form (editable).
Raw text
Merge demo and options pages

- The options page is a concept in web extensions, with browser support in menus etcetera.
  - It is sometimes wrapped in a smaller `<iframe>`, to integrate with the browser's own styling. This keeps the options page layout simple and small.
- The demo page is a standalone page (opened in a separate tab/window), used to showcase Talkie's features.
- Because of a (temporary? accidental?) change in how some browsers handle the options page in iframe mode, Talkie switched to always using a separate tab for the options page.
- With both the demo and options pages being full tabs, their perceived differences are much smaller than before.
  - Several sections/headings/tabs are the same: voices, about.
  - In particular, the voice listing (used to demo available voices) on the demo page is confused with changing the voice settings (used to change default voice per language, pitch and speed) in the options page.
- The main Talkie button's popup linked to both pages, as well as a smaller in-popup version of the options. It was not clear to users which link opened which page.
- To reduce confusion between the two pages, they have been merged into one, the new options page. The new page is based on the demo page, but includes all (non-overlapping) features of the old options page.
- In particular, the voice settings have been changed to a mixture of the old demo listing (view only) and old options form (editable).

Changed files (196)

Path Additions Deletions
DEVELOP.md +6 -6
code/build/LICENSE-BANNER +2 -2
code/package.json +1 -0
code/packages/README.md +0 -1
code/packages/all-renderer/package.json +0 -1
code/packages/all-renderer/src/get-all-applications.ts +0 -2
code/packages/all-renderer/tsconfig.cjs.json +0 -3
code/packages/all-renderer/tsconfig.esm.json +0 -3
code/packages/all-renderer/tsconfig.json +0 -3
code/packages/browser-background/src/background/create-talkie-services.ts +12 -3
code/packages/browser-background/src/background/get-command-map.ts +1 -1
code/packages/browser-background/src/talkie-background.ts +10 -14
code/packages/browser-background/src/talkie-speaker-helpers.ts +107 -0
code/packages/browser-background/src/talkie-speaker.ts +94 -81
code/packages/browser-background/src/voice-language-manager.ts +8 -18
code/packages/browser-background/src/voice-manager.ts +1 -0
code/packages/browser-background/src/welcome-manager.ts +1 -1
code/packages/browser-shared/package.json +1 -0
code/packages/demo-application/.npmrc +0 -1
code/packages/demo-application/package.json +0 -51
code/packages/demo-application/rollup.config.js +0 -39
code/packages/demo-application/src/components/main.tsx +0 -325
code/packages/demo-application/src/components/sections/about.tsx +0 -110
code/packages/demo-application/src/components/sections/voices.tsx +0 -467
code/packages/demo-application/src/containers/app.tsx +0 -106
code/packages/demo-application/src/containers/voices-container.tsx +0 -117
code/packages/demo-application/src/demo.ts +0 -45
code/packages/demo-application/src/hydrate.ts +0 -40
code/packages/demo-application/src/slices/index.ts +0 -41
code/packages/demo-application/src/store/index.ts +0 -30
code/packages/demo-application/tsconfig.cjs.json +0 -28
code/packages/demo-application/tsconfig.esm.json +0 -28
code/packages/demo-application/tsconfig.json +0 -28
code/packages/demo-renderer/.npmrc +0 -1
code/packages/demo-renderer/package.json +0 -41
code/packages/demo-renderer/src/demo-html.ts +0 -64
code/packages/demo-renderer/src/demo.html +0 -32
code/packages/demo-renderer/src/demo.template.html +0 -44
code/packages/demo-renderer/src/dummy.ts +0 -28
code/packages/demo-renderer/tsconfig.cjs.json +0 -16
code/packages/demo-renderer/tsconfig.esm.json +0 -16
code/packages/demo-renderer/tsconfig.json +0 -19
code/packages/options-application/package.json +3 -2
code/packages/{demo-application => options-application}/src/components/footer.tsx +6 -17
code/packages/{demo-application => options-application}/src/components/header.tsx +3 -1
code/packages/options-application/src/components/main.tsx +150 -46
code/packages/options-application/src/components/sections/about.tsx +74 -39
code/packages/options-application/src/components/sections/editions/talkie-premium-edition.tsx +0 -4
code/packages/{demo-application => options-application}/src/components/sections/features.tsx +1 -1
code/packages/{demo-application => options-application}/src/components/sections/support.tsx +0 -0
code/packages/options-application/src/components/sections/text.tsx +1 -1
code/packages/{demo-application => options-application}/src/components/sections/usage.tsx +3 -3
code/packages/options-application/src/components/sections/voices.tsx +131 -235
code/packages/options-application/src/components/sections/voices/available-languages.tsx +0 -174
code/packages/options-application/src/components/sections/voices/available-voices.tsx +0 -141
code/packages/options-application/src/components/sections/voices/dialect-voice-options.tsx +142 -0
code/packages/options-application/src/components/sections/voices/dialect-voice.tsx +117 -0
code/packages/options-application/src/components/sections/voices/dialect-voices.tsx +122 -0
code/packages/options-application/src/components/sections/voices/dialect.tsx +106 -0
code/packages/options-application/src/components/sections/voices/dialects.tsx +119 -0
code/packages/options-application/src/components/sections/voices/intro.tsx +58 -0
code/packages/options-application/src/components/sections/voices/language-group.tsx +161 -0
code/packages/options-application/src/components/sections/voices/language-groups.tsx +136 -0
code/packages/options-application/src/components/sections/voices/sample-text.tsx +0 -84
code/packages/options-application/src/components/sections/voices/{ => voice-options}/pitch.tsx +3 -3
code/packages/options-application/src/components/sections/voices/{ => voice-options}/range-with-heading.tsx +5 -6
code/packages/options-application/src/components/sections/voices/{ => voice-options}/rate.tsx +4 -4
code/packages/options-application/src/components/sections/voices/{ => voice-options}/toggle-default.tsx +33 -35
code/packages/options-application/src/components/sections/welcome.tsx +253 -0
code/packages/{demo-application/src/components/sections/welcome.tsx => options-application/src/components/support/install-voices.tsx} +24 -210
code/packages/options-application/src/containers/about-container.tsx +30 -37
code/packages/options-application/src/containers/app.tsx +35 -20
code/packages/options-application/src/containers/editions-container.tsx +1 -1
code/packages/options-application/src/containers/install-voices-container.tsx +93 -0
code/packages/options-application/src/containers/text-container.tsx +6 -6
code/packages/options-application/src/containers/voices-container.tsx +0 -194
code/packages/options-application/src/containers/voices/dialect-container.tsx +118 -0
code/packages/options-application/src/containers/voices/dialect-voice-container.tsx +87 -0
code/packages/options-application/src/containers/voices/dialect-voice-options-container.tsx +185 -0
code/packages/options-application/src/containers/voices/dialect-voices-container.tsx +80 -0
code/packages/options-application/src/containers/voices/dialects-container.tsx +78 -0
code/packages/options-application/src/containers/voices/language-group-container.tsx +123 -0
code/packages/options-application/src/containers/voices/language-groups-container.tsx +81 -0
code/packages/options-application/src/containers/voices/voices-container.tsx +181 -0
code/packages/{demo-application => options-application}/src/containers/welcome-container.tsx +36 -51
code/packages/options-application/src/hydrate.ts +1 -1
code/packages/options-application/src/selectors/index.ts +3 -0
code/packages/options-application/src/selectors/voices.ts +188 -0
code/packages/options-application/src/slices/index.ts +5 -7
code/packages/options-application/src/slices/navigation.ts +0 -54
code/packages/options-application/src/slices/settings.ts +78 -0
code/packages/options-application/src/slices/voices.ts +133 -111
code/packages/options-application/tsconfig.cjs.json +3 -0
code/packages/options-application/tsconfig.esm.json +3 -0
code/packages/options-application/tsconfig.json +0 -3
code/packages/options-renderer/tsconfig.cjs.json +0 -3
code/packages/options-renderer/tsconfig.esm.json +0 -3
code/packages/output-webext-chrome/package.json +1 -1
code/packages/output-webext-webextension/package.json +1 -1
code/packages/output-webext/src/package-files/code.txt +2 -3
code/packages/popup-application/src/components/sections/footer.tsx +7 -2
code/packages/popup-application/src/components/sections/header.tsx +7 -3
code/packages/popup-application/src/components/sections/menu.tsx +6 -5
code/packages/popup-application/src/components/sections/status.tsx +6 -6
code/packages/popup-application/src/containers/app.tsx +1 -1
code/packages/popup-application/src/containers/progress-container.tsx +1 -1
code/packages/popup-application/src/slices/index.ts +1 -1
code/packages/renderer/src/render.ts +1 -1
code/packages/shared-application-helpers/src/transform-voices.ts +65 -4
code/packages/shared-application-helpers/src/voices.ts +0 -44
code/packages/shared-application/package.json +2 -0
code/packages/shared-application/src/components/discretional-details.tsx +115 -0
code/packages/shared-application/src/components/discretional.tsx +3 -3
code/packages/shared-application/src/components/form/checkbox.tsx +4 -1
code/packages/shared-application/src/components/loading.tsx +25 -7
code/packages/shared-application/src/components/markdown.tsx +85 -0
code/packages/shared-application/src/components/navigation/nav.tsx +4 -3
code/packages/{options-application => shared-application}/src/components/range/logarithmic-scale-range.tsx +0 -0
code/packages/{options-application => shared-application}/src/components/range/scale-range-datalist-option.tsx +0 -0
code/packages/{options-application => shared-application}/src/components/range/scale-range-datalist.tsx +0 -0
code/packages/{options-application => shared-application}/src/components/range/scale-range.tsx +1 -1
code/packages/shared-application/src/components/section/edition-section.tsx +9 -6
code/packages/shared-application/src/components/section/information-section.tsx +139 -0
code/packages/shared-application/src/configuration/configuration.ts +15 -35
code/packages/shared-application/src/containers/nav-container.tsx +2 -2
code/packages/shared-application/src/containers/providers.tsx +1 -1
code/packages/shared-application/src/containers/state-root.tsx +1 -1
code/packages/shared-application/src/hocs/broadcaster.tsx +1 -1
code/packages/shared-application/src/hocs/configure.tsx +1 -1
code/packages/shared-application/src/hocs/pass-selected-text-to-background.tsx +1 -1
code/packages/shared-application/src/hocs/translate.tsx +1 -1
code/packages/shared-application/src/metadata-manager.ts +0 -5
code/packages/shared-application/src/selectors/errors.ts +5 -4
code/packages/shared-application/src/selectors/index.ts +2 -0
code/packages/shared-application/src/selectors/languages.ts +57 -0
code/packages/shared-application/src/selectors/voices.ts +106 -18
code/packages/shared-application/src/slices/index.ts +5 -1
code/packages/shared-application/src/slices/languages-hack-functions.ts +121 -0
code/packages/shared-application/src/slices/languages.ts +91 -0
code/packages/shared-application/src/slices/speaking.ts +24 -8
code/packages/shared-application/src/slices/voices-hack-functions.ts +0 -43
code/packages/shared-application/src/slices/voices.ts +0 -39
code/packages/{demo-application/src/selectors/index.ts => shared-application/src/store/combine-reducers.ts} +9 -5
code/packages/shared-application/src/store/get-store.ts +4 -9
code/packages/shared-application/src/store/index.ts +1 -1
code/packages/shared-application/src/styled/button/button-base.tsx +1 -0
code/packages/shared-application/src/styled/layout/layout-base.tsx +1 -0
code/packages/shared-application/src/styled/table/table-base.tsx +4 -1
code/packages/shared-application/src/styles/button/button-base.ts +17 -5
code/packages/shared-application/src/styles/color/color-base.ts +53 -0
code/packages/shared-application/src/styles/layout/layout-base.ts +5 -3
code/packages/shared-application/src/styles/list/list-base.ts +4 -2
code/packages/shared-application/src/styles/table/table-base.ts +17 -6
code/packages/shared-application/src/styles/text/errors.ts +3 -1
code/packages/shared-application/src/styles/text/lighter.ts +5 -3
code/packages/shared-application/src/styles/text/text-base.ts +25 -21
code/packages/shared-application/src/unshared/slices/index.ts +1 -1
code/packages/shared-application/tsconfig.json +3 -0
code/packages/shared-locales/src/data/_locales/ar/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/bg/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/cs/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/da/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/de/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/el/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/en/base.json +1 -24
code/packages/shared-locales/src/data/_locales/es/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/fi/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/fr/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/he/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/hi/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/hu/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/id/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/it/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/ja/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/ko/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/nb/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/nl/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/pl/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/pt/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/ro/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/ru/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/sk/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/sv/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/th/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/tr/automatic.json +0 -22
code/packages/shared-locales/src/data/_locales/zh/automatic.json +0 -22
code/packages/shared-locales/src/talkie-locale-helper.ts +6 -5
code/packages/shared-resources/src/resources/style/demo.css +0 -60
code/packages/shared-resources/src/resources/style/options.css +37 -5
code/packages/shared-resources/src/resources/style/shared.css +10 -1
code/packages/split-environment-interfaces/src/iapi.ts +7 -4
code/packages/split-environment-interfaces/src/moved-here/ivoices.ts +1 -5
code/packages/split-environment-node/src/server-specific/api.ts +11 -4
code/packages/split-environment-webextension/src/browser-specific/api.ts +14 -5
code/packages/split-environment-webextension/src/browser-specific/italkie-services.ts +3 -3
code/tsconfig.json +0 -2

Commit categories (3)