8.3 更新媒体库

有时我们需要更新媒体库以让应用自动发现最新的媒体库。

通过startMediaScan方法开始更新媒体库¹：

chrome.mediaGalleries.startMediaScan();

^{1 从Chrome 35开始支持。}

startMediaScan没有然后返回值，也不会调用任何回调函数，因为更新的过程所花费的时间可能非常长，所以要使用onScanProgress来监听更新过程：

chrome.mediaGalleries.onScanProgress.addListener(function(details){
    //do something with details
});

其中details是一个对象，包含5个属性，分别是type、galleryCount、audioCount、imageCount和videoCount。type的可能值有start、cancel、finish和error，分别对应于开始更新、取消更新、完成更新和遇到错误。

在更新媒体库的过程中，通过cancelMediaScan方法可以随时取消更新：

chrome.mediaGalleries.cancelMediaScan();

同样cancelMediaScan方法也没有提供回调函数，而应通过onScanProgress监测更新过程中的取消事件。

当onScanProgress监测到更新完成事件之后，可以通过addScanResults方法向用户展示一个选择添加最新检测到媒体库的窗口：

chrome.mediaGalleries.addScanResults(function(mediaFileSystems){
    //do something with mediaFileSystems
});

mediaFileSystems是一个包含多个FileSystem的数组，其包含的是应用有权限访问的所有媒体库FileSystem，而非只是用户刚刚选择的。

下面我们来将更新媒体库的功能加入到Media Manager。首先在HTML中添加更新按钮、loading元素和出错提示框：

<div id="error">更新失败</div>
<div id="appTitle">Media Manager<span id="edit">㑦</span><span id="scan">Ŝ</span>
<div id="loading">
<div class="loading" index="0"></div>
<div class="loading" index="1"></div>
<div class="loading" index="2"></div>
<div class="loading" index="3"></div>
<div class="loading" index="4"></div>
</div>
</div>

之后在CSS中添加相应的样式：

#appTitle {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 24px;
    color: #CCC;
    background: #222;
    position: relative;
}

#edit, #scan {
    display: inline-block;
    font-size: 12px;
    font-family: 'iconfont';
    height: 20px;
    line-height: 20px;
    padding: 5px;
    cursor: pointer;
}

@-webkit-keyframes loading {
    0% {
        left: 0;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.loading {
    width: 5px;
    height: 5px;
    background: #CCC;
    position: absolute;
    opacity: 0;
    -webkit-animation: loading 5s;
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
    -webkit-animation-iteration-count: infinite;
}

.loading[index="0"] {
    -webkit-animation-delay: 0.3s;
}

.loading[index="1"] {
    -webkit-animation-delay: 0.6s;
}

.loading[index="2"] {
    -webkit-animation-delay: 0.9s;
}

.loading[index="3"] {
    -webkit-animation-delay: 1.2s;
}

.loading[index="4"] {
    -webkit-animation-delay: 1.5s;
}

#loading {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    display: none;
}

#error {
    background: rgba(255, 255, 255, 0.5);
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #222;
    text-align: center;
    display: none;
}

其中为了让loading元素位置相对于appTitle，将appTitle的position属性更改为了relative。

最后在JS中加入相应事件：

var scanning = false;

document.getElementById('scan').onclick = function(){
    scanning?
        chrome.mediaGalleries.startMediaScan&&chrome.mediaGalleries.startMediaScan():
        chrome.mediaGalleries.cancelMediaScan&&chrome.mediaGalleries.cancelMediaScan();
}

document.getElementById('error').onclick = function(){
    this.style.display = 'none';
}

chrome.mediaGalleries.onScanProgress&&chrome.mediaGalleries.onScanProgress.addListener(function(details){
    switch(details.type){
        case 'start':
            scanning = true;
            document.getElementById('loading').style.display = 'block';
            break;
        case 'cancel':
            scanning = false;
            document.getElementById('loading').style.display = 'none';
            break;
        case 'finish':
            scanning = false;
            document.getElementById('loading').style.display = 'none';
            chrome.mediaGalleries.addScanResults(listMediaGalleries);
            break;
        case 'error':
            scanning = false;
            document.getElementById('loading').style.display = 'none';
            document.getElementById('error').style.display = 'block';
            break;
    }
});

其中scanning变量用来记录应用是否正在更新媒体库，如果正在更新，当用户点击更新按钮后会停止更新，否则开始更新。

更新媒体库相关方法和事件在部分版本中尚未生效，所以在调用时均先做以判断，防止出现方法未定义的情况发生。