Merge branch 'release/1.0.0'

lit-kansai-members · Jan 16, 2017 · ada7f90 · ada7f90
2 parents 99b69d6 + 12e7311
commit ada7f90
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 89 deletions.
diff --git a/icon128.png b/icon128.png
diff --git a/icon16.png b/icon16.png
diff --git a/icon19.png b/icon19.png
diff --git a/icon48.png b/icon48.png
diff --git a/jquery-3.1.1.min.js b/jquery-3.1.1.min.js
diff --git a/logo.png b/logo.png
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,9 @@
 {
 	"manifest_version": 2,
 	"name": "MIYUKKI Direct",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"description": "A DJ MIYUKKI SYSTEM client .",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzJ/fLU6NmR75JJfPQZVQqDYO6HNPh9D1mqnv9Mn5qy7Z7WnG7UeRFPxTEREFoSPVuQDUbrgPuE+06eTGz6zNg64ubA7Z9NItx7ubDi2ExVkkPxsSx+3zNVBZB8Qri4lkGTavw+b9YegF2YfgISYtx1s3PjWRWVQLATo+zbMsM+QSdEvJ8sgre2oNYCKykUBAyziaaqdIGtMqaNQCS8iDlnh6ng+NTVSQli1XAsKC4/c9xemR+pdas1cOsfUEGonMgPB70Ta0Q7iXaHfVyc5qkNholgKi9KQ1IF05twZQMxHukyqknnnsX7QTrugf4ZzK3JoJgalM/cYmR/ZgHwnm4wIDAQAB",
 	"icons": {
 		"16": "icon16.png",
 		"48": "icon48.png",

diff --git a/popup.css b/popup.css
@@ -121,7 +121,7 @@ h1, h2, h3, h4, h5{
   flex-wrap: nowrap;
 }
 
-.ellipsis, .ellipsis2, .ellipsis3{
+.ellipsis, .ellipsis2, .ellipsis6{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -136,8 +136,8 @@ h1, h2, h3, h4, h5{
   -webkit-line-clamp: 2;
 }
 
-.ellipsis3{
-  -webkit-line-clamp: 3;
+.ellipsis6{
+  -webkit-line-clamp: 6;
 }
 
 .stretch{
@@ -178,8 +178,8 @@ header{
   opacity: 100;
 }
 
-#init:target ~ #logo{
-  width: calc(100% - 2em);
+#init:target ~ header{
+  display: none;
 }
 
 #loading{

diff --git a/popup.html b/popup.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <title>MIYUKKI Direct</title>
-  <script src="./jquery-3.1.1.min.js"></script>
   <link rel="stylesheet" href="./popup.css">
   <template id="searchResultTemplete">
     <li class="flex-container match-parent">
@@ -18,7 +17,7 @@ <h2 class="ellipsis title"></h2>
 <body>
 <section id="init">
   <form action="" id="getShortenURL" class="flex-container flex-column full-parent">
-  <img class="match-parent" src="./djmiyukki-logo.png" alt="DJ MIYUKKI SYSTEM">
+  <img class="match-parent" src="./logo.png" alt="DJ MIYUKKI SYSTEM">
     <div class="stretch"></div>
     <p>
       <select id="selectUrlType" class="match-parent">
@@ -48,11 +47,11 @@ <h2 class="ellipsis title"></h2>
   </form>
 </section>
 
-<section id="post">
-  <img src="" class="match-parent" id="thumb">
-
+<section id="post" class="flex-container flex-column">
+  <iframe id="player" src="" frameborder="0"></iframe>
   <h2 id="videoTitle" class="ellipsis2"></h2>
-  <p id="videoDescription" class="ellipsis3"></p>
+  <p id="videoDescription" class="ellipsis6"></p>
+  <div class="stretch"></div>
   <p>
     を送信します。
     よろしいですか？
@@ -73,25 +72,27 @@ <h2 id="videoTitle" class="ellipsis2"></h2>
 <ul id="search-result" class="match-parent"></ul>
 </section>
 
-<section id="error">
+<section id="error" class="flex-container flex-column">
 エラーが発生しました。:
 <p id="error-result"></p>
+<div class="stretch"></div>
 <button class="back match-parent">戻る</button>
 </section>
 
-<section id="success">
+<section id="success" class="flex-container flex-column">
   <p>
     成功しました。
   </p>
   <p>
     動画が再生されるまでお楽しみに！
   </p>
+  <div class="stretch"></div>
   <button class="back match-parent">戻る</button>
 </section>
 
 <header>
   <p class="flex-container">
-    <img src="./djmiyukki-logo.png" alt="DJ MIYUKKI SYSTEM" id="logo">
+    <img src="./logo.png" alt="DJ MIYUKKI SYSTEM" id="logo">
     <button id="logout" class="stretch margin-button">LOGOUT</button>
   </p>
   <p>

diff --git a/popup.js b/popup.js
@@ -1,28 +1,31 @@
-const $window = $(window);
+"use strict"
 
-const $inputShortenURL = $("#inputShortenURL")[0];
-const $selectUrlType = $("#selectUrlType")[0]
-const $errorResult = $("#error-result");
-const $inputKeepPeriod = $("#inputKeepPeriod");
+const $ = selector => Array.from(document.querySelectorAll(selector));
+const $id = id => document.getElementById(id);
 
-const $showRoomId = $("#roomId");
-const $showKeepPeriod = $("#showKeepPeriod");
-const $getShortenURL  = $("#getShortenURL");
+const $inputShortenURL = $id("inputShortenURL");
+const $selectUrlType = $id("selectUrlType");
+const $errorResult = $id("error-result");
+const $inputKeepPeriod = $id("inputKeepPeriod");
 
-const $videoTitle = $("#videoTitle");
-const $videoDescription = $("#videoDescription");
-const $thumb = $("#thumb");
-const $submitForm = $("#submit");
+const $showRoomId = $id("roomId");
+const $showKeepPeriod = $id("showKeepPeriod");
+const $getShortenURL  = $id("getShortenURL");
 
-const $inputSearchQuery = $("#inputSearchQuery");
+const $videoTitle = $id("videoTitle");
+const $videoDescription = $id("videoDescription");
+const $player = $id("player");
+const $submitForm = $id("submit");
 
-const $search = $("#search");
-const $searchResult = $("#search-result")
-const $searchResultTemplete = $("#searchResultTemplete")[0];
-const searchHeight = $search.height();
+const $inputSearchQuery = $id("inputSearchQuery");
 
-const $removeHistory = $("#removeHistory");
-const $history = $("#history");
+const $search = $id("search");
+const $searchResult = $id("search-result")
+const $searchResultTemplete = $id("searchResultTemplete");
+const searchHeight = $search.offsetHeight;
+
+const $removeHistory = $id("removeHistory");
+const $history = $id("history");
 
 const error = e =>{
   console.error("something Error occured!", e)
@@ -36,15 +39,13 @@ let nextPageToken = "";
 let searchResults = [];
 let videoInfo = {};
 
-$("a").on("click", ({target:{href: url}}) => chrome.tabs.create({url}))
+$("a").forEach(e => e.addEventListener("click", ({target:{href: url}}) => chrome.tabs.create({url})))
 
 const getRoomId = url =>{
   return fetch(url, {redirect: "manual", mode: "no-cors"})
     .then(responise =>{
-      if(responise.type === "opaqueredirect"){
-        Promise.resolve();
-      } else {
-        Promise.reject(new Error(`Requested URL ${url} is not redirectable.`));
+      if(responise.type !== "opaqueredirect"){
+        throw new Error(`Requested URL ${url} is not redirectable.`);
       }
     })
     .then(() => new Promise((resolve, reject) =>
@@ -93,16 +94,16 @@ const checkVideoDuration = id =>
 
 const toPost = video => {
   videoInfo = video;
-  $thumb.attr("src", video.snippet.thumbnails.high.url);
-  $videoTitle.text(video.snippet.title);
-  $videoDescription.text(video.snippet.description)
-  $submitForm[0].id.value = video.id;
+  $player.src = `https://www.youtube.com/embed/${video.id}?color=white&fs=0&rel=0&showinfo=0`;
+  $videoTitle.innerText = video.snippet.title;
+  $videoDescription.innerText = video.snippet.description;
+  $submitForm.id.value = video.id;
   location.hash = "post";
 }
 
 const renderSearchResult = (videos, reset=true) =>{
   if(reset){
-    $searchResult.html("");
+    $searchResult.innerHTML = "";
     searchResults = [];
   }
   videos.forEach(video =>{
@@ -114,26 +115,26 @@ const renderSearchResult = (videos, reset=true) =>{
       .querySelector(".thumb").src = video.snippet.thumbnails.medium.url;
     $searchResultTemplete.content
       .querySelector("li").addEventListener("click", () => toPost(video));
-    $searchResult.append(
+    $searchResult.appendChild(
       document.importNode($searchResultTemplete.content, true));
   })
   searchResults = searchResults.concat(videos);
 }
 
-const search = () =>{
-  const {value} = $inputSearchQuery[0]
+const search = isFirstFetch =>{
+  const {value} = $inputSearchQuery
   let URL = `https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=20&q=${encodeURIComponent(value)}`;
-  if(lastFetchURL !== URL){nextPageToken = null};
-  const isFirstFetch = !nextPageToken;
+  if(isFirstFetch) nextPageToken = null;
   if(!nextPageToken && lastFetchURL === URL){
     return;
   }
   const fetchId = ++lastFetch;
+  let _token;
   lastFetchURL = URL;
   if(nextPageToken){
     URL = `${URL}&pageToken=${nextPageToken}`
   }
-  $searchResult.addClass("loading");
+  $searchResult.classList.add("loading");
   if(value){
     Promise.resolve()
       .then(() => new Promise(res => 
@@ -148,7 +149,7 @@ const search = () =>{
         }
       })
       .then(({nextPageToken: t, items: results}) =>{
-        nextPageToken = t;
+        _token = t;
         return Promise.all(results
         .map(({id:{videoId}}) =>
           checkVideoDuration(videoId)
@@ -157,47 +158,50 @@ const search = () =>{
       .then(results => results.filter(v => v))
       .then(videos => {
         if(fetchId === lastFetch) {
-          $history.css({display: "none"});
+          nextPageToken = _token;
+          $history.style.display = "none";
           renderSearchResult(videos, isFirstFetch);
-          $searchResult.removeClass("loading");
+          $searchResult.classList.remove("loading");
         }
       })
-      .catch(error)
+      .catch(r => {location.hash = ""; error(r)})
   } else {
     nextPageToken = null;
-    $history.css({display: ""});
+    $history.style.display = "";
     chrome.storage.sync.get("history",({history=[]}) =>{
       renderSearchResult(history);
-      $searchResult.removeClass("loading");
+      $searchResult.classList.remove("loading");
     });
   }
 }
 
-$window.on("hashchange", () =>{
-  if(location.hash === "#search" && !$inputSearchQuery.val()){
+window.addEventListener("hashchange", () =>{
+  if(location.hash === "#search" && !$inputSearchQuery.value){
     search();
   }
 });
 
-$(".back").on("click", e =>{history.back();history.back()})
+$(".back").forEach(e => e.addEventListener("click", e =>{
+  history.go(-2);
+}))
 
-$getShortenURL.on("submit", e => {
+$getShortenURL.addEventListener("submit", e => {
   location.hash = "";
   const {value: baseURL} = $selectUrlType;
   const {value: param} = $inputShortenURL;
   Promise.resolve()
     .then(() => baseURL === "direct" ? param : getRoomId(baseURL + param))
     .then( roomId => new Promise((resolve) => {
-      const val = $inputKeepPeriod.val();
+      const {value} = $inputKeepPeriod;
       let keepPeriod;
-      if ( 0 >= val ){
+      if ( 0 >= value ){
         keepPeriod = "Infinity";
       } else {
         const toDay = new Date;
         keepPeriod = (new Date(
           toDay.getFullYear(),
           toDay.getMonth(),
-          toDay.getDate() + ($inputKeepPeriod.val() - 0)
+          toDay.getDate() + (value - 0)
         )).getTime();
       }
 
@@ -206,14 +210,14 @@ $getShortenURL.on("submit", e => {
     }))
     .then(()=> location.reload())
     .catch(reason => error(reason))
-    $getShortenURL[0].reset();
-    return false;
+    $getShortenURL.reset();
+    e.preventDefault();
 });
 
-$submitForm.on("submit", ()=> {
+$submitForm.addEventListener("submit", e => {
   location.hash = "";
   fetch("https://dj.life-is-tech.com/api",
-    { method: "POST", body: new FormData($submitForm[0])})
+    { method: "POST", body: new FormData($submitForm)})
     .then(res => {
       if(res.ok){
         chrome.storage.sync.get("history", ({history = []}) =>{
@@ -226,47 +230,47 @@ $submitForm.on("submit", ()=> {
       }
     })
     .catch(reason => error(reason));
-  return false;
+  e.preventDefault();
 });
 
-$("#logout").on("click", () => 
+$id("logout").addEventListener("click", () => 
   chrome.storage.sync.remove(["roomId", "keepPeriod"], ()=> location.reload()));
 
-$removeHistory.on("click", ()=>
+$removeHistory.addEventListener("click", ()=>
   chrome.storage.sync.remove("history", () => location.reload()))
 
-$inputSearchQuery.on("focus", () => {
+$inputSearchQuery.addEventListener("focus", () => {
   location.hash = "search";
-  $inputSearchQuery[0].focus();
+  $inputSearchQuery.focus();
 });
 
-$inputSearchQuery.on("input", search);
+$inputSearchQuery.addEventListener("input", () => search(true));
 
-$search.on("scroll", () =>{
-  if($search.scrollTop() >= $searchResult.height() - searchHeight - 70){
-    search();
+$search.addEventListener("scroll", () =>{
+  if($search.scrollTop >= $searchResult.offsetHeight - searchHeight - 70 && nextPageToken){
+    search(false);
   }
 });
 
-$searchResult.on("click", ({target}) =>{
+$searchResult.addEventListener("click", ({target}) =>{
   const clicked = searchResults[
     Array.from(document.querySelectorAll("#search-result li"))
     .findIndex(el => el.contains(target))]
   if(clicked) toPost(clicked);
 });
 
 (new Promise(res => chrome.storage.sync.get(["roomId", "keepPeriod"], v => res(v))))
-  .then(v =>{
-    if(!v.roomId || !v.keepPeriod || new Date > v.keepPeriod) {
+  .then(({roomId, keepPeriod}) =>{
+    if(!roomId || !keepPeriod || new Date > keepPeriod) {
       location.hash = "init";
+      $("header *:not(p):not(#logo)").forEach(e => e.style.display = "none")
     } else {
-      $showRoomId.text(v.roomId);
-      $submitForm[0].room_id.value = v.roomId;
-      $showKeepPeriod.text(Math.floor((v.keepPeriod - new Date) / (1000 * 60 * 60 * 24) + 1));
+      $showRoomId.innerText = roomId;
+      $submitForm.room_id.value = roomId;
+      $showKeepPeriod.innerText = Math.floor((keepPeriod - new Date) / (1000 * 60 * 60 * 24) + 1);
       (new Promise((res, rej) => chrome.tabs.query({active:true}, t =>{
         const match = t[0].url.match(/youtube.com\/.*[?&]v=([-\w]+)/);
         if (match) {
-          videoId = match[1]
           res(match[1])
         } else {
           rej(new Error("YouTube上で起動してください。"));
@@ -276,6 +280,4 @@ $searchResult.on("click", ({target}) =>{
         .then(toPost)
         .catch(() => location.hash = "search")
     }
-
-    $window.trigger("hashchange");
   })