Initial version

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,35 @@
+# Specifies intentionally untracked files to ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+.vscode/
+npm-debug.log*
+
+.idea/
+.sass-cache/
+.tmp/
+.versions/
+coverage/
+dist/
+node_modules/
+tmp/
+temp/
+hooks/
+platforms/
+plugins/
+plugins/android.json
+plugins/ios.json
+res/
+www/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate

config.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="cz.katemihalikova.framie" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>Framie</name>
+  <description>Dynamic photo frame made simple</description>
+  <author email="[email protected]" href="https://katemihalikova.cz/">Kate Miháliková</author>
+  <content src="index.html"/>
+  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
+  <access origin="*"/>
+  <allow-intent href="http://*/*"/>
+  <allow-intent href="https://*/*"/>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="android-minSdkVersion" value="16"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <preference name="SplashScreenDelay" value="0"/>
+  <preference name="FadeSplashScreen" value="false"/>
+  <preference name="FadeSplashScreenDuration" value="0"/>
+  <preference name="SplashScreenBackgroundColor" value="black"/>
+  <preference name="FullScreen" value="true"/>
+  <preference name="Orientation" value="landscape"/>
+  <preference name="SplashScreen" value="screen"/>
+  <feature name="StatusBar">
+    <param name="ios-package" onload="true" value="CDVStatusBar"/>
+  </feature>
+  <platform name="android">
+    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
+    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
+    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
+    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
+    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
+    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
+  </platform>
+</widget>

ionic.config.json

@@ -0,0 +1,6 @@
+{
+  "name": "framie",
+  "app_id": "",
+  "v2": true,
+  "typescript": true
+}

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "framie",
+  "description": "Dynamic photo frame made simple",
+  "author": "Kate Miháliková <[email protected]>",
+  "homepage": "https://katemihalikova.cz/",
+  "private": true,
+  "scripts": {
+    "build": "ionic-app-scripts build",
+    "watch": "ionic-app-scripts watch",
+    "serve:before": "watch",
+    "emulate:before": "build",
+    "deploy:before": "build",
+    "build:before": "build",
+    "run:before": "build"
+  },
+  "dependencies": {
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/compiler-cli": "0.6.2",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/platform-server": "2.0.0",
+    "@ionic/storage": "1.1.6",
+    "ionic-angular": "2.0.0-rc.1",
+    "ionic-native": "2.2.3",
+    "ionicons": "3.0.0",
+    "rxjs": "5.0.0-beta.12",
+    "zone.js": "0.6.21"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "^0.0.36",
+    "typescript": "^2.0.3"
+  },
+  "cordovaPlugins": [
+    "cordova-plugin-device",
+    "cordova-plugin-console",
+    "cordova-plugin-whitelist",
+    "cordova-plugin-splashscreen",
+    "cordova-plugin-statusbar",
+    "cordova-plugin-file-transfer",
+    "cordova-plugin-file",
+    "cordova-plugin-compat",
+    {
+      "locator": "https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git",
+      "id": "cordova-plugin-insomnia"
+    }
+  ],
+  "cordovaPlatforms": [
+    {
+      "platform": "android",
+      "version": "",
+      "locator": "android"
+    }
+  ]
+}

src/app/app.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Platform } from 'ionic-angular';
+import { StatusBar, Splashscreen, Insomnia } from 'ionic-native';
+
+import { FramePage } from '../pages/frame/frame';
+
+
+@Component({
+  template: `<ion-nav [root]="rootPage"></ion-nav>`
+})
+export class MyApp {
+  rootPage = FramePage;
+
+  constructor(platform: Platform) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      StatusBar.hide();
+      Splashscreen.hide();
+      Insomnia.keepAwake();
+    });
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { MyApp } from './app.component';
+import { FramePage } from '../pages/frame/frame';
+
+@NgModule({
+  declarations: [
+    MyApp,
+    FramePage
+  ],
+  imports: [
+    IonicModule.forRoot(MyApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    FramePage
+  ],
+  providers: []
+})
+export class AppModule {}

src/app/app.scss

@@ -0,0 +1,16 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Global Sass
+// --------------------------------------------------
+// Put style rules here that you want to apply globally. These
+// styles are for the entire app and not just one component.
+// Additionally, this file can be also used as an entry point
+// to import other Sass files to be included in the output CSS.
+//
+// Shared Sass variables, which can be used to adjust Ionic's
+// default Sass variables, belong in "theme/variables.scss".
+//
+// To declare rules for a specific mode, create a child rule
+// for the .md, .ios, or .wp mode classes. The mode class is
+// automatically applied to the <body> element in the app.

src/app/main.dev.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/app/main.prod.ts

@@ -0,0 +1,7 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

src/config.ts

@@ -0,0 +1,3 @@
+export const url = "http://test.maylou.cz/";
+export const numberOfImages = 5;
+export const durationOfImage = () => (40 + Math.floor(Math.random() * 20)) * 6e4;

src/declarations.d.ts

@@ -0,0 +1,15 @@
+/*
+  Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
+  They're what make intellisense work and make Typescript know all about your code.
+
+  A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
+  provide their own type declarations.
+
+  To learn more about using third party libraries in an Ionic app, check out the docs here:
+  http://ionicframework.com/docs/v2/resources/third-party-libs/
+
+  For more info on type definition files, check out the Typescript docs here:
+  https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
+*/
+declare module '*';
+declare var cordova: any;

src/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src * 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-eval' 'unsafe-inline'">
+
+  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
+  <link rel="manifest" href="manifest.json">
+  <meta name="theme-color" content="#4e8ef7">
+
+  <!-- cordova.js required for cordova apps -->
+  <script src="cordova.js"></script>
+
+  <link href="build/main.css" rel="stylesheet">
+
+</head>
+<body>
+
+  <!-- Ionic's root component and where the app will load -->
+  <ion-app></ion-app>
+
+  <!-- The polyfills js is generated during the build process -->
+  <script src="build/polyfills.js"></script>
+
+  <!-- The bundle js is generated during the build process -->
+  <script src="build/main.js"></script>
+
+</body>
+</html>

src/pages/frame/frame-image.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+
+import { Http, Response } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+import { Transfer } from 'ionic-native';
+
+import * as CONFIG from '../../config';
+
+@Injectable()
+export class FrameImageService {
+  constructor(private http: Http) {}
+
+  getRemoteImages(): Promise<string[]> {
+    return this.http.get(CONFIG.url + "files.txt")
+      .toPromise()
+      .then((res: Response) => res.text().split("\n"))
+      .catch(errLogger("files.txt"))
+      .catch(() => []);
+  }
+
+  downloadImage(image: string): Promise<any> {
+    const fileTransfer = new Transfer();
+    let url = CONFIG.url + image;
+    return fileTransfer.download(url, cordova.file.dataDirectory + image)
+      .then(entry => image)
+      .catch(errLogger(image))
+      .catch(() => null);
+  }
+
+  getLocalImages(): string[] {
+    let imagesJson: string = localStorage.getItem("framie_images") || "";
+    let images: string[];
+
+    try {
+      images = JSON.parse(imagesJson);
+    } catch (e) {
+      images = [];
+    }
+
+    return images;
+  }
+
+  setLocalImages(images: string[]): void {
+    localStorage.setItem("framie_images", JSON.stringify(images));
+  }
+
+}
+
+let errLogger = (key: string) => (error: any) => {
+  console.error(key, error);
+  return Promise.reject(error);
+};

src/pages/frame/frame.html

@@ -0,0 +1,8 @@
+<ion-content (swipe)="this.skipIteration()">
+  <div class="image first" [class.active]="activeImage === 'first'"
+    [style.background-image]="this.baseUrl &&  displayedImages?.first && 'url(' + this.baseUrl + displayedImages?.first + ')'"
+  ></div>
+  <div class="image second" [class.active]="activeImage === 'second'"
+    [style.background-image]="this.baseUrl &&  displayedImages?.first && 'url(' + this.baseUrl + displayedImages?.second + ')'"
+  ></div>
+</ion-content>

src/pages/frame/frame.scss

@@ -0,0 +1,27 @@
+page-frame {
+  .scroll-content {
+    overflow-y: hidden;
+    background-color: black;
+
+    .image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: black;
+      background-size: contain;
+      background-position: center center;
+      background-repeat: no-repeat;
+      z-index: 1;
+      opacity: 0;
+      transform: translateZ(0);
+      transition: opacity 5s ease-in-out;
+
+      &.active {
+        z-index: 2;
+        opacity: 1;
+      }
+    }
+  }
+}