Show metadata on the list page

collection.go

@@ -56,16 +56,18 @@ func (c *Collection) Add(m *Movie) {
 	c.mutex.Lock()
 	defer c.mutex.Unlock()
 
+	c.hasChanged = true
+
 	for _, present := range c.Movies {
 		if m.IMDBID == present.IMDBID {
+			present.OMDB = m.OMDB
+			present.FillFromOMDB()
 			return
 		}
 	}
 
 	c.Movies = append(c.Movies, m)
 	c.movieMap[m.IMDBID] = m
-
-	c.hasChanged = true
 }
 
 func (c *Collection) HasChanged() bool {

movies.go

@@ -12,6 +12,9 @@ type Movie struct {
 	Poster   string
 	Rating   *Rating
 	IMDBID   string
+	Country  string
+	Year     string
+	Runtime  string
 
 	OMDB OMDBMovie
 }
@@ -83,6 +86,15 @@ func (m *Movie) FillFromOMDB() error {
 	if m.IMDBID == "" {
 		m.IMDBID = m.OMDB.IMDBID
 	}
+	if m.Country == "" {
+		m.Country = m.OMDB.Country
+	}
+	if m.Year == "" {
+		m.Year = m.OMDB.Year
+	}
+	if m.Runtime == "" {
+		m.Runtime = m.OMDB.Runtime
+	}
 
 	if m.Rating == nil {
 		m.Rating = &Rating{}

templates/list.html

@@ -15,14 +15,19 @@
         <ul class="movie-list">
             {{ range $m := .Collection.Movies }}
             <a href="/{{ $m.IMDBID }}">
-                <li>
+                <li class="movie">
                     <div class="poster">
                         <img src="{{ $m.Poster }}" title="{{ $m.Title }}" alt="{{ $m.Title }}" />
                     </div>
-                    <div class="metadata">
+                    <div class="title">
                         <h3>{{ $m.Title }}</h3>
                         <div>{{ $m.Director }}</div>
                     </div>
+                    <ul class="metadata">
+                        <li>{{ $m.Year }}</li>
+                        <li style="flex-grow: 2;">{{ $m.Country }}</li>
+                        <li>{{ $m.Runtime }}</li>
+                    </ul>
                 </li>
             </a>
             {{ end }}

templates/style.css

@@ -16,26 +16,40 @@ ul.movie-list {
     flex-wrap: wrap;
     padding: 0;
 }
-ul.movie-list li {
+ul.movie-list li.movie {
     width: 240px;
-    height: 400px;
+    height: 440px;
     display: grid;
-    grid-template-rows: 320px 80px;
+    grid-template-rows: 320px 80px 40px;
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     margin: 10px;
 }
-ul.movie-list li .poster {
+ul.movie-list li.movie .poster {
     justify-self: center;
     align-self: center;
 }
-ul.movie-list li .metadata {
+ul.movie-list li.movie .title {
     padding: 10px;
 }
-ul.movie-list li img {
+ul.movie-list li.movie img {
     max-width: 240px;
     max-height: 320px;
 }
-ul.movie-list li a {
+ul.movie-list li.movie a {
     color: black;
     text-decoration: none;
 }
+ul.movie-list li.movie ul.metadata {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+ul.movie-list li.movie ul.metadata li {
+    overflow: hidden;
+    padding-left: 10px;
+    padding-right: 10px;
+}