Merge pull request #413 from danactive/danactive/add-vertical

Add vertical photograph to demo sample gallery
danactive · Mar 15, 2020 · 80a4ae1 · 80a4ae1
2 parents f5eb818 + aabdc17
commit 80a4ae1
Show file tree

Hide file tree

Showing 11 changed files with 836 additions and 511 deletions.
diff --git a/api/package-lock.json b/api/package-lock.json
diff --git a/api/package.json b/api/package.json
@@ -74,7 +74,7 @@
     "jsdom": "^15.2.1",
     "lodash": "^4.17.15",
     "nyc": "^14.1.1",
-    "standard-version": "^6.0.1",
+    "standard-version": "^7.1.0",
     "style-loader": "^0.23.0",
     "tape": "^4.13.0",
     "tape-catch": "^1.0.6",

diff --git a/api/server/plugins/album/test/cases.js b/api/server/plugins/album/test/cases.js
@@ -103,7 +103,7 @@ cases.push({
   successView: (assert, result) => {
     assert.ok(result, 'Has response');
     const actual = result.album.items.length;
-    const expected = 5;
+    const expected = 6;
     assert.equal(actual, expected, 'Photo count');
     assert.end();
   },

diff --git a/api/server/plugins/album/test/index.spec.js b/api/server/plugins/album/test/index.spec.js
@@ -13,7 +13,7 @@ test('Verify /view/album route', { skip: false }, (describe) => {
   const testCases = require('./cases');
   const testCaseDef = require('../../../test/casesDefinition');
 
-  const SAMPLE_IMAGE_COUNT = 5;
+  const SAMPLE_IMAGE_COUNT = 6;
   const plugins = [inert, vision, lib];
 
   testCaseDef.execHapi({

diff --git a/public/galleries/gallery-demo/media/photos/2020/2020-02-28-40.jpg b/public/galleries/gallery-demo/media/photos/2020/2020-02-28-40.jpg
diff --git a/public/galleries/gallery-demo/media/thumbs/2020/2020-02-28-40.jpg b/public/galleries/gallery-demo/media/thumbs/2020/2020-02-28-40.jpg
diff --git a/public/galleries/gallery-demo/xml/album_sample.xml b/public/galleries/gallery-demo/xml/album_sample.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <?xml-stylesheet type="text/xsl" href="../../xslt/album.xslt"?>
-<!-- This XML associates photos and videos with meta data: geocode, caption, friends (characters)... -->
 <album>
 	<meta>
 		<gallery>demo</gallery>
@@ -62,10 +61,25 @@
 		<photo_city>Vancouver International Airport, BC</photo_city>
 		<photo_loc>YVR</photo_loc>
 		<thumb_caption>Airport</thumb_caption>
-		<photo_desc></photo_desc>
+		<photo_desc/>
 		<ref>
 			<name>Vancouver_International_Airport</name>
 			<source>wikipedia</source>
 		</ref>
 	</item>
+	<item id="6">
+		<filename>2020-02-28-40.jpg</filename>
+		<geo>
+			<lat>49.287434</lat>
+			<lon>-123.117035</lon>
+		</geo>
+		<photo_city>Vancouver, BC</photo_city>
+		<photo_loc>Brass Fish Tavern</photo_loc>
+		<thumb_caption>Tavern</thumb_caption>
+		<photo_desc>Located in the iconic art deco  Marine building</photo_desc>
+		<ref>
+			<name>Marine_Building</name>
+			<source>wikipedia</source>
+		</ref>
+	</item>
 </album>
diff --git a/ui/app/containers/SlippyPhoto/index.jsx b/ui/app/containers/SlippyPhoto/index.jsx
@@ -7,8 +7,29 @@ const Map = ReactMapboxGl({
   accessToken: 'pk.eyJ1IjoiZGFuYWN0aXZlIiwiYSI6ImNpdmo0OGo2YTAxcGIyenBkZWZlN3Ewam4ifQ.npY0cY_HdHg1OB692HtcUw',
 });
 
-const SlippyPhoto = ({ currentMemory }) => (
-  <Map {...getMapOptions(currentMemory)} />
-);
+const SlippyPhoto = ({ currentMemory }) => {
+  const { photoLink, thumbLink } = currentMemory;
+  const url = photoLink || thumbLink;
+
+  const top = 9.25;
+  const right = 17.5;
+  const bottom = 0;
+  const left = 0;
+
+  const coordinates = [
+    // long lat; start at the top left corner of the image
+    [left, top], // top left
+    [right, top], // top top
+    [right, bottom], // bottom top
+    [left, bottom], // bottom left
+
+  ];
+
+  const mapOptions = getMapOptions({ coordinates, url });
+
+  return (
+    <Map {...mapOptions} />
+  );
+};
 
 export default SlippyPhoto;
diff --git a/ui/app/containers/SlippyPhoto/options.js b/ui/app/containers/SlippyPhoto/options.js
@@ -1,17 +1,11 @@
-const getMapStyle = (currentMemory = {}) => ({
+const getMapStyle = ({ coordinates, url }) => ({
   version: 8,
   name: 'Photo',
   sources: {
-    overlay: {
+    photoSrc: {
       type: 'image',
-      url: currentMemory.photoLink || currentMemory.thumbLink,
-      coordinates: [
-        // long lat
-        [0, 9.25], // top left
-        [17.5, 9.25], // top right
-        [17.5, 0], // bottom right
-        [0, 0], // bottom left
-      ],
+      url,
+      coordinates,
     },
   },
   layers: [
@@ -21,21 +15,21 @@ const getMapStyle = (currentMemory = {}) => ({
       paint: { 'background-color': '#111' },
     },
     {
-      id: 'overlay',
-      source: 'overlay',
+      id: 'photoId',
+      source: 'photoSrc',
       type: 'raster',
     },
   ],
 });
 
-const getMapOptions = currentMemory => ({
+const getMapOptions = source => ({
   containerStyle: {
     height: '100%',
     width: '100%',
   },
   zoom: [5],
   center: [8.75, 4.625],
-  style: getMapStyle(currentMemory),
+  style: getMapStyle(source),
 });
 
 export default getMapOptions;