summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-09 12:34:13 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:16:01 +0100
commitc1afd8404aca7a86a254a9ee8f80a87a5d8863c9 (patch)
tree9634ec223d43ea7b1dbe073d89d046800dc163f6 /src
parent585459eda0dcdcdff0d8bca0466a61d75459b1c4 (diff)
STRUCT Create project structure
Diffstat (limited to 'src')
-rw-r--r--src/config.xml22
-rw-r--r--src/icon.svg279
-rw-r--r--src/images/horizontal_background.pngbin0 -> 753195 bytes
-rw-r--r--src/images/vertical_background.pngbin0 -> 719555 bytes
-rw-r--r--src/index.html26
-rw-r--r--src/index.js25
-rw-r--r--src/js/app.js23
-rw-r--r--src/js/templates.js19
-rw-r--r--src/styles/app.scss13
-rw-r--r--src/styles/landscape.scss6
-rw-r--r--src/styles/main.scss21
-rw-r--r--src/styles/portrait.scss10
-rw-r--r--src/templates/main.template.html1
13 files changed, 445 insertions, 0 deletions
diff --git a/src/config.xml b/src/config.xml
new file mode 100644
index 0000000..f7bf7cc
--- /dev/null
+++ b/src/config.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="webapps-mediaplayer" version="0.0.0">
+ <name>MEDIAPLAYER</name>
+ <icon src="icon.svg"/>
+ <content src="index.html" type="text/html"/>
+ <description>HTML5 Mediaplayer demo</description>
+ <author>Igalia, S.L.</author>
+ <license>APL 2.0</license>
+ <feature name="urn:AGL:widget:required-permission">
+ <param name="urn:AGL:permission::public:no-htdocs" value="required" />
+ <param name="urn:AGL:permission::public:display" value="required" />
+ <param name="urn:AGL:permission::public:audio" value="required" />
+ <param name="urn:AGL:permission:afm:system:widget" value="required" /> <!-- list available apps -->
+ <param name="urn:AGL:permission:afm:system:runner" value="required" /> <!-- run other apps -->
+ <param name="urn:AGL:permission::public:applications:read" value="required" /> <!-- get app icons -->
+ </feature>
+ <feature name="urn:AGL:widget:required-api">
+ <param name="windowmanager" value="ws" />
+ <param name="homescreen" value="ws" />
+ <param name="mediaplayer" value="ws" />
+ </feature>
+</widget>
diff --git a/src/icon.svg b/src/icon.svg
new file mode 100644
index 0000000..91661a7
--- /dev/null
+++ b/src/icon.svg
@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 320 320"
+ style="enable-background:new 0 0 320 320;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="icon.svg"><metadata
+ id="metadata1292"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs1290" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="2560"
+ inkscape:window-height="1464"
+ id="namedview1288"
+ showgrid="false"
+ inkscape:zoom="0.7375"
+ inkscape:cx="-572.20339"
+ inkscape:cy="160"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.4;fill:url(#SVGID_1_);}
+ .st3{fill:url(#SVGID_2_);}
+ .st4{fill:#FFFFFF;}
+ .st5{font-family:'Roboto-Regular';}
+ .st6{font-size:25px;}
+ .st7{letter-spacing:6;}
+ .st8{fill:url(#SVGID_3_);}
+ .st9{fill:url(#SVGID_4_);}
+ .st10{fill:url(#SVGID_5_);}
+ .st11{fill:url(#SVGID_6_);}
+ .st12{fill:url(#SVGID_7_);}
+ .st13{fill:url(#SVGID_8_);}
+ .st14{fill:url(#SVGID_9_);}
+ .st15{fill:url(#SVGID_10_);}
+ .st16{fill:url(#SVGID_11_);}
+ .st17{fill:url(#SVGID_12_);}
+ .st18{fill:url(#SVGID_13_);}
+ .st19{fill:url(#SVGID_14_);}
+ .st20{fill:url(#SVGID_15_);}
+ .st21{fill:url(#SVGID_16_);}
+ .st22{fill:url(#SVGID_17_);}
+ .st23{fill:url(#SVGID_18_);}
+ .st24{opacity:0.29;}
+ .st25{fill:url(#SVGID_19_);}
+ .st26{fill:url(#SVGID_20_);}
+ .st27{fill:url(#SVGID_21_);}
+ .st28{fill:url(#SVGID_22_);}
+ .st29{fill:url(#SVGID_23_);}
+ .st30{fill:url(#SVGID_24_);}
+ .st31{fill:url(#SVGID_25_);}
+ .st32{fill:url(#SVGID_26_);}
+ .st33{fill:url(#SVGID_27_);}
+ .st34{fill:url(#SVGID_28_);}
+ .st35{fill:url(#SVGID_29_);}
+ .st36{fill:url(#SVGID_30_);}
+ .st37{fill:url(#SVGID_31_);}
+ .st38{fill:url(#SVGID_32_);}
+ .st39{fill:url(#SVGID_33_);}
+ .st40{fill:url(#SVGID_34_);}
+ .st41{fill:url(#SVGID_35_);}
+ .st42{fill:url(#SVGID_36_);}
+ .st43{opacity:0.4;fill:url(#SVGID_37_);}
+ .st44{fill:url(#SVGID_38_);}
+ .st45{fill:url(#SVGID_39_);}
+ .st46{fill:url(#SVGID_40_);}
+ .st47{fill:url(#SVGID_41_);}
+ .st48{fill:url(#SVGID_42_);}
+ .st49{fill:url(#SVGID_43_);}
+ .st50{fill:url(#SVGID_44_);}
+ .st51{display:inline;opacity:0.29;}
+ .st52{display:inline;fill:url(#SVGID_45_);}
+ .st53{display:inline;fill:url(#SVGID_46_);}
+ .st54{display:inline;fill:#FFFFFF;}
+ .st55{display:inline;fill:url(#SVGID_47_);}
+ .st56{display:inline;fill:url(#SVGID_48_);}
+ .st57{display:inline;fill:url(#SVGID_49_);}
+ .st58{display:inline;fill:url(#SVGID_50_);}
+ .st59{display:inline;fill:url(#SVGID_51_);}
+ .st60{display:inline;fill:url(#SVGID_52_);}
+ .st61{opacity:0.4;fill:url(#SVGID_53_);}
+ .st62{fill:url(#SVGID_54_);}
+ .st63{fill:url(#SVGID_55_);}
+ .st64{fill:url(#SVGID_56_);}
+ .st65{fill:url(#SVGID_57_);}
+ .st66{fill:url(#SVGID_58_);}
+ .st67{opacity:0.4;fill:url(#SVGID_59_);}
+ .st68{fill:url(#SVGID_60_);}
+ .st69{fill:url(#SVGID_61_);}
+ .st70{fill:url(#SVGID_62_);}
+ .st71{fill:url(#SVGID_63_);}
+ .st72{fill:url(#SVGID_64_);}
+ .st73{fill:url(#SVGID_65_);}
+ .st74{fill:url(#SVGID_66_);}
+ .st75{fill:url(#SVGID_67_);}
+ .st76{fill:url(#SVGID_68_);}
+ .st77{fill:url(#SVGID_69_);}
+ .st78{fill:url(#SVGID_70_);}
+ .st79{fill:url(#SVGID_71_);}
+ .st80{fill:url(#SVGID_72_);}
+ .st81{fill:url(#SVGID_73_);}
+ .st82{fill:url(#SVGID_74_);}
+ .st83{fill:url(#SVGID_75_);}
+ .st84{fill:url(#SVGID_76_);}
+ .st85{fill:url(#SVGID_77_);}
+ .st86{fill:url(#SVGID_78_);}
+ .st87{fill:url(#SVGID_79_);}
+ .st88{fill:url(#SVGID_80_);}
+ .st89{fill:url(#SVGID_81_);}
+ .st90{fill:url(#SVGID_82_);}
+ .st91{fill:url(#SVGID_83_);}
+ .st92{fill:url(#SVGID_84_);}
+ .st93{fill:url(#SVGID_85_);}
+ .st94{fill:url(#SVGID_86_);}
+ .st95{opacity:0.4;fill:url(#SVGID_87_);}
+ .st96{fill:url(#SVGID_88_);}
+ .st97{fill:url(#SVGID_89_);}
+ .st98{fill:url(#SVGID_90_);}
+ .st99{fill:url(#SVGID_91_);}
+ .st100{fill:url(#SVGID_92_);}
+ .st101{fill:url(#SVGID_93_);}
+ .st102{fill:url(#SVGID_94_);}
+ .st103{opacity:0.4;fill:url(#SVGID_95_);}
+ .st104{fill:url(#SVGID_96_);}
+ .st105{fill:url(#SVGID_97_);}
+ .st106{fill:url(#SVGID_98_);}
+ .st107{fill:url(#SVGID_99_);}
+ .st108{fill:url(#SVGID_100_);}
+ .st109{fill:url(#SVGID_101_);}
+ .st110{display:inline;fill:url(#SVGID_102_);}
+ .st111{display:inline;fill:url(#SVGID_103_);}
+ .st112{fill:url(#SVGID_104_);}
+ .st113{fill:url(#SVGID_105_);}
+ .st114{fill:url(#SVGID_106_);}
+ .st115{fill:url(#SVGID_107_);}
+ .st116{fill:url(#SVGID_108_);}
+ .st117{opacity:0.4;fill:url(#SVGID_109_);}
+ .st118{fill:url(#SVGID_110_);}
+ .st119{fill:url(#SVGID_111_);}
+ .st120{fill:url(#SVGID_112_);}
+ .st121{fill:url(#SVGID_113_);}
+ .st122{fill:url(#SVGID_114_);}
+ .st123{opacity:0.4;fill:url(#SVGID_115_);}
+ .st124{fill:url(#SVGID_116_);}
+ .st125{fill:url(#SVGID_117_);}
+ .st126{fill:url(#SVGID_118_);}
+ .st127{display:inline;fill:url(#SVGID_119_);}
+ .st128{display:inline;fill:url(#SVGID_120_);}
+ .st129{fill:url(#SVGID_121_);}
+ .st130{fill:url(#SVGID_122_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Multimedia_Inactive_copy"><circle
+ class="st24"
+ cx="159.7"
+ cy="133.4"
+ r="101.9"
+ id="circle884" /><linearGradient
+ id="SVGID_91_"
+ gradientUnits="userSpaceOnUse"
+ x1="115.9317"
+ y1="254.1836"
+ x2="256.3852"
+ y2="-133.5267"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop887" /><stop
+ offset="2.015080e-02"
+ style="stop-color:#7CCB56;stop-opacity:0.9678"
+ id="stop889" /><stop
+ offset="6.089833e-02"
+ style="stop-color:#62D67D;stop-opacity:0.9028"
+ id="stop891" /><stop
+ offset="0.1057"
+ style="stop-color:#4BDFA0;stop-opacity:0.8312"
+ id="stop893" /><stop
+ offset="0.1543"
+ style="stop-color:#38E7BE;stop-opacity:0.7537"
+ id="stop895" /><stop
+ offset="0.2077"
+ style="stop-color:#28EED6;stop-opacity:0.6684"
+ id="stop897" /><stop
+ offset="0.2681"
+ style="stop-color:#1CF3E8;stop-opacity:0.572"
+ id="stop899" /><stop
+ offset="0.3394"
+ style="stop-color:#13F6F5;stop-opacity:0.4581"
+ id="stop901" /><stop
+ offset="0.4323"
+ style="stop-color:#0EF8FD;stop-opacity:0.3098"
+ id="stop903" /><stop
+ offset="0.6264"
+ style="stop-color:#0DF9FF;stop-opacity:0"
+ id="stop905" /></linearGradient><circle
+ class="st99"
+ cx="159.7"
+ cy="133.4"
+ r="101.9"
+ id="circle907" /><linearGradient
+ id="SVGID_92_"
+ gradientUnits="userSpaceOnUse"
+ x1="4.0481"
+ y1="287.9492"
+ x2="320.4859"
+ y2="-15.4029"
+ gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.0192 -3.0212)"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop910" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop912" /></linearGradient><path
+ class="st100"
+ d="M160,238.8c-0.2,0-0.4,0-0.6,0c-58-0.3-104.9-47.7-104.6-105.7C55.2,75.3,102.3,28.5,160,28.5 c0.2,0,0.4,0,0.6,0c58,0.3,104.9,47.7,104.6,105.7l0,0C264.8,192,217.7,238.8,160,238.8z M160,32.2 c-55.7,0-101.2,45.2-101.5,100.9c-0.3,55.9,45,101.7,100.9,102c0.2,0,0.4,0,0.6,0c55.7,0,101.2-45.2,101.5-100.9 c0.3-55.9-45-101.7-100.9-102C160.4,32.2,160.2,32.2,160,32.2z"
+ id="path914" /><g
+ id="g916"><text
+ transform="matrix(1 0 0 1 53.5841 284.7119)"
+ class="st4 st5 st6 st7"
+ id="text918">MULTIMEDIA</text>
+<linearGradient
+ id="SVGID_93_"
+ gradientUnits="userSpaceOnUse"
+ x1="140.5445"
+ y1="202.2363"
+ x2="186.8444"
+ y2="68.7049"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop921" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop923" /></linearGradient><path
+ class="st101"
+ d="M114.5,190.9c-6.4,0-12-2.6-14.8-7.5c-2.9-4.9-5.4-14.5,9.6-23.2c4.8-2.8,17.1-3.9,20.8-4l0.1,3.6 c-4.6,0.1-15.5,1.4-19.1,3.5c-9.4,5.4-12.1,11.5-8.3,18.3c3.8,6.6,14.6,7.6,24,2.2c6.6-3.8,10.6-10.5,10.7-17.9l-0.1-0.7V95.4 l71.9-14.2l0.1,71.3c0,6.7-3.3,16.4-12.5,21.8c-11.1,6.4-24.1,4.8-28.9-3.5c-2.9-4.9-5.4-14.5,9.6-23.2 c4.4-2.5,14.4-3.8,18.8-3.9l0.1,3.6c-4.2,0.1-13.5,1.4-17.1,3.5c-6.4,3.7-13.1,9.9-8.3,18.3c3.8,6.6,14.6,7.6,24,2.2 c7.9-4.5,10.7-12.8,10.7-18.5l-0.1-0.8V85.6l-64.7,12.7v66.8l0.1,0.7c0,8.7-4.7,16.6-12.5,21.1 C123.9,189.6,119,190.9,114.5,190.9z"
+ id="path925" /><linearGradient
+ id="SVGID_94_"
+ gradientUnits="userSpaceOnUse"
+ x1="145.3286"
+ y1="203.8951"
+ x2="191.6285"
+ y2="70.3637"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop928" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop930" /></linearGradient><polygon
+ class="st102"
+ points="155.6,123.3 154.8,119.8 195.5,110.2 196.3,113.7 "
+ id="polygon932" /></g></g></g></switch></svg> \ No newline at end of file
diff --git a/src/images/horizontal_background.png b/src/images/horizontal_background.png
new file mode 100644
index 0000000..b5a36e4
--- /dev/null
+++ b/src/images/horizontal_background.png
Binary files differ
diff --git a/src/images/vertical_background.png b/src/images/vertical_background.png
new file mode 100644
index 0000000..3f553fe
--- /dev/null
+++ b/src/images/vertical_background.png
Binary files differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..7bd906b
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,26 @@
+<!--
+ Copyright 2019 Igalia, S.L.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ 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.
+-->
+<!doctype html>
+<html lang="en">
+ <head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ </head>
+ <body>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..484dffa
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2019 Igalia, S.L.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.
+ */
+/* JS */
+import * as app from './js/app';
+
+import { api } from 'agl-js-api';
+
+/* CSS */
+import './styles/app.scss';
+
+api.init();
+app.init();
diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 0000000..a0ec650
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1,23 @@
+import { load as load_template } from './templates';
+import Mustache from 'mustache';
+
+import { lowcan } from 'agl-js-api';
+
+var template;
+var page = {
+
+};
+
+export function show() {
+ document.body.innerHTML = Mustache.render(template, page);
+}
+
+export function init() {
+ load_template('main.template.html').then(function(result) {
+ template = result;
+ Mustache.parse(template);
+ show();
+ }, function(error) {
+ console.error('ERRROR loading main template', error);
+ });
+} \ No newline at end of file
diff --git a/src/js/templates.js b/src/js/templates.js
new file mode 100644
index 0000000..2513722
--- /dev/null
+++ b/src/js/templates.js
@@ -0,0 +1,19 @@
+export function load(template) {
+ return new Promise(function(resolve, reject){
+ var xhr = new XMLHttpRequest();
+
+ xhr.open('GET', '/templates/'+template);
+
+ xhr.send();
+
+ xhr.onload = function() {
+ if (xhr.status != 200) {
+ console.error('Error loading template', xhr.status, xhr.statusText);
+ reject(xhr.status);
+ } else {
+ console.log(xhr.responseType);
+ resolve(xhr.responseText);
+ }
+ };
+ });
+} \ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
new file mode 100644
index 0000000..014e722
--- /dev/null
+++ b/src/styles/app.scss
@@ -0,0 +1,13 @@
+$body-bg: transparent;
+$body-color: #FFFFFF;
+$list-group-bg: transparent;
+$font-size-base: 1.5rem;
+$input-bg: transparent;
+$input-color: #FFFFFF;
+
+@import "~bootstrap/scss/bootstrap";
+@import "main.scss";
+@import "portrait.scss";
+@import "landscape.scss";
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
+
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
new file mode 100644
index 0000000..b7e1bf7
--- /dev/null
+++ b/src/styles/landscape.scss
@@ -0,0 +1,6 @@
+@media (orientation: landscape) {
+
+ html {
+ background-image: url('../images/horizontal_background.png');
+ }
+} \ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..e1d6ceb
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,21 @@
+::-webkit-scrollbar {
+ display: none;
+}
+
+html {
+ height: 100%;
+ background-size: cover;
+ -webkit-overflow-scrolling: touch;
+}
+
+body {
+ .log {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 1080px;
+ background: white;
+ font-size: 1.5rem;
+ }
+} \ No newline at end of file
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
new file mode 100644
index 0000000..f8db5e4
--- /dev/null
+++ b/src/styles/portrait.scss
@@ -0,0 +1,10 @@
+@media (orientation: portrait) {
+
+ html {
+ background-image: url('../images/vertical_background.png');
+ background-position: top center;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ height: 992px;
+ }
+} \ No newline at end of file
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
new file mode 100644
index 0000000..0f3081c
--- /dev/null
+++ b/src/templates/main.template.html
@@ -0,0 +1 @@
+This is the mediaplayer \ No newline at end of file