From 63bf44cd67253d4e3b7e456d7a53cc49877ab6b7 Mon Sep 17 00:00:00 2001
From: nixzhu <zhuhongxu@gmail.com>
Date: Thu, 2 Apr 2015 14:02:50 +0800
Subject: [PATCH] audio cells UI

---
 .../icon_play.imageset/Contents.json          |  13 +++
 .../icon_play.imageset/icon_play.pdf          | Bin 0 -> 4060 bytes
 .../ConversationViewController.swift          |  24 ++++++
 .../ChatLeftAudio/ChatLeftAudioCell.swift     |   2 +
 .../Cells/ChatLeftAudio/ChatLeftAudioCell.xib |  76 +++++++++++++++++-
 .../ChatRightAudio/ChatRightAudioCell.swift   |   2 +
 .../ChatRightAudio/ChatRightAudioCell.xib     |  76 +++++++++++++++++-
 7 files changed, 189 insertions(+), 4 deletions(-)
 create mode 100644 Yep/Images.xcassets/icon_play.imageset/Contents.json
 create mode 100644 Yep/Images.xcassets/icon_play.imageset/icon_play.pdf

diff --git a/Yep/Images.xcassets/icon_play.imageset/Contents.json b/Yep/Images.xcassets/icon_play.imageset/Contents.json
new file mode 100644
index 00000000..6ef428d5
--- /dev/null
+++ b/Yep/Images.xcassets/icon_play.imageset/Contents.json
@@ -0,0 +1,13 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_play.pdf"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode",
+    "template-rendering-intent" : "template"
+  }
+}
\ No newline at end of file
diff --git a/Yep/Images.xcassets/icon_play.imageset/icon_play.pdf b/Yep/Images.xcassets/icon_play.imageset/icon_play.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..5d017163e6d2138f2798845155e33be5a94ff9af
GIT binary patch
literal 4060
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

literal 0
HcmV?d00001

diff --git a/Yep/ViewControllers/Conversation/ConversationViewController.swift b/Yep/ViewControllers/Conversation/ConversationViewController.swift
index 142d1fb3..0a66db7a 100644
--- a/Yep/ViewControllers/Conversation/ConversationViewController.swift
+++ b/Yep/ViewControllers/Conversation/ConversationViewController.swift
@@ -298,6 +298,9 @@ class ConversationViewController: UIViewController {
         case MessageMediaType.Image.rawValue:
             return messageImageHeight + 10 + 10
 
+        case MessageMediaType.Audio.rawValue:
+            return 50
+
         default:
             let rect = message.textContent.boundingRectWithSize(CGSize(width: messageTextLabelMaxWidth, height: CGFloat(FLT_MAX)), options: .UsesLineFragmentOrigin | .UsesFontLeading, attributes: messageTextAttributes, context: nil)
 
@@ -549,6 +552,17 @@ extension ConversationViewController: UICollectionViewDataSource, UICollectionVi
 
                     return cell
 
+                case MessageMediaType.Audio.rawValue:
+                    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatLeftAudioCellIdentifier, forIndexPath: indexPath) as! ChatLeftAudioCell
+
+                    AvatarCache.sharedInstance.roundAvatarOfUser(sender, withRadius: YepConfig.chatCellAvatarSize() * 0.5) { roundImage in
+                        dispatch_async(dispatch_get_main_queue()) {
+                            cell.avatarImageView.image = roundImage
+                        }
+                    }
+                    
+                    return cell
+
                 default:
                     let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatLeftTextCellIdentifier, forIndexPath: indexPath) as! ChatLeftTextCell
 
@@ -593,6 +607,16 @@ extension ConversationViewController: UICollectionViewDataSource, UICollectionVi
                     
                     return cell
 
+                case MessageMediaType.Audio.rawValue:
+                    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatRightAudioCellIdentifier, forIndexPath: indexPath) as! ChatRightAudioCell
+
+                    AvatarCache.sharedInstance.roundAvatarOfUser(sender, withRadius: YepConfig.chatCellAvatarSize() * 0.5) { roundImage in
+                        dispatch_async(dispatch_get_main_queue()) {
+                            cell.avatarImageView.image = roundImage
+                        }
+                    }
+
+                    return cell
 
                 default:
                     let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatRightTextCellIdentifier, forIndexPath: indexPath) as! ChatRightTextCell
diff --git a/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.swift b/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.swift
index 46b251ac..a00e8b08 100644
--- a/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.swift
+++ b/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.swift
@@ -10,6 +10,8 @@ import UIKit
 
 class ChatLeftAudioCell: UICollectionViewCell {
 
+    @IBOutlet weak var avatarImageView: UIImageView!
+
     override func awakeFromNib() {
         super.awakeFromNib()
         // Initialization code
diff --git a/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.xib b/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.xib
index b13ac370..e457edd8 100644
--- a/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.xib
+++ b/Yep/Views/Cells/ChatLeftAudio/ChatLeftAudioCell.xib
@@ -2,17 +2,89 @@
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7528.3" systemVersion="14C1514" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
     <dependencies>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7518.3"/>
+        <capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
         <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="ChatLeftAudioCell" id="gTV-IL-0wX" customClass="ChatLeftAudioCell" customModule="Yep" customModuleProvider="target">
-            <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+            <rect key="frame" x="0.0" y="0.0" width="276" height="126"/>
             <autoresizingMask key="autoresizingMask"/>
             <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
-                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                <rect key="frame" x="0.0" y="0.0" width="276" height="126"/>
+                <subviews>
+                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="1K0-wd-BOr" userLabel="Avatar Image View">
+                        <rect key="frame" x="15" y="43" width="40" height="40"/>
+                        <constraints>
+                            <constraint firstAttribute="width" constant="40" id="d1f-94-FWk"/>
+                            <constraint firstAttribute="width" secondItem="1K0-wd-BOr" secondAttribute="height" multiplier="1:1" id="rxl-T9-vR3"/>
+                        </constraints>
+                    </imageView>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Whb-i5-kn8" userLabel="Audio Container View">
+                        <rect key="frame" x="69" y="5" width="150" height="116"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="left_bubble" translatesAutoresizingMaskIntoConstraints="NO" id="j0p-8V-Tjb" userLabel="Bubble Image View">
+                                <rect key="frame" x="0.0" y="0.0" width="150" height="116"/>
+                            </imageView>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="JJr-x8-Ljw" userLabel="Play Button">
+                                <rect key="frame" x="10" y="43" width="30" height="30"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" secondItem="JJr-x8-Ljw" secondAttribute="height" id="qcL-S0-MeP"/>
+                                    <constraint firstAttribute="width" constant="30" id="yBd-CJ-kw2"/>
+                                </constraints>
+                                <color key="tintColor" red="0.0" green="1" blue="0.50196081400000003" alpha="1" colorSpace="calibratedRGB"/>
+                                <state key="normal" image="icon_play">
+                                    <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
+                                </state>
+                            </button>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mlz-An-Tuw" userLabel="Wave View">
+                                <rect key="frame" x="45" y="0.0" width="85" height="116"/>
+                                <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
+                            </view>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="2&quot;" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Nar-PJ-uc5" userLabel="Time Length Label">
+                                <rect key="frame" x="45" y="0.0" width="85" height="116"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <constraints>
+                            <constraint firstItem="j0p-8V-Tjb" firstAttribute="top" secondItem="Whb-i5-kn8" secondAttribute="top" id="2P1-sj-nDd"/>
+                            <constraint firstItem="JJr-x8-Ljw" firstAttribute="leading" secondItem="Whb-i5-kn8" secondAttribute="leading" constant="10" id="8Wa-dF-0TV"/>
+                            <constraint firstAttribute="bottom" secondItem="j0p-8V-Tjb" secondAttribute="bottom" id="J5p-D5-MJf"/>
+                            <constraint firstAttribute="trailing" secondItem="mlz-An-Tuw" secondAttribute="trailing" constant="20" id="Lps-ic-PsY"/>
+                            <constraint firstItem="Nar-PJ-uc5" firstAttribute="trailing" secondItem="mlz-An-Tuw" secondAttribute="trailing" id="PWf-JE-OeL"/>
+                            <constraint firstItem="mlz-An-Tuw" firstAttribute="top" secondItem="Whb-i5-kn8" secondAttribute="top" id="RO3-HD-5VX"/>
+                            <constraint firstAttribute="centerY" secondItem="JJr-x8-Ljw" secondAttribute="centerY" id="RhN-1T-q4N"/>
+                            <constraint firstItem="j0p-8V-Tjb" firstAttribute="leading" secondItem="Whb-i5-kn8" secondAttribute="leading" id="TmR-CA-j6B"/>
+                            <constraint firstItem="mlz-An-Tuw" firstAttribute="leading" secondItem="JJr-x8-Ljw" secondAttribute="trailing" constant="5" id="UwV-wg-0GN"/>
+                            <constraint firstItem="Nar-PJ-uc5" firstAttribute="leading" secondItem="mlz-An-Tuw" secondAttribute="leading" id="YIF-on-6fg"/>
+                            <constraint firstItem="Nar-PJ-uc5" firstAttribute="bottom" secondItem="mlz-An-Tuw" secondAttribute="bottom" id="qyd-GU-56h"/>
+                            <constraint firstAttribute="trailing" secondItem="j0p-8V-Tjb" secondAttribute="trailing" id="r6r-TN-l5p"/>
+                            <constraint firstAttribute="width" constant="150" id="sta-YS-9h3"/>
+                            <constraint firstItem="Nar-PJ-uc5" firstAttribute="top" secondItem="mlz-An-Tuw" secondAttribute="top" id="vdR-5f-8fd"/>
+                            <constraint firstAttribute="bottom" secondItem="mlz-An-Tuw" secondAttribute="bottom" id="zwN-D3-Jl5"/>
+                        </constraints>
+                    </view>
+                </subviews>
                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
             </view>
+            <constraints>
+                <constraint firstItem="Whb-i5-kn8" firstAttribute="leading" secondItem="1K0-wd-BOr" secondAttribute="trailing" constant="14" id="0XT-SX-UNS"/>
+                <constraint firstAttribute="centerY" secondItem="1K0-wd-BOr" secondAttribute="centerY" id="8np-sL-P6D"/>
+                <constraint firstAttribute="bottom" secondItem="Whb-i5-kn8" secondAttribute="bottom" constant="5" id="esK-jX-i13"/>
+                <constraint firstItem="1K0-wd-BOr" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="15" id="kHD-0i-acN"/>
+                <constraint firstItem="Whb-i5-kn8" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="5" id="sWd-sM-aGR"/>
+            </constraints>
+            <size key="customSize" width="276" height="126"/>
+            <connections>
+                <outlet property="avatarImageView" destination="1K0-wd-BOr" id="ldH-Pm-vDG"/>
+            </connections>
+            <point key="canvasLocation" x="360" y="358"/>
         </collectionViewCell>
     </objects>
+    <resources>
+        <image name="icon_play" width="31" height="30"/>
+        <image name="left_bubble" width="36" height="30"/>
+    </resources>
 </document>
diff --git a/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.swift b/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.swift
index c942dcfc..b34bb4f7 100644
--- a/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.swift
+++ b/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.swift
@@ -10,6 +10,8 @@ import UIKit
 
 class ChatRightAudioCell: UICollectionViewCell {
 
+    @IBOutlet weak var avatarImageView: UIImageView!
+    
     override func awakeFromNib() {
         super.awakeFromNib()
         // Initialization code
diff --git a/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.xib b/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.xib
index a15878ae..2f2c93c8 100644
--- a/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.xib
+++ b/Yep/Views/Cells/ChatRightAudio/ChatRightAudioCell.xib
@@ -2,17 +2,89 @@
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7528.3" systemVersion="14C1514" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
     <dependencies>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7518.3"/>
+        <capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
         <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="ChatRightAudioCell" id="gTV-IL-0wX" customClass="ChatRightAudioCell" customModule="Yep" customModuleProvider="target">
-            <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+            <rect key="frame" x="0.0" y="3" width="316" height="105"/>
             <autoresizingMask key="autoresizingMask"/>
             <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
-                <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                <rect key="frame" x="0.0" y="0.0" width="316" height="105"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="knU-A0-FO4" userLabel="Audio Container View">
+                        <rect key="frame" x="101" y="5" width="150" height="95"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="right_bubble" translatesAutoresizingMaskIntoConstraints="NO" id="IUw-Mk-XlZ" userLabel="Bubble Image View">
+                                <rect key="frame" x="0.0" y="0.0" width="150" height="95"/>
+                            </imageView>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XTQ-XN-AqX" userLabel="Play Button">
+                                <rect key="frame" x="10" y="33" width="30" height="30"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" secondItem="XTQ-XN-AqX" secondAttribute="height" id="0Xe-vj-6Vr"/>
+                                    <constraint firstAttribute="width" constant="30" id="ReT-Bg-ERe"/>
+                                </constraints>
+                                <color key="tintColor" red="0.0" green="1" blue="0.50196081400000003" alpha="1" colorSpace="calibratedRGB"/>
+                                <state key="normal" image="icon_play">
+                                    <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
+                                </state>
+                            </button>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ynj-aF-z4D" userLabel="Wave View">
+                                <rect key="frame" x="45" y="0.0" width="85" height="95"/>
+                                <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
+                            </view>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="2&quot;" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="alU-Q7-YxY" userLabel="Time Length Label">
+                                <rect key="frame" x="45" y="0.0" width="85" height="95"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <constraints>
+                            <constraint firstItem="XTQ-XN-AqX" firstAttribute="leading" secondItem="knU-A0-FO4" secondAttribute="leading" constant="10" id="2gQ-ob-cgb"/>
+                            <constraint firstAttribute="trailing" secondItem="IUw-Mk-XlZ" secondAttribute="trailing" id="8dj-VI-b8r"/>
+                            <constraint firstAttribute="centerY" secondItem="XTQ-XN-AqX" secondAttribute="centerY" id="9sZ-NN-OjE"/>
+                            <constraint firstItem="alU-Q7-YxY" firstAttribute="leading" secondItem="ynj-aF-z4D" secondAttribute="leading" id="DWl-Kd-47z"/>
+                            <constraint firstItem="alU-Q7-YxY" firstAttribute="bottom" secondItem="ynj-aF-z4D" secondAttribute="bottom" id="FfY-Nf-2Wq"/>
+                            <constraint firstAttribute="trailing" secondItem="ynj-aF-z4D" secondAttribute="trailing" constant="20" id="HSM-71-9gP"/>
+                            <constraint firstAttribute="width" constant="150" id="LBt-mx-R7u"/>
+                            <constraint firstItem="IUw-Mk-XlZ" firstAttribute="leading" secondItem="knU-A0-FO4" secondAttribute="leading" id="LgR-iA-qgz"/>
+                            <constraint firstItem="IUw-Mk-XlZ" firstAttribute="top" secondItem="knU-A0-FO4" secondAttribute="top" id="PED-I8-vTn"/>
+                            <constraint firstItem="ynj-aF-z4D" firstAttribute="top" secondItem="knU-A0-FO4" secondAttribute="top" id="RIA-cc-ovU"/>
+                            <constraint firstItem="alU-Q7-YxY" firstAttribute="trailing" secondItem="ynj-aF-z4D" secondAttribute="trailing" id="bWp-na-rZM"/>
+                            <constraint firstAttribute="bottom" secondItem="IUw-Mk-XlZ" secondAttribute="bottom" id="fGm-iu-3L1"/>
+                            <constraint firstItem="alU-Q7-YxY" firstAttribute="top" secondItem="ynj-aF-z4D" secondAttribute="top" id="fyp-2L-t3i"/>
+                            <constraint firstAttribute="bottom" secondItem="ynj-aF-z4D" secondAttribute="bottom" id="mJb-Pl-UbX"/>
+                            <constraint firstItem="ynj-aF-z4D" firstAttribute="leading" secondItem="XTQ-XN-AqX" secondAttribute="trailing" constant="5" id="uLL-Bt-Lsk"/>
+                        </constraints>
+                    </view>
+                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="76j-Ht-EsY" userLabel="Avatar Image View">
+                        <rect key="frame" x="261" y="34" width="40" height="40"/>
+                        <constraints>
+                            <constraint firstAttribute="width" secondItem="76j-Ht-EsY" secondAttribute="height" multiplier="1:1" id="hTd-vS-wy8"/>
+                            <constraint firstAttribute="width" constant="40" id="tKU-Zf-UDc"/>
+                        </constraints>
+                    </imageView>
+                </subviews>
                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
             </view>
+            <constraints>
+                <constraint firstItem="knU-A0-FO4" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="5" id="8UY-FZ-lzu"/>
+                <constraint firstItem="76j-Ht-EsY" firstAttribute="leading" secondItem="knU-A0-FO4" secondAttribute="trailing" constant="10" id="Mcc-nk-9BG"/>
+                <constraint firstItem="knU-A0-FO4" firstAttribute="centerY" secondItem="76j-Ht-EsY" secondAttribute="centerY" constant="-1" id="S2w-AX-ROG"/>
+                <constraint firstAttribute="bottom" secondItem="knU-A0-FO4" secondAttribute="bottom" constant="5" id="a8r-IT-Jd1"/>
+                <constraint firstAttribute="trailing" secondItem="76j-Ht-EsY" secondAttribute="trailing" constant="15" id="utb-F3-DnW"/>
+            </constraints>
+            <size key="customSize" width="316" height="105"/>
+            <connections>
+                <outlet property="avatarImageView" destination="76j-Ht-EsY" id="uPV-sw-dlg"/>
+            </connections>
+            <point key="canvasLocation" x="434" y="419.5"/>
         </collectionViewCell>
     </objects>
+    <resources>
+        <image name="icon_play" width="31" height="30"/>
+        <image name="right_bubble" width="36" height="30"/>
+    </resources>
 </document>