Initial frontend commit (setup)

.gitignore

@@ -0,0 +1,11 @@
+/node_modules/
+/build/
+/vendor/
+.php_cs.cache
+/tests/output/
+
+/js/
+/css/
+
+# @NOTE Remove on first release
+package-lock.json

gruntfile.js

@@ -0,0 +1,72 @@
+const sass = require('node-sass');
+
+module.exports = function (grunt) {
+	grunt.initConfig({
+		sass: {
+			options: {
+				implementation: sass,
+				sourcemap: false
+			},
+			dist: {
+				files: {
+					'css/files_mediaviewer.css': 'src/styles/default.scss'
+				}
+			}
+		},
+
+		browserify: {
+			dist: {
+				files: {
+					'js/files_mediaviewer.js': 'src/scripts/default.js'
+				},
+				options: {
+					transform: [
+						['babelify', {
+							presets: 'es2015'
+						}],
+						['vueify']
+
+					],
+					browserifyOptions: {
+						debug: true
+					}
+				}
+			}
+		},
+
+		watch: {
+			default: {
+				options: {
+					spawn: false
+				},
+				files: [
+					'src/**/*.js',
+					'src/**/*.scss',
+					'src/**/*.vue'
+				],
+				tasks: [
+					'force:on',
+					'sass',
+					'browserify',
+					'force:off'
+				]
+			}
+		}
+	}); //initConfig
+	//
+	grunt.loadNpmTasks('grunt-force');
+	grunt.loadNpmTasks('grunt-sass');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-browserify');
+
+	grunt.registerTask('default', [
+		'sass',
+		'browserify'
+	]);
+
+	grunt.registerTask('watcher', [
+		'sass',
+		'browserify',
+		'watch'
+	]);
+};

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "files_mediaviewer",
+  "version": "0.1.0",
+  "description": "Viewer for pictures and videos integrated in the files app",
+  "dependencies": {
+    "purecss": "^1.0.0",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^8.0.0",
+    "eslint": "^5.9.0",
+    "eslint-plugin-vue": "^4.7.1",
+    "grunt": "^1.0.3",
+    "grunt-browserify": "^5.3.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-force": "^1.0.0",
+    "grunt-sass": "^3.0.2",
+    "node-sass": "^4.10.0",
+    "vueify": "^9.4.1"
+  },
+  "browse": {
+    "vue": "vue/dist/vue.common.js"
+  },
+  "scripts": {
+    "build": "grunt default",
+    "watch": "grunt watcher",
+    "lint": "eslint ./src/scripts/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/owncloud/files_mediaviewer.git"
+  },
+  "keywords": [
+    "owncloud",
+    "media",
+    "gallery"
+  ],
+  "author": "Felix Heidecke",
+  "license": "GPL-2.0",
+  "bugs": {
+    "url": "https://github.com/owncloud/files_mediaviewer/issues"
+  },
+  "homepage": "https://github.com/owncloud/files_mediaviewer#readme"
+}

src/scripts/default.js

@@ -0,0 +1,40 @@
+// -------------------------- Lets remove some stuff we defenitly don't need ---
+
+// Components
+
+// Libs
+
+import Vue from 'vue/dist/vue.js';
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter);
+
+
+// --- Global Components
+
+import {
+	mixin as t_mixin,
+	directive
+} from './translate.js';
+
+Vue.mixin(t_mixin);
+Vue.directive('translate', directive);
+
+const router = new VueRouter({
+	routes: []
+});
+
+// --------------------------------------------------------------- app setup ---
+
+const files_mediaviewer = new Vue({
+	router,
+	template: '<router-view></router-view>',
+	data: {
+		name: 'Mediaviewer'
+	}
+});
+
+// Japp … we need to wait for a ready DOM
+$(document).ready(() => {
+	files_mediaviewer.$mount('#files_mediaviewer > div');
+});

src/scripts/translate.js

@@ -0,0 +1,20 @@
+const appName = require('../../package.json').name
+
+const mixin = {
+	methods: {
+		t(string, scope = appName) {
+			return t(scope, string);
+		}
+	}
+};
+
+const directive = {
+	bind(el, binding) {
+		el.innerText = t(binding.value, el.innerText.trim());
+	}
+};
+
+export {
+	mixin,
+	directive
+};

src/styles/default.scss

@@ -0,0 +1,26 @@
+$grid-gutter: 10px;
+
+// Colors
+
+$color-primary: #1d2d44;
+$color-secondary: #567298;
+
+$color-gray: #DCDCDC;
+$color-lightgray: #F1F1F1;
+
+$color-error : red;
+$color-error-border : #FED6D6;
+$color-error-background : #FFF0F0;
+
+$color-success :#3e5530;
+$color-success-background :#def7de;
+$color-success-border :#bbe2b7;
+
+$core-image-path : '../../../core/img';
+$app-image-path : '../img';
+
+#files_mediaviewer {
+	@import "../../node_modules/purecss/build/base-min";
+	@import "../../node_modules/purecss/build/grids-min";
+	@import "../../node_modules/purecss/build/grids-responsive-min";
+}

templates/settings.php

@@ -0,0 +1,10 @@
+<?php
+style('user_ldap', 'files_mediaviewer');
+script('user_ldap', 'files_mediaviewer');
+?>
+
+<section id="files_mediaviewer">
+    <div>
+        <!-- Mountpoint -->
+    </div>
+</section>