add: とりあえず基本機能を実装

package.json

@@ -1,31 +1,31 @@
 {
   "name": "yui",
   "version": "0.0.1",
-  "description": "Electron製のYouTubeプレイヤー「結衣」",
+  "description": "Electron製のYouTubeプレイヤー「Shuvi」",
   "main": "src/bin/js/bin.js",
   "scripts": {
     "start": "electron .",
     "build": "gulp",
     "watch": "gulp watch",
-    "package:mac": "electron-packager . 結衣 --out=__release__ --platform=darwin --arch=x64 --icon=icons/icon.icns --overwrite",
-    "package:win": "electron-packager . 結衣 --out=__release__ --platform=win32 --arch=x64 --icon=icons/icon.ico --overwrite",
-    "package:linux": "electron-packager . 結衣 --out=__release__ --platform=linux --arch=x64 --icon=icons/icon.icns --overwrite"
+    "package:mac": "electron-packager . Shuvi --out=__release__ --platform=darwin --arch=x64 --icon=icons/icon.icns --overwrite",
+    "package:win": "electron-packager . Shuvi --out=__release__ --platform=win32 --arch=x64 --icon=icons/icon.ico --overwrite",
+    "package:linux": "electron-packager . Shuvi --out=__release__ --platform=linux --arch=x64 --icon=icons/icon.icns --overwrite"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yuki540net/yui.git"
   },
   "keywords": [
     "Electron",
-    "yui",
+    "Shuvi",
     "YouTube"
   ],
   "author": "yuki540",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/yuki540net/yui/issues"
+    "url": "https://github.com/yuki540net/Shuvi/issues"
   },
-  "homepage": "https://github.com/yuki540net/yui#readme",
+  "homepage": "https://github.com/yuki540net/Shuvi#readme",
   "dependencies": {
     "coffee-script": "^1.12.5",
     "electron": "^1.6.6",

src/config/window.json

@@ -1,6 +1,6 @@
 {
-	"width"       : 450,
-	"height"      : 300,
+	"width"       : 570,
+	"height"      : 380,
 	"minWidth"    : 450,
 	"minHeight"   : 300,
 	"frame"       : false,

src/scripts/app.coffee

@@ -36,10 +36,38 @@ window.addEventListener 'resize', ->
 
 	youtube.resize width, height
 
+# preload ------------------------------------------------------
+observer.on 'preload', (params) ->
+	history = JSON.parse localStorage['history']
+
+	for val, i in history
+		if not val
+			continue
+		if val.id is params.id
+			history.splice i, 1
+
+	history.unshift params
+
+	if history.length > 100
+		history.splice (history.length - 1), 1
+
+	localStorage['id']      = params.id
+	localStorage['history'] = JSON.stringify history
+
 ##
 # 初期化
 ##
 top.init = ->
+	# 初期動画
+	id    = 'fQN2WC_Acpg'
+	title = 'https://i.ytimg.com/vi/fQN2WC_Acpg/default.jpg'
+	thumb = '映画『ノーゲーム・ノーライフ ゼロ』 PV 第1弾'
+
 	if not localStorage['id']
-		localStorage['id'] = 'MGt25mv4-2Q'
+		localStorage['id']      = id
+		localStorage['history'] = JSON.stringify([{ 
+			id    : id
+			title : title
+			thumb : thumb 
+		}])
 

src/scripts/component/tag/application.tag

@@ -1,7 +1,10 @@
 application(
 	style="width:{ width }px;height:{ height }px"
 )
-	title-bar
+	title-bar(
+		width="{ width }"
+		height="{ height }"
+	)
 	controls(
 		width="{ width }"
 		height="{ height }"
@@ -35,9 +38,31 @@ application(
 			@update()
 
 		# mouse over ----------------------------------------
+		timer = null
 		window.addEventListener 'mouseover', (e) =>
+			clearTimeout timer
+			observer.trigger 'show'
+
+			timer = setTimeout =>
+				observer.trigger 'hidden'
+			, 3000
+
+		window.addEventListener 'mousemove', (e) =>
+			clearTimeout timer
 			observer.trigger 'show'
 
+			timer = setTimeout =>
+				observer.trigger 'hidden'
+			, 3000
+
+		window.addEventListener 'click', (e) =>
+			clearTimeout timer
+			observer.trigger 'show'
+
+			timer = setTimeout =>
+				observer.trigger 'hidden'
+			, 3000
+
 		# mouse out -----------------------------------------
 		window.addEventListener 'mouseout',(e) =>
 			observer.trigger 'hidden'

src/scripts/component/tag/history.tag

@@ -1,40 +1,114 @@
 history(
 	style="height:{ height }px"
 )
+	div.li(
+		each="{ history }"
+		data-state="{ state }"
+		data-id="{ id }"
+		onclick="{ onSelect }"
+	)
+		div.thumb(style="background-image:url({ thumb })")
+		div.title { title }
 
 	style(scoped).
 		:scope {
 			position: absolute;
 			top: 0;
-			right: -200px;
+			right: -301px;
 			display: block;
-			width: 200px;
+			width: 300px;
 			background-color: #222;
+			overflow: auto;
+			border-left: solid 1px #c85399;
 			z-index: 10;
 		}
 		:scope[data-state="active"] { animation: show 0.3s ease 0s forwards; }
 		:scope[data-state="passive"] { animation: hidden 0.3s ease 0s forwards; }
 		@keyframes show {
-			0%   { right: -200px; }
+			0%   { right: -301px; }
 			100% { right: 0px; }
 		}
 		@keyframes hidden {
 			0%   { right: 0px; }
-			100% { right: -200px; }
+			100% { right: -301px; }
+		}
+		:scope .li {
+			width: 280px;
+			height: 45px;
+			background-color: #444;
+			margin: 10px auto;
+			overflow: hidden;
+			border-radius: 3px;
+			cursor: pointer;
+		}
+		:scope .li[data-state="true"] {
+			background-color: #c85399;
+		}
+		:scope .li[data-state="true"] .title {
+			color: #fff;
+		}
+		:scope .li:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+		:scope .li .thumb {
+			float: left;
+			width: 80px;
+			height: 45px;
+			background-size: cover;
+			background-position: center;
+		}
+		:scope .li .title {
+			float: right;
+			width: 200px;
+			height: 45px;
+			font-size: 10px;
+			padding: 0 5px;
+			box-sizing: border-box;
+			color: #ccc;
+			line-height: 45px;
+			white-space: nowrap;
 		}
 
 	script(type="coffee").
 
+		##
+		# 履歴更新
+		##
+		@reload = ->
+			id      = localStorage['id']
+			history = JSON.parse localStorage['history']
+			for val, i in history
+				if val.id is id
+					history[i].state = true
+				else
+					history[i].state = false
+
+			@history = history
+
 		# mount ---------------------------------------------
 		@on 'mount', ->
 			@height = parseInt opts.height
+			@reload()
 			@update()
 
 		# resize --------------------------------------------
 		observer.on 'resize', (params) =>
 			@height = params.height
 			@update()
 
+		# select --------------------------------------------
+		@onSelect = (e) ->
+			id = e.path[1].getAttribute 'data-id'
+			youtube.getInfo id, (params) =>
+				youtube.change params.id
+
+		# load ----------------------------------------------
+		observer.on 'load', =>
+			@reload()
+			@update()
+
 		# open menu -----------------------------------------
 		observer.on 'open-menu', =>
 			@root.setAttribute 'data-state', 'active'

src/scripts/component/tag/info.tag

@@ -65,7 +65,7 @@ info
 			bottom: 0;
 			width: 5px;
 			height: 2px;
-			background-color: #E27171;
+			background-color: #c85399;
 		}
 		:scope .art[data-state="active"] .line1 div { animation: art 2s ease 0s infinite; }
 		:scope .art[data-state="active"] .line2 div { animation: art 2s ease 0.3s infinite; }
@@ -94,8 +94,8 @@ info
 
 	script(type="coffee").
 
-		# load ----------------------------------------------
-		observer.on 'load', (params) =>
+		# preload -------------------------------------------
+		observer.on 'preload', (params) =>
 			@title = params.title
 			@update()
 

src/scripts/component/tag/play.tag

@@ -33,18 +33,30 @@ play
 
 	script(type="coffee").
 
-		##
-		# 再生・停止
-		##
+		@active = ->
+			@root.children[0].setAttribute 'data-state', 'active'
+
+		@passive = ->
+			@root.children[0].setAttribute 'data-state', ''
+
+		# play or pause -------------------------------------
 		@onPlay = (e) ->
 			state = e.target.getAttribute 'data-state'
 
 			if state is 'active'
-				e.target.setAttribute 'data-state', ''
+				@passive
 				youtube.pause()
 			else
-				e.target.setAttribute 'data-state', 'active'
+				@active
 				youtube.play()
 
+		# play ----------------------------------------------
+		observer.on 'play', =>
+			@active()
+
+		# puase ---------------------------------------------
+		observer.on 'pause', =>
+			@passive()
+
 		# mount ---------------------------------------------
 		@on 'mount', ->

src/scripts/component/tag/seek.tag

@@ -47,7 +47,7 @@ seek
 			top: 0;
 			left: 0;
 			height: 5px;
-			background-color: #E27171;
+			background-color: #c85399;
 		}
 		:scope .seek .load {
 			position: absolute;
@@ -61,7 +61,7 @@ seek
 			top: -6.5px;
 			width: 8px;
 			height: 20px;
-			background-color: #E27171;
+			background-color: #c85399;
 			border-radius: 2px;
 			cursor: pointer;
 		}