Merge pull request #84 from J-C-B/master

This commit is contained in:
JPVenson
2025-07-11 19:23:28 +03:00
committed by GitHub
54 changed files with 454 additions and 0 deletions
+67
View File
@@ -0,0 +1,67 @@
<!-- markdownlint-disable MD041 first-line-heading -->
<h1 align="center">Jellyfin - Samsung app documentation repo</h1>
<h3 align="center">Part of the <a href="https://jellyfin.org">Jellyfin Project</a></h3>
---
<p align="center">
<img alt="Logo Banner" src="https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG/banner-logo-solid.svg?sanitize=true"/>
</p>
---
This folder contains documentation and screenshots for the Samsung store app listing process.
It is split into subfolders for each area of the certification process, the readme in the "docs" folder is cross linked to other documentation areas.
Initial work was carried out in this <a><a href="https://github.com/jellyfin/jellyfin-tizen/pull/307#issuecomment-2567142677">pull request</a> Then migrated over to here for storage and to keep the app repo clear.
---
In order to publish an application, we'll be following Samsung's official guide: [TV Application Publication Process](https://developer.samsung.com/tv-seller-office/guides/applications/tv-app-publication-process.html).
Overall Steps:
Registration & Upgrade
Certification & Verification
Release
# Submission Process
## Registration & Upgrade
[Registering Applications](https://developer.samsung.com/tv-seller-office/guides/applications/registering-application.html)
- [X] Generate Application ID
- [ ] Upload Application Package
[Entering Application Information](https://developer.samsung.com/tv-seller-office/guides/applications/entering-application-information.html)
- [ ] [Registering Application Image](https://developer.samsung.com/tv-seller-office/guides/applications/entering-application-information.html#Registering-Application-Image) (Icons, Screenshots)
- [ ] Entering Application Title and Description (We have text we can use)
- [ ] Entering Service Information (We can fill in our contact info)
- [ ] Setting Service Country (We don't plan on any restrictions, all available countries will be allowed)
- [ ] Entering Billing Information (N/A, we will choose "Free")
- [ ] Entering Application Feature Information (I believe HDR, and Player)
- [ ] [Entering Verification Information](https://developer.samsung.com/tv-seller-office/guides/applications/entering-application-information.html#Entering-Verification-Information)
## Documentation for project response sections
- [Section 1 - UI Structure](/App-Documentation-Samsung/docs/App-UI-Description/1-UI-Structure/README.md)
- [Section 2 - Use Cases](/App-Documentation-Samsung/docs/App-UI-Description/2-Use-Cases/README.md)
- [Section 3 - Menus and Functions](/App-Documentation-Samsung/docs/App-UI-Description/3-Menus-and-Functions/README.md)
- [Section 4 - Remote Control Keys](/App-Documentation-Samsung/docs/App-UI-Description/4-Remote-Control-Keys/README.md)
- [Section 5 - Language Options](/App-Documentation-Samsung/docs/App-UI-Description/5-Language-Options/README.md)
## Certification & Verification
- [ ] Request Release, which submits for Testing
## Release
- [ ] Set Application Status to "For Sale"
Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -0,0 +1,11 @@
# App Icon
We need 3 images with this characteristics, more info [here](https://developer.samsung.com/smarttv/design/app-icons-and-screenshots.html#app-icon):
- 2015 TV
- [X] .PNG (24 bit & RGB) - Max 300 kB (72 DPI) - 512x423 px ([logo_jellyfin_fg.png](./2015/logo_jellyfin_fg.png))
- \>=2016 TV
- [X] Foreground - .PNG (32 bit & RGBA) - Max 300 kB - 1920x1080 px ([logo_jellyfin_fg.png](./2016/logo_jellfyfin_fg.png))
- [X] Background - .PNG (24 bit & RGB) - Max 300 kB - 1920x1080 px ([logo_jellyfin_bg.png](./2016/logo_jellyfin_bg.png))
Images are copied (and renamed) from [jellyfin/jellyfin-ux](https://github.com/jellyfin/jellyfin-ux/tree/master/branding/tizen).
@@ -0,0 +1,32 @@
# App Icon
## Samsung Requirements
We need 4 images with these characteristics based on Samsung documentation.
Info [here](https://developer.samsung.com/smarttv/design/app-icons-and-screenshots.html#App-Screenshot):
And
[here](https://developer.samsung.com/tv-seller-office/application-publication-process.html#Publishing-New-Applications):
Note - first link does not specify file type, second link specifies JPG - so JPG selected for screenshots (PNG is a must for icons)
|Application package | Dimensions | Format | Maximum Size |
|----------------|--------|--------|--------|
|Application screenshot image | 1280x720 px or 1920x1080 px | JPG | 500 kB |
- 1920 X 1080 px
- JPG
- 500kB or less
- names must be screenshot_appname0X.png (where X is the image number)
Screenshots might need to be taken on a server with only child appropriate content to prevent any issues with the app age rating.
## Images Selected
- [X] [Home page image](./screenshot_jellyfin01.png)
- [X] [Movies page image](./screenshot_jellyfin02.png)
- [X] [Movies detail page image](./screenshot_jellyfin03.png)
- [X] [Player image](./screenshot_jellyfin04.png)
- [X] [Actor page image](./screenshot_jellyfin05.png)
Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

@@ -0,0 +1,26 @@
# UI Structure
## Colaborative workspace
I have created a google slides [HERE](https://docs.google.com/presentation/d/1RaFaoxFI94UVqH53_3I8fuviq9ktNy0hMoSBGLhgWUE/edit?usp=sharing).
We can then export to png for upload to Samsung
## Samsung requirements
Illustrate the complete UI structure of your application.
All application screens and navigation paths must be included
Use a flow graph, tree structure, or depth navigation diagram
<p align="center">
<img alt="Flow example" src="https://developer.samsung.com/media/3111/flowgraph_2018-04-06.png"/>
</p>
## Project Response Section
<img class="screenshot" alt="Translations" src="./Screenshots/Slide01.png"/></a>
Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

@@ -0,0 +1,71 @@
# Use Cases
## Colaborative workspace
I have created a google slides [HERE](https://docs.google.com/presentation/d/1BVVMcW2MJzI41EFU_VNMalA7nsovTTTJuRCVK9ijqfk/edit?usp=sharing).
Overall Steps:
It has sections for flow, we can then export to png for upload to Samsung
## Samsung requirement
Describe the application functionality in detail, by dividing it into clear use cases. The use cases must cover the main functions or scenarios of the application.
You can use text, figures, and screenshots.
Label each use case with a title.
Create as many slides as you need.
In addition to application-specific features, you must also describe any general user login, menu browsing, and in-app purchase features.
Example:
- From the home page, click the “Menu” key. The application menu appears.
- Select “Explore” and click “OK”. The application moves to the “Explore” page, which shows a category list.
- Select a category and click “OK”. The application moves to the category page, which lists the videos in that category.
- You can select a video for playback from the video list, or click “Back” to return to the category list.
<p align="center">
<img alt="Usecase example" src="https://developer.samsung.com/media/3296/userlogin_slide.png"/>
</p>
## Additional requirements
| Application Feature | Required Information(missing information causes application rejection) | NOTES |
| ------------------- | ---------------------------------------------------------------------- |------- |
| User login | <ul><li>Test account with a valid user ID and password</li></ul> | [Demo link](https://demo.jellyfin.org/stable/web/#/login.html?serverid=713dc3fe952b438fa70ed35e4ef0525a&url=%2Fhome.html) user = demo - password is blank [Image Here](./Screenshots/Slide05.png)|
| Device activation | <ul><li>Test account that permits an unlimited number of activated devices</li><li>Instructions for activating the device at an external website, if needed</li></ul> |
| In-app purchases | <ul><li>Valid credit card information for testing</li><li>Test account with funds available for making purchases</li><li>Valid coupon or promotional codes, if supported</li></ul> |
| Gaming | <ul><li>Cheat codes or master account for accessing all game levels</li><li>List of correct responses to any trivia questions</li></ul> |
| Smart View mobile integration | <ul><li>Mobile application package attached to the TV application submission</li><li>Instructions for connecting the mobile application to the TV</li></ul> |
| Geolocation or IP-restricted access | <ul><li>List of countries from which content can be accessed and permission to access the content through a VPN</li><li>Testing IP addresses added to allowed list</li></ul> |
## Project Response Section
<img class="screenshot" alt="Translations" src="./Screenshots/Slide01.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide02.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide03.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide04.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide05.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide06.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide07.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide08.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide09.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide10.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide11.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide12.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide13.png"/></a>
Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

@@ -0,0 +1,65 @@
# Menus and Functions
## Colaborative workspace
I have created a google slides [HERE](https://docs.google.com/presentation/d/1zBI6k_Lts2L2pui6vuNwfvy1AmN91xIo4W_2iDjCpds/edit?usp=sharing).
It has sections for flow, we can then export to png for upload to Samsung
## Samsung requirements
Use labeled screenshots to describe the UI elements on each application screen.
Create as many slides as you need.
Label the UI elements with numbers or text. If there are many elements, use number labels.
Describe the elements in a table.
If the screenshots are not in English, provide translations for titles, headings, and button labels.
<p align="center">
<img alt="Usecase example" src="https://developer.samsung.com/media/3245/numberlabels_redesigned.png"/>
</p>
## Project Response Section
<img class="screenshot" alt="Translations" src="./Screenshots/Slide01.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide02.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide03.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide04.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide05.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide06.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide07.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide08.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide09.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide10.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide11.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide12.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide13.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide14.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide15.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide16.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide17.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide18.png"/></a>
<img class="screenshot" alt="Translations" src="./Screenshots/Slide19.png"/></a>
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

@@ -0,0 +1,19 @@
# Remote Control Keys
* Up
* Navigate upward in the UI
* Down
* Navigate downward in the UI
* During playback, show playback menu
* Left
* Navigate left in the UI
* During playback, skip backward
* Right
* Navigate right in the UI
* During playback, skip forward
* Enter
* Select the current item
* Play / pause
* Exit
* Navigate to the previous screen
Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

@@ -0,0 +1,103 @@
# Languages
## Change the language
- To change the language, go to the Home page.
- Click on the user icon in the top right corner.
- On the Settings page that opens, click on "Display".
- On the now opened Display settings page, under the section "Localization" use the "Display language" dropdown to select a different language.
- Scroll down to the bottom of the Display settings page and click on "Save".
- After a short moment the new language settings should be applied.
## Supported languages
The Jellyfin app supports language auto detection and the following languages:
- Afrikaans (af)
- العربية (ar)
- Беларуская (be-BY)
- Български (bg-BG)
- বাংলা (বাংলাদেশ) (bn_BD)
- Català (ca)
- Čeština (cs)
- Cymraeg (cy)
- Dansk (da)
- Deutsch (de)
- Ελληνικά (el)
- English (United Kingdom) (en-GB)
- English (en-US)
- Esperanto (eo)
- Español (es)
- Español americano (es_419)
- Español (Argentina) (es-AR)
- Español (Dominicana) (es_DO)
- Español (México) (es-MX)
- Eesti (et)
- Euskara (eu)
- فارسی (fa)
- Suomi (fi)
- Filipino (fil)
- Français (fr)
- Français (Canada) (fr-CA)
- Galego (gl)
- Schwiizerdütsch (gsw)
- עִבְרִית (he)
- हिन्दी (hi-IN)
- Hrvatski (hr)
- Magyar (hu)
- Bahasa Indonesia (id)
- Íslenska (is-IS)
- Italiano (it)
- 日本語 (ja)
- Qazaqşa (kk)
- 한국어 (ko)
- Lietuvių (lt-LT)
- Latviešu (lv)
- Македонски (mk)
- മലയാളം (ml)
- मराठी (mr)
- Bahasa Melayu (ms)
- Norsk bokmål (nb)
- नेपाली (ne)
- Nederlands (nl)
- Norsk nynorsk (nn)
- ਪੰਜਾਬੀ (pa)
- Polski (pl)
- Pirate (pr)
- Português (pt)
- Português (Brasil) (pt-BR)
- Português (Portugal) (pt-PT)
- Românește (ro)
- Русский (ru)
- Slovenčina (sk)
- Slovenščina (sl-SI)
- Shqip (sq)
- Српски (sr)
- Svenska (sv)
- தமிழ் (ta)
- తెలుగు (te)
- ภาษาไทย (th)
- Türkçe (tr)
- Українська (uk)
- اُردُو (ur_PK)
- Tiếng Việt (vi)
- 汉语 (简化字) (zh-CN)
- 漢語 (繁体字) (zh-TW)
- 廣東話 (香港) (zh-HK)
## Screenshots
*Home page*
![Home page](./01-Home-Page.png)
*Settings page*
![Settings page](./02-Settings-Page.png)
*Display settings page*
![Display settings page](./03-Display-Settings-Page.png)
*Save display settings*
![Display settings save](./04-Display-Settings-Save.png)
@@ -0,0 +1,60 @@
# Application UI Description
## Checklist
- [X] UI Structure
- [X] Use Cases
- [X] Menus and Functions
- [X] Remote Control Keys
- [X] Language Options
## Samsung requirements
[Entering Application Requirements ](https://developer.samsung.com/tv-seller-office/checklists-for-distribution/application-ui-description.html)
### UI Structure
Use a flow graph, tree structure, or depth navigation diagram to illustrate the navigation between all screens in the application.
The UI structure diagram shows the overall structure of the application. It does not show or describe the content on individual screens.
<p align="center">
<img alt="Flow example" src="https://developer.samsung.com/media/3111/flowgraph_2018-04-06.png"/>
</p>
### Use Cases
<p align="center">
<img alt="Usecase example" src="https://developer.samsung.com/media/3296/userlogin_slide.png"/>
</p>
Describe the application functionality in detail, by dividing it into clear use cases. A use case is a specific and defined task the user can or must do, such as searching for content or playing a video. The use cases must cover the main functions or scenarios of the application. In addition to application-specific features, you must also describe any general user login, menu browsing, and in-app purchase features.
Warning
Do not provide a list of application screens, describing what the user can do on each screen. Such information must be provided using screenshots in the Menus and Functions section.
The following guidelines apply to use case descriptions:
Label each use case with a title.
For each use case, describe the steps the user must perform to do the task. You can use text, figures, and screenshots in the descriptions.
Since the launch process is the same for all applications, do not describe how to launch the application.
Refer to application screens with the names you have defined for them in the UI structure diagram.
### Menus and Functions
<p align="center">
<img alt="Usecase example" src="https://developer.samsung.com/media/3245/numberlabels_redesigned.png"/>
</p>
Use labeled screenshots to describe the UI elements and their functions on each application screen.
The following guidelines apply to menu and function descriptions:
Provide a screenshot of each screen defined in the UI structure diagram.
Label all clickable and non-clickable UI elements with names or numbers. If there are many elements, use number labels.
Accompany each screenshot with a table describing the UI elements. For clickable elements, describe what happens when the element is clicked.
Provide English translations for titles, headings, and button labels, if needed.