Merge "server/perkeepd/ui: replace pudgy with keepy"

clients/web/embed/keepy/fileembed.go

@@ -0,0 +1,26 @@
+/*
+Copyright 2018 The Perkeep Authors.
+
+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.
+*/
+
+/*
+Package keepy embeds the keepy parakeet animation resources.
+
+#fileembed pattern .*\.png
+*/
+package keepy
+
+import "perkeep.org/pkg/fileembed"
+
+var Files = &fileembed.Files{}

pkg/server/ui.go

@@ -31,7 +31,7 @@ import (
 	"time"
 
 	fontawesomestatic "perkeep.org/clients/web/embed/fontawesome"
-	glitchstatic "perkeep.org/clients/web/embed/glitch"
+	keepystatic "perkeep.org/clients/web/embed/keepy"
 	leafletstatic "perkeep.org/clients/web/embed/leaflet"
 	lessstatic "perkeep.org/clients/web/embed/less"
 	opensansstatic "perkeep.org/clients/web/embed/opensans"
@@ -67,7 +67,7 @@ var (
 	leafletPattern     = regexp.MustCompile(`^leaflet/(.+)$`)
 	fontawesomePattern = regexp.MustCompile(`^fontawesome/(.+)$`)
 	openSansPattern    = regexp.MustCompile(`^opensans/(([^/]+)(/.*)?)$`)
-	glitchPattern      = regexp.MustCompile(`^glitch/(.+)$`)
+	keepyPattern       = regexp.MustCompile(`^keepy/(.+)$`)
 
 	disableThumbCache, _ = strconv.ParseBool(os.Getenv("CAMLI_DISABLE_THUMB_CACHE"))
 
@@ -105,7 +105,7 @@ type UIHandler struct {
 	fileLeafletHandler     http.Handler
 	fileFontawesomeHandler http.Handler
 	fileOpenSansHandler    http.Handler
-	fileGlitchHandler      http.Handler
+	fileKeepyHandler       http.Handler
 }
 
 func init() {
@@ -204,9 +204,9 @@ func uiFromConfig(ld blobserver.Loader, conf jsonconfig.Obj) (h http.Handler, er
 		if err != nil {
 			return nil, fmt.Errorf("Could not make leaflet handler: %s", err)
 		}
-		ui.fileGlitchHandler, err = makeFileServer(ui.sourceRoot, filepath.Join(vendorEmbed, "glitch"), "npc_piggy__x1_walk_png_1354829432.png")
+		ui.fileKeepyHandler, err = makeFileServer(ui.sourceRoot, filepath.Join(vendorEmbed, "keepy"), "keepy-dancing.png")
 		if err != nil {
-			return nil, fmt.Errorf("Could not make glitch handler: %s", err)
+			return nil, fmt.Errorf("Could not make keepy handler: %s", err)
 		}
 		ui.fileFontawesomeHandler, err = makeFileServer(ui.sourceRoot, filepath.Join(vendorEmbed, "fontawesome"), "css/font-awesome.css")
 		if err != nil {
@@ -451,8 +451,8 @@ func (ui *UIHandler) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
 		ui.serveFromDiskOrStatic(rw, req, reactPattern, ui.fileReactHandler, reactstatic.Files)
 	case getSuffixMatches(req, leafletPattern):
 		ui.serveFromDiskOrStatic(rw, req, leafletPattern, ui.fileLeafletHandler, leafletstatic.Files)
-	case getSuffixMatches(req, glitchPattern):
-		ui.serveFromDiskOrStatic(rw, req, glitchPattern, ui.fileGlitchHandler, glitchstatic.Files)
+	case getSuffixMatches(req, keepyPattern):
+		ui.serveFromDiskOrStatic(rw, req, keepyPattern, ui.fileKeepyHandler, keepystatic.Files)
 	case getSuffixMatches(req, fontawesomePattern):
 		ui.serveFromDiskOrStatic(rw, req, fontawesomePattern, ui.fileFontawesomeHandler, fontawesomestatic.Files)
 	case getSuffixMatches(req, openSansPattern):

server/perkeepd/ui/blob_item_container_react.js

@@ -271,10 +271,10 @@ cam.BlobItemContainerReact = React.createClass({
 	},
 
 	getNoResultsMessage_: function() {
-		var piggyWidth = 88;
-		var piggyHeight = 62;
-		var w = 350;
-		var h = 100;
+		var keepyWidth = 118;
+		var keepyHeight = 108;
+		var w = 200;
+		var h = 200;
 
 		return React.DOM.div(
 			{
@@ -289,13 +289,13 @@ cam.BlobItemContainerReact = React.createClass({
 			},
 			React.DOM.div(null, 'No results found'),
 			React.createElement(cam.SpritedImage, {
-				index: 6,
-				sheetWidth: 10,
-				spriteWidth: piggyWidth,
-				spriteHeight: piggyHeight,
-				src: 'glitch/npc_piggy__x1_rooked1_png_1354829442.png',
+				index: 0,
+				sheetWidth: 1,
+				spriteWidth: keepyWidth,
+				spriteHeight: keepyHeight,
+				src: 'keepy/keepy-sad.png',
 				style: {
-					marginLeft: (w - piggyWidth) / 2
+					marginLeft: (w - keepyWidth) / 2
 				}
 			})
 		);

server/perkeepd/ui/dir_container.js

@@ -381,10 +381,10 @@ cam.DirContainer = React.createClass({
 	},
 
 	getNoResultsMessage_: function() {
-		var piggyWidth = 88;
-		var piggyHeight = 62;
-		var w = 350;
-		var h = 100;
+		var keepyWidth = 118;
+		var keepyHeight = 108;
+		var w = 200;
+		var h = 200;
 
 		return React.DOM.div(
 			{
@@ -399,13 +399,13 @@ cam.DirContainer = React.createClass({
 			},
 			React.DOM.div(null, 'No results found'),
 			React.createElement(cam.SpritedImage, {
-				index: 6,
-				sheetWidth: 10,
-				spriteWidth: piggyWidth,
-				spriteHeight: piggyHeight,
-				src: 'glitch/npc_piggy__x1_rooked1_png_1354829442.png',
+				index: 0,
+				sheetWidth: 1,
+				spriteWidth: keepyWidth,
+				spriteHeight: keepyHeight,
+				src: 'keepy/keepy-sad.png',
 				style: {
-					marginLeft: (w - piggyWidth) / 2
+					marginLeft: (w - keepyWidth) / 2
 				}
 			})
 		);

server/perkeepd/ui/header.js

@@ -24,8 +24,8 @@ goog.require('cam.SpritedImage');
 cam.Header = React.createClass({
 	displayName: 'Header',
 
-	KEEPY_NATIVE_WIDTH: 88,
-	KEEPY_NATIVE_HEIGHT: 62,
+	KEEPY_NATIVE_WIDTH: 118,
+	KEEPY_NATIVE_HEIGHT: 108,
 	KEEPY_MARGIN: {
 		LEFT: 1,
 		RIGHT: 4,
@@ -103,7 +103,7 @@ cam.Header = React.createClass({
 
 	getKeepy_: function() {
 		var props = {
-			sheetWidth: 11,
+			sheetWidth: 6,
 			spriteWidth: this.KEEPY_NATIVE_WIDTH,
 			spriteHeight: this.KEEPY_NATIVE_HEIGHT,
 			style: cam.reactUtil.getVendorProps({
@@ -117,23 +117,23 @@ cam.Header = React.createClass({
 
 		var image = function() {
 			if (this.props.errors.length) {
-				return React.createElement(cam.SpritedAnimation, cam.object.extend(props, {
+				return React.createElement(cam.SpritedImage, cam.object.extend(props, {
+					sheetWidth: 1,
 					key: 'error',
-					loopDelay: 10 * 1000,
-					numFrames: 65,
-					src: 'glitch/npc_piggy__x1_too_much_nibble_png_1354829441.png',
+					index: 0,
+					src: 'keepy/keepy-sad.png',
 				}));
 			} else if (this.props.pendingQuery) {
 				return React.createElement(cam.SpritedAnimation, cam.object.extend(props, {
 					key: 'pending',
-					numFrames: 24,
-					src: 'glitch/npc_piggy__x1_walk_png_1354829432.png',
+					numFrames: 12,
+					src: 'keepy/keepy-dancing.png',
 				}));
 			} else {
 				return React.createElement(cam.SpritedImage, cam.object.extend(props, {
 					key: 'ok',
-					index: 5,
-					src: 'glitch/npc_piggy__x1_chew_png_1354829433.png',
+					index: 3,
+					src: 'keepy/keepy-dancing.png',
 				}));
 			}
 		};

server/perkeepd/ui/image_detail.js

@@ -24,8 +24,8 @@ cam.ImageDetail = React.createClass({
 	displayName: 'ImageDetail',
 
 	IMG_MARGIN: 20,
-	PIGGY_WIDTH: 88,
-	PIGGY_HEIGHT: 62,
+	KEEPY_WIDTH: 118,
+	KEEPY_HEIGHT: 108,
 
 	propTypes: {
 		backwardPiggy: React.PropTypes.bool.isRequired,
@@ -97,17 +97,17 @@ cam.ImageDetail = React.createClass({
 		if (this.isImage_() && !this.state.imgHasLoaded) {
 			transition.props.children.push(
 				React.createElement(cam.SpritedAnimation, {
-					key: 'piggy-sprite',
-					src: 'glitch/npc_piggy__x1_walk_png_1354829432.png',
+					key: 'keepy-sprite',
+					src: 'keepy/keepy-dancing.png',
 					className: classNames({
 						'detail-view-piggy': true,
 						'detail-view-piggy-backward': this.props.backwardPiggy
 					}),
-					numFrames: 24,
-					spriteWidth: this.PIGGY_WIDTH,
-					spriteHeight: this.PIGGY_HEIGHT,
-					sheetWidth: 8,
-					style: this.getCenteredProps_(this.PIGGY_WIDTH, this.PIGGY_HEIGHT)
+					numFrames: 12,
+					spriteWidth: this.KEEPY_WIDTH,
+					spriteHeight: this.KEEPY_HEIGHT,
+					sheetWidth: 6,
+					style: this.getCenteredProps_(this.KEEPY_WIDTH, this.KEEPY_HEIGHT)
 				}));
 		}
 		return transition;

server/perkeepd/ui/index.js

@@ -1450,16 +1450,16 @@ cam.IndexPage = React.createClass({
 			return false
 		}
 
-		var piggyWidth = 88;
-		var piggyHeight = 62;
+		var keepyWidth = 118;
+		var keepyHeight = 108;
 		var borderWidth = 18;
 		var w = this.props.availWidth * 0.8;
 		var h = this.props.availHeight * 0.8;
 		var iconProps = {
 			key: 'icon',
-			sheetWidth: 10,
-			spriteWidth: piggyWidth,
-			spriteHeight: piggyHeight,
+			sheetWidth: 6,
+			spriteWidth: keepyWidth,
+			spriteHeight: keepyHeight,
 			style: {
 				marginRight: 3,
 				position: 'relative',
@@ -1505,20 +1505,21 @@ cam.IndexPage = React.createClass({
 		function getIcon() {
 			if (this.isUploading_() || this.isAddingMembers_()) {
 				return React.createElement(cam.SpritedAnimation, cam.object.extend(iconProps, {
-					numFrames: 48,
-					src: 'glitch/npc_piggy__x1_chew_png_1354829433.png',
+					numFrames: 12,
+					startFrame: 3,
+					interval: 100,
+					src: 'keepy/keepy-dancing.png',
 				}));
 			} else if (this.state.dropActive) {
-				return React.createElement(cam.SpritedAnimation, cam.object.extend(iconProps, {
-					loopDelay: 4000,
-					numFrames: 48,
-					src: 'glitch/npc_piggy__x1_look_screen_png_1354829434.png',
-					startFrame: 6,
+				// TODO(mpl): keepy expressing interest.
+				return React.createElement(cam.SpritedImage, cam.object.extend(iconProps, {
+					index: 3,
+					src: 'keepy/keepy-dancing.png',
 				}));
 			} else {
 				return React.createElement(cam.SpritedImage, cam.object.extend(iconProps, {
-					index: 0,
-					src: 'glitch/npc_piggy__x1_look_screen_png_1354829434.png',
+					index: 3,
+					src: 'keepy/keepy-dancing.png',
 				}));
 			}
 		}
@@ -1568,8 +1569,8 @@ cam.IndexPage = React.createClass({
 					style: {
 						textAlign: 'center',
 						position: 'relative',
-						left: -piggyWidth / 2,
-						top: (h - piggyHeight - borderWidth * 2) / 2,
+						left: -keepyWidth / 2,
+						top: (h - keepyHeight - borderWidth * 2) / 2,
 					},
 				},
 				getIcon.call(this),