<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8" />
- <meta name="description" content="Media content API Tutorial" />
- <meta name="viewport" content="width=360, user-scalable=no" />
- <title>Media content</title>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.min.js"></script>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
- data-framework-viewport-scale="false"
- data-framework-theme="tizen-white"></script>
- <script type="text/javascript" src="./js/main.js"></script>
- <link rel="stylesheet" type="text/css" href="./css/style.css" />
+ <meta charset="utf-8" />
+ <meta name="description" content="Media content API Tutorial"/>
+ <meta name="viewport" content="width=360, user-scalable=no"/>
+ <title>Media content</title>
+ <script src="tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-viewport-scale="false"
+ data-framework-theme="tizen-white"></script>
+ <script type="text/javascript" src="./js/main.js"></script>
+ <link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
- <div data-role="page" id="main">
- <div data-role="header" data-position="fixed">
- <h1>Media content</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" id="folder-list">
- <li data-role="list-divider">Storage type</li>
- <li id="folder-type-all">
- ALL
- </li>
- <li id="folder-type-internal">
- INTERNAL
- </li>
- <li id="folder-type-external">
- EXTERNAL
- </li>
- <li data-role="list-divider" id="folder-text">Folders</li>
- </ul>
- <ul data-role="listview" id="file-list">
- </ul>
- </div>
- </div>
+
<div data-role="page" id="main">
+
<div data-role="header" data-position="fixed">
+ <h1>Media content</h1>
+ </div>
+
<div data-role="content">
+
<ul data-role="listview" id="folder-list">
+ <li data-role="list-divider">Storage type</li>
+ <li id="folder-type-all">
+ ALL
+ </li>
+ <li id="folder-type-internal">
+ INTERNAL
+ </li>
+ <li id="folder-type-external">
+ EXTERNAL
+ </li>
+ <li data-role="list-divider" id="folder-text">Folders</li>
+ </ul>
+
<ul data-role="listview" id="file-list">
+ </ul>
+ </div>
+ </div>
- <div data-role="page" id="items">
- <div data-role="header" data-position="fixed">
- <h1 id="items-title"></h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" id="items-list">
- <li data-role="list-divider">Item type</li>
- <li class="ui-li-has-radio">
- ALL
- <input type="radio" name="item-type" id="item-type-all" value="ALL" checked="checked" />
- </li>
- <li class="ui-li-has-radio">
- IMAGE
- <input type="radio" name="item-type" id="item-type-image" value="IMAGE" />
- </li>
- <li class="ui-li-has-radio">
- VIDEO
- <input type="radio" name="item-type" id="item-type-video" value="VIDEO" />
- </li>
- <li class="ui-li-has-radio">
- AUDIO
- <input type="radio" name="item-type" id="item-type-audio" value="AUDIO" />
- </li>
- <li data-role="list-divider">Items</li>
- </ul>
- </div>
- </div>
+
<div data-role="page" id="items">
+
<div data-role="header" data-position="fixed">
+ <h1 id="items-title"></h1>
+ </div>
+
<div data-role="content">
+
<ul data-role="listview" id="items-list">
+ <li data-role="list-divider">Item type</li>
+ <li class="ui-li-has-radio">
+ ALL
+ <input type="radio" name="item-type" id="item-type-all" value="ALL" checked="checked"/>
+ </li>
+ <li class="ui-li-has-radio">
+ IMAGE
+ <input type="radio" name="item-type" id="item-type-image" value="IMAGE"/>
+ </li>
+ <li class="ui-li-has-radio">
+ VIDEO
+ <input type="radio" name="item-type" id="item-type-video" value="VIDEO"/>
+ </li>
+ <li class="ui-li-has-radio">
+ AUDIO
+ <input type="radio" name="item-type" id="item-type-audio" value="AUDIO"/>
+ </li>
+ <li data-role="list-divider">Items</li>
+ </ul>
+ </div>
+ </div>
- <div data-role="page" id="detail">
- <div data-role="header" data-position="fixed">
- <h1>Details</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" id="media-details">
- </ul>
- </div>
- </div>
+
<div data-role="page" id="detail">
+
<div data-role="header" data-position="fixed">
+ <h1>Details</h1>
+ </div>
+
<div data-role="content">
+
<ul data-role="listview" id="media-details">
+ </ul>
+ </div>
+ </div>
</body>
</html>
/*
- * Copyright 2013 Samsung Electronics Co., Ltd
+ * Copyright 2012 Samsung Electronics Co., Ltd
*
- * Licensed under the Flora License, Version 1.1 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
*
- * http://floralicense.org/license/
+ * http://floralicense.org/license
*
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
*/
-/*jslint devel:true*/
-/*global $, tizen, window*/
-
var gMediaSource, gMediaFolders, gMediaItems, gItemId, gFolderId,
- gMediaType = 'ALL', gStorageType, gFlagInit, gSpan = $('<span/>'),
- getFolders;
+gMediaType = "ALL", gStorageType, gFlagInit, gSpan = $('<span/>');
+
+$(document).delegate("#main", "pageinit", function() {
+ var highlightStoragetype = function (storageType) {
+ $("#folder-list li").each(function(){
+ $(this).removeClass("storagetypeHighlight");
+ });
+ if (storageType == "ALL") $("#folder-type-all").addClass("storagetypeHighlight");
+ else if (storageType == "INTERNAL") $("#folder-type-internal").addClass("storagetypeHighlight");
+ else if (storageType == "EXTERNAL") $("#folder-type-external").addClass("storagetypeHighlight");
+ };
+
+ gFlagInit = false;
+
+ gStorageType = gMediaType;
+
+ $("#folder-type-all").bind("click", function() {
+ showFolderList("ALL");
+ highlightStoragetype("ALL");
+ });
+
+ $("#folder-type-internal").bind("click", function() {
+ showFolderList("INTERNAL");
+ highlightStoragetype("INTERNAL");
+ });
+
+ $("#folder-type-external").bind("click", function() {
+ showFolderList("EXTERNAL");
+ highlightStoragetype("EXTERNAL");
+ });
+
+ onContentChange();
+});
-function setLastStorage(storageType) {
- 'use strict';
- gStorageType = storageType;
-}
+$(document).delegate("#items", "pageinit", function() {
+ $("#items").bind("pagebeforeshow", showItemList);
+
+ $("#items-list input").bind("change", function() {
+ if ($(this).prop("checked") == true) {
+ gMediaType = $(this).attr("value");
+ getFolderItems(gFolderId, gMediaType);
+ }
+ });
+
+ $("#items-list").delegate("li", "click", function() {
+ var id = $(this).data("id");
+ if (id != null) {
+ gItemId = Number(id);
+ $.mobile.changePage("#detail");
+ }
+ return false;
+ });
+});
-function stripTags(str) {
- 'use strict';
- return gSpan.text(str).html();
+$(document).delegate("#detail", "pageinit", function() {
+ $("#detail").bind("pagebeforeshow", showMediaDetail);
+});
+
+$(window).on('tizenhwkey', function (e) {
+ if (e.originalEvent.keyName === "back") {
+ if ($.mobile.activePage.attr('id') === 'main') {
+ tizen.application.getCurrentApplication().exit();
+ } else {
+ history.back();
+ }
+ }
+});
+
+function setLastStorage(storageType) {
+ gStorageType = storageType;
}
function makeListItem(id, mainText, subText) {
- 'use strict';
- return '<li class="ui-li-has-multiline ui-li-text-ellipsis"'
- + (id === null ? '' : ' data-id="' + id + '"')
- + '>'
- + stripTags(mainText)
- + '<span class="ui-li-text-sub">'
- + stripTags(subText)
- + '</span></li>';
+ return '<li class="ui-li-has-multiline ui-li-text-ellipsis"'
+ + (id == null ? '' : ' data-id="'+ id +'"')
+ + '>'
+ + stripTags(mainText)
+ + '<span class="ui-li-text-sub">'
+ + stripTags(subText)
+ + '</span></li>';
}
function stripTags(str) {
- 'use strict';
- return gSpan.text(str).html();
+ return gSpan.text(str).html();
}
-function showItemList() {
- 'use strict';
- var str = '', title, i, gMediaLen;
- try {
- title = gMediaFolders[gFolderId].title;
- $('#items-title').text(gFolderId === null ? 'All' : title.toString());
-
- gMediaLen = gMediaItems.length;
- for (i = 0; i < gMediaLen; i += 1) {
- str += makeListItem(i, gMediaItems[i].title,
- gMediaItems[i].type + ' Rating: ' + gMediaItems[i].rating);
- }
- $('#items-list > li[data-id]').remove();
- $('#items [data-role="content"]').scrollview('scrollTo', 0, 0);
- $('#items-list').append(str).trigger('create').listview('refresh');
- } catch (exc) {
- gMediaType = gStorageType = 'ALL';
- getFolders(gStorageType);
- $('#folder-list li').removeClass('storagetypeHighlight');
- $('#folder-type-all').addClass('storagetypeHighlight');
- $.mobile.changePage('#main');
- }
+function getFolders (storageType) {
+ try {
+ gMediaSource = tizen.content;
+ gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
+ } catch (exc) {
+ alert("getLocalMediaSource exc:" + exc.message);
+ }
+
+ function onGetFoldersSuccess(folders) {
+ $("#file-list").delegate("li", "vclick", function() {
+ var id = $(this).data("id");
+ if (id != null) {
+ getFolderItems(Number(id), gMediaType);
+ }
+ return false;
+ });
+
+ gMediaFolders = folders;
+ showFolderList(storageType);
+ }
+
+ function onGetFoldersError(err) {
+ alert("GetFolders failed:" + err.message);
+ }
+
+ gFlagInit = true;
}
-function getFolderItems(folderId, mediaType) {
- 'use strict';
- function onFindItemsSuccess(items) {
- gMediaItems = items;
- gFolderId = folderId;
- gMediaType = mediaType;
-
- if ($.mobile.activePage.attr('id') === 'items') {
- showItemList();
- } else {
- $.mobile.changePage('#items');
- }
- }
-
- function onFindItemsError(err) {
- alert('getFolderItems findItems failed: ' + err.message);
- }
-
- try {
- gMediaSource.find(onFindItemsSuccess, onFindItemsError,
- folderId === null ? null : gMediaFolders[folderId].id,
- mediaType === 'ALL' ? null : new tizen.AttributeFilter('type',
- 'EXACTLY', mediaType),
- new tizen.SortMode('title', 'ASC'));
- } catch (e) {
- console.warn('gMediaSource.find exception: ' + e.message);
- }
+function onContentChange() {
+ tizen.systeminfo.addPropertyValueChangeListener('STORAGE', function() {
+ getFolders(gStorageType);
+ });
}
function showFolderList(storageType) {
- 'use strict';
- setLastStorage(storageType);
- if (gFlagInit === false) {
- getFolders(storageType);
- } else {
- var str = '',
- gMF = gMediaFolders.length,
- i;
- for (i = 0; i < gMF; i = i + 1) {
- if (storageType === 'ALL'
- || storageType === gMediaFolders[i].storageType) {
- str += makeListItem(i, gMediaFolders[i].title,
- gMediaFolders[i].directoryURI);
- }
- }
- $('#file-list').empty().hide().append(str).listview('refresh').show();
- $('#main > [data-role=content]').scrollview('scrollTo', 0, 0);
- }
+ setLastStorage(storageType);
+
+ if(gFlagInit == false){
+ getFolders(storageType);
+ }
+ else{
+ var str = '',
+ gMF = gMediaFolders.length,
+ i;
+ for ( i = 0; i < gMF; i++) {
+ if (storageType == "ALL" || storageType == gMediaFolders[i].storageType) {
+ str += makeListItem(i, gMediaFolders[i].title, gMediaFolders[i].directoryURI);
+ }
+ }
+ $("#file-list").empty().hide().append(str).listview("refresh").show();
+ }
}
-function getFolders(storageType) {
- 'use strict';
- function onGetFoldersSuccess(folders) {
- $('#file-list').delegate('li', 'vclick', function () {
- var id = $(this).data('id');
- if (id !== null) {
- getFolderItems(Number(id), gMediaType);
-
- }
- return false;
- });
-
- gMediaFolders = folders;
- showFolderList(storageType);
- /*
- * refresh view when looking at external items
- * while external storage is detaching
- */
- if ($.mobile.activePage.attr('id') === 'items') {
- showItemList();
- }
- }
-
- function onGetFoldersError(err) {
- alert('GetFolders failed:' + err.message);
- }
-
- try {
- gMediaSource = tizen.content;
- gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
- } catch (exc) {
- alert('getLocalMediaSource exc:' + exc.message);
- }
-
- gFlagInit = true;
+
+function showItemList() {
+ var str = '', title, i, gMediaLen;
+ try {
+ title = gMediaFolders[gFolderId].title;
+ $("#items-title").text(gFolderId == null ? "All" : title.toString());
+
+ gMediaLen = gMediaItems.length;
+ for (i = 0; i < gMediaLen; i += 1) {
+ str += makeListItem(i, gMediaItems[i].title,
+ gMediaItems[i].type + " Rating: " + gMediaItems[i].rating);
+ }
+
+ $("#items-list > li[data-id]").remove();
+ $("#items-list").append(str).trigger("create").listview("refresh");
+ } catch (exc) {
+ gMediaType = gStorageType = "ALL";
+ $("#folder-list li").removeClass("storagetypeHighlight");
+ $("#folder-type-all").addClass("storagetypeHighlight");
+ $.mobile.changePage("#main");
+ }
}
-function onContentChange() {
- 'use strict';
- tizen.systeminfo.addPropertyValueChangeListener('STORAGE', function () {
- $('#main [data-role="content"]').scrollview('scrollTo', 0, 0);
- getFolders(gStorageType);
- });
+function getFolderItems(folderId, mediaType) {
+ function onFindItemsSuccess(items) {
+ gMediaItems = items;
+ gFolderId = folderId;
+ gMediaType = mediaType;
+
+ if($.mobile.activePage.attr("id") == "items") {
+ showItemList();
+ } else {
+ $.mobile.changePage("#items");
+ }
+ }
+
+ function onFindItemsError(err) {
+ alert("getFolderItems findItems failed: " + err.message);
+ }
+
+ try {
+ gMediaSource.find(onFindItemsSuccess, onFindItemsError,
+ folderId == null ? null : gMediaFolders[folderId].id,
+ mediaType == "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY", mediaType),
+ new tizen.SortMode("title", "ASC"));
+ } catch (exc) {
+ //alert("findItems exc:" + exc.message);
+ }
}
function makeCommonPropertiesListItems(item) {
- 'use strict';
- return makeListItem(null, 'Title', item.title)
- + makeListItem(null, 'Size', item.size + ' Bytes')
- + makeListItem(null, 'Type', item.type)
- + makeListItem(null, 'Identifier', item.id)
- + makeListItem(null, 'Item URI', item.contentURI)
- + makeListItem(null, 'MIME type', item.mimeType)
- + makeListItem(null, 'Modified date',
- item.modifiedDate.toLocaleString())
- + makeListItem(null, 'Description', item.description)
- + makeListItem(null, 'Rating', item.rating);
+ return makeListItem(null, "Title", item.title)
+ + makeListItem(null, "Size", item.size + " Bytes")
+ + makeListItem(null, "Type", item.type)
+ + makeListItem(null, "Identifier", item.id)
+ + makeListItem(null, "Item URI", item.contentURI)
+ + makeListItem(null, "MIME type", item.mimeType)
+ + makeListItem(null, "Modified date", item.modifiedDate.toLocaleString())
+ + makeListItem(null, "Description", item.description)
+ + makeListItem(null, "Rating", item.rating);
}
function showMediaDetail() {
- 'use strict';
- var str, item = gMediaItems[gItemId];
- if (item.type === 'IMAGE') {
- str = makeCommonPropertiesListItems(item)
- + makeListItem(null, 'Width', item.width)
- + makeListItem(null, 'Height', item.height);
- if (item.geolocation) {
- str += makeListItem(null, 'Latitude', item.geolocation.latitude)
- + makeListItem(null, 'Longitude', item.geolocation.longitude);
- }
- } else if (item.type === 'VIDEO') {
- str = makeCommonPropertiesListItems(item)
- + makeListItem(null, 'Width', item.width)
- + makeListItem(null, 'Height', item.height)
- + makeListItem(null, 'Album', item.album)
- + makeListItem(null, 'Artist', item.artists[0])
- + makeListItem(null, 'Duration', item.duration + ' Milliseconds');
- } else if (item.type === 'AUDIO') {
- str = makeCommonPropertiesListItems(item)
- + makeListItem(null, 'Album', item.album)
- + makeListItem(null, 'Artist', item.artists[0])
- + makeListItem(null, 'Composer', item.composers[0])
- + makeListItem(null, 'Genre', item.genres[0])
- + makeListItem(null, 'Copyright', item.copyright)
- + makeListItem(null, 'Bitrate', item.bitrate + ' Bps')
- + makeListItem(null, 'Track number', item.trackNumber)
- + makeListItem(null, 'Duration', item.duration + ' Milliseconds');
- } else {
- str = makeCommonPropertiesListItems(item);
- }
-
- $('#media-details').html(str).trigger('create').listview('refresh');
+ var str, item = gMediaItems[gItemId];
+ if (item.type == "IMAGE") {
+ str = makeCommonPropertiesListItems(item)
+ + makeListItem(null, "Width", item.width)
+ + makeListItem(null, "Height", item.height);
+ if (item.geolocation) {
+ str += makeListItem(null, "Latitude", item.geolocation.latitude)
+ + makeListItem(null, "Longitude", item.geolocation.longitude);
+ }
+ } else if (item.type == "VIDEO") {
+ str = makeCommonPropertiesListItems(item)
+ + makeListItem(null, "Width", item.width)
+ + makeListItem(null, "Height", item.height)
+ + makeListItem(null, "Album", item.album)
+ + makeListItem(null, "Artist", item.artists[0])
+ + makeListItem(null, "Duration", item.duration + " Milliseconds");
+ } else if (item.type == "AUDIO") {
+ str = makeCommonPropertiesListItems(item)
+ + makeListItem(null, "Album", item.album)
+ + makeListItem(null, "Artist", item.artists[0])
+ + makeListItem(null, "Composer", item.composers[0])
+ + makeListItem(null, "Genre", item.genres[0])
+ + makeListItem(null, "Copyright", item.copyright)
+ + makeListItem(null, "Bitrate", item.bitrate + " Bps")
+ + makeListItem(null, "Track number", item.trackNumber)
+ + makeListItem(null, "Duration", item.duration + " Milliseconds");
+ } else {
+ str = makeCommonPropertiesListItems(item);
+ }
+
+ $("#media-details").html(str).trigger("create").listview("refresh");
}
-$(document).delegate('#main', 'pageinit', function () {
- 'use strict';
- var highlightStoragetype = function (storageType) {
- $('#folder-list li').each(function () {
- $(this).removeClass('storagetypeHighlight');
- });
- if (storageType === 'ALL') {
- $('#folder-type-all').addClass('storagetypeHighlight');
- } else if (storageType === 'INTERNAL') {
- $('#folder-type-internal').addClass('storagetypeHighlight');
- } else if (storageType === 'EXTERNAL') {
- $('#folder-type-external').addClass('storagetypeHighlight');
- }
- };
-
- gFlagInit = false;
-
- gStorageType = gMediaType;
-
- highlightStoragetype('ALL');
-
- $('#folder-type-all').bind('click', function () {
- showFolderList('ALL');
- highlightStoragetype('ALL');
- });
-
- $('#folder-type-internal').bind('click', function () {
- showFolderList('INTERNAL');
- highlightStoragetype('INTERNAL');
- });
-
- $('#folder-type-external').bind('click', function () {
- showFolderList('EXTERNAL');
- highlightStoragetype('EXTERNAL');
- });
-
- onContentChange();
-});
-
-$(document).delegate('#main', 'pagebeforeshow', function () {
- 'use strict';
- $('#main [data-role="content"]').scrollview('scrollTo', 0, 0);
-});
-
-$(document).delegate('#items', 'pageinit', function () {
- 'use strict';
- $('#items').bind('pageshow', showItemList);
-
- $('#items-list input').bind('change', function () {
- if ($(this).prop('checked') === true) {
- gMediaType = $(this).attr('value');
- getFolderItems(gFolderId, gMediaType);
- }
- });
-
- $('#items-list').delegate('li', 'vclick', function () {
- var id = $(this).data('id');
- if (id !== null) {
- gItemId = Number(id);
- $.mobile.changePage('#detail');
- }
- return false;
- });
-});
-
-$(document).delegate('#detail', 'pageinit', function () {
- 'use strict';
- $('#detail').bind('pagebeforeshow', showMediaDetail);
-});
-
-$(window).on('tizenhwkey', function (e) {
- 'use strict';
- if (e.originalEvent.keyName === 'back') {
- if ($.mobile.activePage.attr('id') === 'main') {
- tizen.application.getCurrentApplication().exit();
- } else {
- history.back();
- }
- }
-});
-
projects / apps / web / sample / MediaContent.git / commitdiff