[SAMPLE APP][Stream-player] View description added
authorAgnieszka Janowicz <a.janowicz@samsung.com>
Mon, 21 Dec 2015 13:15:09 +0000 (14:15 +0100)
committerMichal Pawluk <m.pawluk@samsung.com>
Mon, 21 Dec 2015 20:03:34 +0000 (21:03 +0100)
Change-Id: Ia2342225036d97ab10a2ce230fd89fa7f286b68a
Signed-off-by: Michal Skorupinski <m.skorupinsk@samsung.com>
Signed-off-by: Agnieszka Janowicz <a.janowicz@samsung.com>
org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-display-section.png [new file with mode: 0644]
org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-options-section.png [new file with mode: 0644]
org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-playback-options-section.png [new file with mode: 0644]
org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-toolbar-section.png [new file with mode: 0644]
org.tizen.sampledescriptions/html/mobile_n/stream-player-mn.html

diff --git a/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-display-section.png b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-display-section.png
new file mode 100644 (file)
index 0000000..3cd66da
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-display-section.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-options-section.png b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-options-section.png
new file mode 100644 (file)
index 0000000..f02ebb5
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-options-section.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-playback-options-section.png b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-playback-options-section.png
new file mode 100644 (file)
index 0000000..1c03a75
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-playback-options-section.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-toolbar-section.png b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-toolbar-section.png
new file mode 100644 (file)
index 0000000..402ff90
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stream-player/view/stream-player-toolbar-section.png differ
index 5edb70c..c3b8ef7 100644 (file)
@@ -27,8 +27,8 @@
        <h1>Stream-Player Sample Overview</h1>
        <p>This sample demonstrates how to use the Player API to play audio and video files as well as stream media files from the Web.</p>
 
-       <p>     The figure below illustrates the application's view.</p>
-       <p class="figure">Figure: Stream-Player application's screen</p>
+       <p>The figure below illustrates the application's view.</p>
+       <p class="figure">Figure 1: Stream-Player application's screen</p>
 <p id="app-screenshot" style="text-align:center;">
        <img alt="Application screen" height="364" hspace="20" src="../images/stream-player/stream-player-application-view.png" />
 </p>
@@ -42,7 +42,7 @@
        </ul>
 </p>
 
-<p class="figure">Figure: Stream-Player layout structure</p>
+<p class="figure">Figure 2: Stream-Player layout structure</p>
 <p id="layout-structure" style="text-align:center;">
        <img alt="Stream-Player layout structure" height="550" hspace="80" src="../images/stream-player/stream-player-layout-structure.png" />
 </p>
@@ -55,7 +55,7 @@
        </ul>
 </p>
 
-<p class="figure">Figure: Stream-Player application workflow</p>
+<p class="figure">Figure 3: Stream-Player application workflow</p>
 <p id="stream-player-application-workflow" style="text-align:center;">
        <img alt="Stream-Player application workflow" height="550" hspace="80" src="../images/stream-player/stream-player-application-workflow.png" />
 </p>
 <h3>Type Definitions:</h3>
 <p> The <span style="font-family: Courier New,Courier,monospace">view_info_s</span> structure contains references to objects created by the view module.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;struct view_info_s {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *grid;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button_panel;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *pause_play_btn;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *toolbar;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *progress_panel;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *seek_slider;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *playback_rate_slider;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *buffer_progress_bar;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *option_panel;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *mute_check;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *display;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *album_art;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *current_popup;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool play_btn_play_mode_on;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int found_storage_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Stringshare *video_path;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Stringshare *audio_path;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Stringshare *stream_uri;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool use_stream_album_art;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Timer *progress_timer;
-&nbsp;&nbsp;&nbsp;};
+struct view_info_s {
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *conform;
+&nbsp;&nbsp;&nbsp;Evas_Object *grid;
+&nbsp;&nbsp;&nbsp;Evas_Object *button_panel;
+&nbsp;&nbsp;&nbsp;Evas_Object *pause_play_btn;
+&nbsp;&nbsp;&nbsp;Evas_Object *toolbar;
+&nbsp;&nbsp;&nbsp;Evas_Object *progress_panel;
+&nbsp;&nbsp;&nbsp;Evas_Object *seek_slider;
+&nbsp;&nbsp;&nbsp;Evas_Object *playback_rate_slider;
+&nbsp;&nbsp;&nbsp;Evas_Object *buffer_progress_bar;
+&nbsp;&nbsp;&nbsp;Evas_Object *option_panel;
+&nbsp;&nbsp;&nbsp;Evas_Object *mute_check;
+&nbsp;&nbsp;&nbsp;Evas_Object *display;
+&nbsp;&nbsp;&nbsp;Evas_Object *album_art;
+&nbsp;&nbsp;&nbsp;Evas_Object *current_popup;
+&nbsp;&nbsp;&nbsp;Eina_Bool play_btn_play_mode_on;
+&nbsp;&nbsp;&nbsp;int found_storage_id;
+&nbsp;&nbsp;&nbsp;Eina_Stringshare *video_path;
+&nbsp;&nbsp;&nbsp;Eina_Stringshare *audio_path;
+&nbsp;&nbsp;&nbsp;Eina_Stringshare *stream_uri;
+&nbsp;&nbsp;&nbsp;Eina_Bool use_stream_album_art;
+&nbsp;&nbsp;&nbsp;Ecore_Timer *progress_timer;
+};
 </pre>
 
 <p>The <span style="font-family: Courier New,Courier,monospace">player_s</span> structure contains the objects used in the model.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;struct player_s {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;player_h player;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *display;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct player_callback_s callbacks;
-&nbsp;&nbsp;&nbsp;};
+struct player_s {
+&nbsp;&nbsp;&nbsp;player_h player;
+&nbsp;&nbsp;&nbsp;Evas_Object *display;
+&nbsp;&nbsp;&nbsp;struct player_callback_s callbacks;
+};
 </pre>
 
 
 <p>The <span style="font-family: Courier New,Courier,monospace">player_callback_s</span> structure contains pointers to callback functions used to send information from the model to the view.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;struct player_callback_s {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Status_Changed_cb_t player_status_changed_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Progress_Changed_cb_t player_progress_changed_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Progress_End_cb_t player_progress_end_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Screen_cb_t player_screen_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Message_cb_t player_msg_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player_Buffer_progress_cb_t player_buffer_progress_cb;
-&nbsp;&nbsp;&nbsp;};
+struct player_callback_s {
+&nbsp;&nbsp;&nbsp;Player_Status_Changed_cb_t player_status_changed_cb;
+&nbsp;&nbsp;&nbsp;Player_Progress_Changed_cb_t player_progress_changed_cb;
+&nbsp;&nbsp;&nbsp;Player_Progress_End_cb_t player_progress_end_cb;
+&nbsp;&nbsp;&nbsp;Player_Screen_cb_t player_screen_cb;
+&nbsp;&nbsp;&nbsp;Player_Message_cb_t player_msg_cb;
+&nbsp;&nbsp;&nbsp;Player_Buffer_progress_cb_t player_buffer_progress_cb;
+};
 </pre>
 
 <p>The following callbacks are provided:</p>
 <p>The entire application life-cycle is implemented in the main.c file, using the common Tizen application structure:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;int main(int argc, char *argv[])
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+int main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL, };
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL, };
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = __app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = __app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.create = __app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = __app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, __ui_app_lang_changed, NULL);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, __ui_app_lang_changed, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &event_callback, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
-&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &event_callback, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+}
 </pre>
 
 The Stream-Player application's initialization is done within the <span style="font-family: Courier New,Courier,monospace">__app_create()</span> callback function where the <span style="font-family: Courier New,Courier,monospace">player_model_init()</span> function is responsible for the model's initialization. The <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function is used to initialize the view module. On the application's termination, the <span style="font-family: Courier New,Courier,monospace">__app_terminate()</span> callback function is invoked, and all resources allocated within the model are freed.
 
 <!-- ********************************************************************************** -->
 
+<h3 id="view">View</h3>
+<p>The entire application's GUI is implemented using Elementary widgets and containers. The application's layout is shown in Figure 2. As mentioned above, the application's layout is divided into the following sections:</p>
+<ul>
+       <li>Toolbar section,</li>
+       <li>Display section,</li>
+       <li>Playback options section,</li>
+       <li>Options section.</li>
+</ul>
+<p>Note that every section listed above (except for the display) is implemented using an Elementary <span style="font-family: Courier New,Courier,monospace">Box</span> container, filled with Elementary widgets. This box is then packed into a <span style="font-family: Courier New,Courier,monospace">grid</span> container.</p>
+
+
+<table>
+       <caption>Table: Base view creation code snippets and figures</caption>
+       <colgroup>
+               <col width="25%"></col>
+               <col width="50%"></col>
+               <col width="25%"></col>
+       </colgroup>
+       <tbody>
+               <tr>
+                       <th>Description</th>
+                       <th>Code snippet</th>
+                       <th>Figure</th>
+               </tr>
+
+               <tr>
+                       <td>The toolbar section is created using the <span style="font-family: Courier New,Courier,monospace">__create_toolbar()</span> function. The toolbar contains five buttons, created using the <span style="font-family: Courier New,Courier,monospace">__create_button()</span> function. The functions provide the user with access to both video and audio files as well as the ability to stream online files. The last two buttons allow the user to capture a screenshot of the displayed video and display information about current file.</td>
+                       <td>
+                               <pre class="prettyprint">
+static Eina_Bool __create_toolbar(void)
+{
+&nbsp;&nbsp;&nbsp;s_info.toolbar = elm_box_add(s_info.grid);
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(s_info.toolbar, 10, 0);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(s_info.toolbar, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_grid_pack(s_info.grid,  s_info.toolbar,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOOLBAR_GEOMETRY_X, TOOLBAR_GEOMETRY_Y,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOOLBAR_GEOMETRY_W, TOOLBAR_GEOMETRY_H);
+
+&nbsp;&nbsp;&nbsp;if (!__create_button(s_info.toolbar,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_FALSE,  0.1, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AUDIO_FILE_PATH, __toolbar_file_open_cb, (void*)EINA_FALSE))
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (!__create_button(s_info.toolbar,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_FALSE,  0.1, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIDEO_FILE_PATH, __toolbar_file_open_cb, (void*)EINA_TRUE))
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (!__create_uri_entry())
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (!__create_button(s_info.toolbar,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_FALSE, 0.1, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SCREENSHOT_ICON_FILE, __screen_capture_btn_clicked_cb, NULL))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (!__create_button(s_info.toolbar,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_FALSE, 0.1, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;INFO_ICON_FILE, __info_display_btn_clicked_cb, NULL))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.toolbar);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
+                       </td>
+                       <td>
+                               <p style="text-align:center;">
+                                       <img alt="stream-player-toolbar-section" src="../images/stream-player/view/stream-player-toolbar-section.png" />
+                               </p>
+                       </td>
+               </tr>
+
+               <tr>
+                       <td>
+                               The display section is made of two stacked objects:
+                               <ul>
+                                       <li>The Display (top object) - used to display the played video file;</li>
+                                       <li>The album art (bottom object) - used to display the file's album art.</li>
+                               </ul>
+                       </td>
+                       <td>
+                               <pre class="prettyprint">
+static Eina_Bool __add_display(void)
+{
+&nbsp;&nbsp;&nbsp;if (!s_info.grid)
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;s_info.display = evas_object_image_add(evas_object_evas_get(s_info.grid));
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_image_filled_set(s_info.display, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.display,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_CALLBACK_MOUSE_DOWN, __display_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(s_info.grid, s_info.display,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY_GEOMETRY_X, DISPLAY_GEOMETRY_Y,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY_GEOMETRY_W, DISPLAY_GEOMETRY_H);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.display);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+
+static Eina_Bool __add_album_art(void)
+{
+&nbsp;&nbsp;&nbsp;if (!s_info.grid) {
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;s_info.album_art = elm_image_add(s_info.grid);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.display,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_CALLBACK_MOUSE_DOWN, __display_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(s_info.grid, s_info.album_art,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY_GEOMETRY_X, DISPLAY_GEOMETRY_Y,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY_GEOMETRY_W, DISPLAY_GEOMETRY_H);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
+                       </td>
+                       <td>
+                               <p style="text-align:center;">
+                                       <img alt="stream-player-display-section" src="../images/stream-player/view/stream-player-display-section.png" />
+                               </p>
+                       </td>
+               </tr>
+
+               <tr>
+                       <td>The playback options section is created from the following objects:
+                               <ul>
+                                       <li>Elm_Slider - used to set seek position;</li>
+                                       <li>Elm_Button - used to stop the playback;</li>
+                                       <li>Elm_Checkbox - used to toggle the pause mode;</li>
+                               </ul>
+                       </td>
+                       <td>
+                               <pre class="prettyprint">
+static Eina_Bool __create_button_panel(void)
+{
+&nbsp;&nbsp;&nbsp;s_info.button_panel = elm_box_add(s_info.grid);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.button_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.button_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(s_info.button_panel, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_grid_pack(s_info.grid,  s_info.button_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BUTTON_PANEL_GEOMETRY_X, BUTTON_PANEL_GEOMETRY_Y,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BUTTON_PANEL_GEOMETRY_W, BUTTON_PANEL_GEOMETRY_H);
+
+&nbsp;&nbsp;&nbsp;if (!__create_button(s_info.button_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_TRUE, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BTN_ICON_STOP, __button_stop_clicked_cb, NULL))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;s_info.pause_play_btn = __create_button(s_info.button_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_TRUE, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BTN_ICON_PLAY, __button_pause_play_clicked_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.button_panel);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
+                       </td>
+                       <td>
+                               <p style="text-align:center;">
+                                       <img alt="stream-player-playback-options-section" src="../images/stream-player/view/stream-player-playback-options-section.png" />
+                               </p>
+                       </td>
+               </tr>
+
+               <tr>
+                       <td>The playback options section is created from the following objects:
+                               <ul>
+                                       <li>Elm_Slider - used to set the volume level;</li>
+                                       <li>Elm_Checkbox - used to set the mute mode;</li>
+                                       <li>Elm_Checkbox - used to set the loop mode;</li>
+                               </ul>
+                       </td>
+                       <td>
+                               <pre class="prettyprint">
+static Eina_Bool __add_option_panel(void)
+{
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;s_info.option_panel = elm_box_add(s_info.grid);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_grid_pack(s_info.grid, s_info.option_panel,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_PANEL_GEOMETRY_X, SOUND_PANEL_GEOMETRY_Y,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_PANEL_GEOMETRY_W, SOUND_PANEL_GEOMETRY_H);
+
+&nbsp;&nbsp;&nbsp;if (!__add_option_panel_icon(SOUND_ICON_FILE))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (!__add_sound_slider())
+&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;if (!__add_option_panel_icon(MUTE_ICON_FILE))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;s_info.mute_check = __add_option_panel_check(__sound_mute_check_changed_cb);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (!__add_option_panel_icon(LOOP_ICON_FILE))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (!__add_option_panel_check(__playback_looping_changed_cb))
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.option_panel);
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
+                       </td>
+                       <td>
+                               <p style="text-align:center;">
+                                       <img alt="stream-player-options-section" src="../images/stream-player/view/stream-player-options-section.png" />
+                               </p>
+                       </td>
+               </tr>
+       </tbody>
+</table>
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>