Dynamically change the video UIView so that it maximizes its size respecting the media aspect ratio. In this way, we do not need the sink to add black borders, and we are faster.

This commit is contained in:
Xavi Artigas 2013-05-09 11:47:56 +02:00
parent 80a0b8a143
commit 11599cbf55
4 changed files with 101 additions and 18 deletions

View file

@ -6,6 +6,9 @@
IBOutlet UIBarButtonItem *play_button;
IBOutlet UIBarButtonItem *pause_button;
IBOutlet UIView *video_view;
IBOutlet UIView *video_container_view;
IBOutlet NSLayoutConstraint *video_width_constraint;
IBOutlet NSLayoutConstraint *video_height_constraint;
}
-(IBAction) play:(id)sender;

View file

@ -4,6 +4,8 @@
@interface ViewController () {
GStreamerBackend *gst_backend;
int media_width;
int media_height;
}
@end
@ -20,6 +22,10 @@
play_button.enabled = FALSE;
pause_button.enabled = FALSE;
/* Make these constant for now, later tutorials will change them */
media_width = 320;
media_height = 240;
gst_backend = [[GStreamerBackend alloc] init:self videoView:video_view];
}
@ -42,6 +48,23 @@
[gst_backend pause];
}
- (void)viewDidLayoutSubviews
{
CGFloat view_width = video_container_view.bounds.size.width;
CGFloat view_height = video_container_view.bounds.size.height;
CGFloat correct_height = view_width * media_height / media_width;
CGFloat correct_width = view_height * media_width / media_height;
if (correct_height < view_height) {
video_height_constraint.constant = correct_height;
video_width_constraint.constant = view_width;
} else {
video_width_constraint.constant = correct_width;
video_height_constraint.constant = view_height;
}
}
/*
* Methods from GstreamerBackendDelegate
*/

View file

@ -12,15 +12,35 @@
<rect key="frame" x="0.0" y="20" width="768" height="1004"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="xWd-bg-0b6" userLabel="VideoContainer">
<subviews>
<view contentMode="scaleAspectFit" translatesAutoresizingMaskIntoConstraints="NO" id="6tN-97-YoQ" userLabel="Video" customClass="EaglUIView">
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="height" constant="240" type="user" id="A9A-eK-7QX"/>
<constraint firstAttribute="width" constant="320" type="user" id="xcj-6M-2KJ"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="centerY" secondItem="6tN-97-YoQ" secondAttribute="centerY" type="user" id="UYa-oM-cdf"/>
<constraint firstAttribute="centerX" secondItem="6tN-97-YoQ" secondAttribute="centerX" type="user" id="w9H-W0-MfF"/>
</constraints>
</view>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Initializing..." textAlignment="center" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" preferredMaxLayoutWidth="728" translatesAutoresizingMaskIntoConstraints="NO" id="iLX-h1-Ko5" userLabel="Message">
<constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="50" type="user" id="7Z8-1b-Y41"/>
<constraint firstAttribute="height" constant="21" type="user" id="jAS-RD-k2d"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="16"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<toolbar opaque="NO" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="MUi-CE-Ydy">
<constraints>
<constraint firstAttribute="height" constant="44" type="user" id="EwL-Ma-A4v"/>
</constraints>
<items>
<barButtonItem style="plain" systemItem="flexibleSpace" id="onU-hf-FS4"/>
<barButtonItem systemItem="play" id="UlF-Ga-2VX">
@ -36,36 +56,56 @@
<barButtonItem style="plain" systemItem="flexibleSpace" id="urI-U7-ALw"/>
</items>
</toolbar>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6tN-97-YoQ" userLabel="Video" customClass="EaglUIView">
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="6tN-97-YoQ" secondAttribute="trailing" type="user" id="Ah6-li-39g"/>
<constraint firstItem="6tN-97-YoQ" firstAttribute="top" secondItem="CqS-Gu-I1O" secondAttribute="top" type="user" id="Aql-a6-cst"/>
<constraint firstItem="MUi-CE-Ydy" firstAttribute="trailing" secondItem="CqS-Gu-I1O" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="4vm-hF-9E8"/>
<constraint firstItem="iLX-h1-Ko5" firstAttribute="bottom" secondItem="MUi-CE-Ydy" secondAttribute="top" constant="8" symbolic="YES" type="user" id="FXP-eH-VSK"/>
<constraint firstItem="xWd-bg-0b6" firstAttribute="top" secondItem="CqS-Gu-I1O" secondAttribute="top" type="user" id="MXr-HK-07f"/>
<constraint firstAttribute="trailing" secondItem="xWd-bg-0b6" secondAttribute="trailing" type="user" id="NGT-7D-rHD"/>
<constraint firstItem="MUi-CE-Ydy" firstAttribute="leading" secondItem="CqS-Gu-I1O" secondAttribute="leading" constant="20" symbolic="YES" type="user" id="OM9-gE-OVP"/>
<constraint firstAttribute="trailing" secondItem="iLX-h1-Ko5" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="Xdr-12-E1r"/>
<constraint firstItem="xWd-bg-0b6" firstAttribute="leading" secondItem="CqS-Gu-I1O" secondAttribute="leading" type="user" id="XO5-WJ-Y3R"/>
<constraint firstItem="iLX-h1-Ko5" firstAttribute="top" secondItem="xWd-bg-0b6" secondAttribute="bottom" type="user" id="aP8-7M-Fq3"/>
<constraint firstItem="iLX-h1-Ko5" firstAttribute="leading" secondItem="CqS-Gu-I1O" secondAttribute="leading" constant="20" symbolic="YES" type="user" id="bT2-TE-X7Q"/>
<constraint firstItem="MUi-CE-Ydy" firstAttribute="trailing" secondItem="CqS-Gu-I1O" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="iRT-XF-W0f"/>
<constraint firstItem="6tN-97-YoQ" firstAttribute="leading" secondItem="CqS-Gu-I1O" secondAttribute="leading" type="user" id="mV8-P0-4eW"/>
<constraint firstItem="iLX-h1-Ko5" firstAttribute="top" secondItem="6tN-97-YoQ" secondAttribute="bottom" type="user" id="rJy-I3-pX7"/>
<constraint firstAttribute="trailing" secondItem="iLX-h1-Ko5" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="ruI-5P-l7I"/>
<constraint firstItem="MUi-CE-Ydy" firstAttribute="bottom" secondItem="CqS-Gu-I1O" secondAttribute="bottom" constant="20" symbolic="YES" type="user" id="w6K-xy-EJe"/>
</constraints>
</view>
<simulatedStatusBarMetrics key="simulatedStatusBarMetrics" statusBarStyle="blackTranslucent"/>
<simulatedOrientationMetrics key="simulatedOrientationMetrics"/>
<connections>
<outlet property="message_label" destination="iLX-h1-Ko5" id="Q0Y-3J-zis"/>
<outlet property="pause_button" destination="J3O-8j-Tkt" id="Dls-sg-FPm"/>
<outlet property="play_button" destination="UlF-Ga-2VX" id="243-yq-GEe"/>
<outlet property="video_container_view" destination="xWd-bg-0b6" id="7dL-Mp-QGc"/>
<outlet property="video_height_constraint" destination="A9A-eK-7QX" id="rMe-ze-8l5"/>
<outlet property="video_view" destination="6tN-97-YoQ" id="Q0n-dR-hqv"/>
<outlet property="video_width_constraint" destination="xcj-6M-2KJ" id="oTt-9z-KCW"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iRS-GG-bR6" sceneMemberID="firstResponder"/>
</objects>
</scene>
</scenes>
<classes>
<class className="EaglUIView" superclassName="UIView">
<source key="sourceIdentifier" type="project" relativePath="./Classes/EaglUIView.h"/>
</class>
<class className="ViewController" superclassName="UIViewController">
<source key="sourceIdentifier" type="project" relativePath="./Classes/ViewController.h"/>
<relationships>
<relationship kind="action" name="pause:"/>
<relationship kind="action" name="play:"/>
<relationship kind="outlet" name="label" candidateClass="UILabel"/>
<relationship kind="outlet" name="message_label" candidateClass="UILabel"/>
<relationship kind="outlet" name="pause_button" candidateClass="UIBarButtonItem"/>
<relationship kind="outlet" name="play_button" candidateClass="UIBarButtonItem"/>
<relationship kind="outlet" name="video_container_view" candidateClass="UIView"/>
<relationship kind="outlet" name="video_height_constraint" candidateClass="NSLayoutConstraint"/>
<relationship kind="outlet" name="video_view" candidateClass="UIView"/>
<relationship kind="outlet" name="video_width_constraint" candidateClass="NSLayoutConstraint"/>
</relationships>
</class>
</classes>
<simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar" statusBarStyle="blackTranslucent"/>
<simulatedOrientationMetrics key="orientation"/>

View file

@ -12,6 +12,22 @@
<rect key="frame" x="0.0" y="20" width="320" height="548"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0dR-Db-Wxo" userLabel="VideoContainer">
<subviews>
<view contentMode="scaleAspectFit" translatesAutoresizingMaskIntoConstraints="NO" id="YVj-fp-BtA" userLabel="Video" customClass="EaglUIView">
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="width" constant="320" type="user" id="9zy-ya-q8u"/>
<constraint firstAttribute="height" constant="240" type="user" id="DNz-za-Lsb"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="centerY" secondItem="YVj-fp-BtA" secondAttribute="centerY" type="user" id="5B7-CE-mxw"/>
<constraint firstAttribute="centerX" secondItem="YVj-fp-BtA" secondAttribute="centerX" type="user" id="mCK-0x-q1w"/>
</constraints>
</view>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Initializing..." textAlignment="center" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" preferredMaxLayoutWidth="280" translatesAutoresizingMaskIntoConstraints="NO" id="8wd-E5-Owx" userLabel="Message">
<constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="50" type="user" id="WIW-Im-XnF"/>
@ -36,22 +52,19 @@
<barButtonItem style="plain" systemItem="flexibleSpace" id="hSc-4x-myS"/>
</items>
</toolbar>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="EZT-e2-iX7" userLabel="Video" customClass="EaglUIView">
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="EZT-e2-iX7" firstAttribute="top" secondItem="JOS-rK-Hts" secondAttribute="top" type="user" id="3UH-b4-lHN"/>
<constraint firstItem="8wd-E5-Owx" firstAttribute="bottom" secondItem="o22-1p-nvT" secondAttribute="top" constant="8" symbolic="YES" type="user" id="CHF-CI-6CL"/>
<constraint firstItem="8wd-E5-Owx" firstAttribute="top" secondItem="EZT-e2-iX7" secondAttribute="bottom" type="user" id="V6c-5k-eSb"/>
<constraint firstItem="8wd-E5-Owx" firstAttribute="top" secondItem="0dR-Db-Wxo" secondAttribute="bottom" type="user" id="IMP-UH-PGT"/>
<constraint firstItem="0dR-Db-Wxo" firstAttribute="trailing" secondItem="JOS-rK-Hts" secondAttribute="trailing" type="default" id="MMJ-ra-NNH"/>
<constraint firstAttribute="trailing" secondItem="8wd-E5-Owx" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="WDw-jT-tbz"/>
<constraint firstItem="o22-1p-nvT" firstAttribute="leading" secondItem="JOS-rK-Hts" secondAttribute="leading" constant="20" symbolic="YES" type="user" id="Zvb-2h-v7A"/>
<constraint firstItem="0dR-Db-Wxo" firstAttribute="leading" secondItem="JOS-rK-Hts" secondAttribute="leading" type="user" id="bfN-MR-7nC"/>
<constraint firstItem="o22-1p-nvT" firstAttribute="bottom" secondItem="JOS-rK-Hts" secondAttribute="bottom" constant="20" symbolic="YES" type="user" id="l3D-e3-Z7R"/>
<constraint firstItem="8wd-E5-Owx" firstAttribute="leading" secondItem="JOS-rK-Hts" secondAttribute="leading" constant="20" symbolic="YES" type="user" id="lwj-ty-IXl"/>
<constraint firstItem="o22-1p-nvT" firstAttribute="trailing" secondItem="JOS-rK-Hts" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="mL0-QH-ra6"/>
<constraint firstItem="EZT-e2-iX7" firstAttribute="leading" secondItem="JOS-rK-Hts" secondAttribute="leading" type="user" id="onN-nz-NjL"/>
<constraint firstAttribute="trailing" secondItem="EZT-e2-iX7" secondAttribute="trailing" type="user" id="sLo-Ka-Lf5"/>
<constraint firstItem="0dR-Db-Wxo" firstAttribute="top" secondItem="JOS-rK-Hts" secondAttribute="top" type="user" id="qsc-BJ-NM7"/>
</constraints>
</view>
<simulatedStatusBarMetrics key="simulatedStatusBarMetrics"/>
@ -59,7 +72,8 @@
<outlet property="message_label" destination="8wd-E5-Owx" id="7Xw-cg-3hH"/>
<outlet property="pause_button" destination="bfY-YY-jiu" id="GBf-vm-mbR"/>
<outlet property="play_button" destination="6LZ-7a-xKf" id="Tk2-4w-9Px"/>
<outlet property="video_view" destination="EZT-e2-iX7" id="Ep9-eG-Grh"/>
<outlet property="video_container_view" destination="0dR-Db-Wxo" id="buw-S2-Ctk"/>
<outlet property="video_view" destination="YVj-fp-BtA" id="Qk6-Be-oIR"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="25z-hu-OZW" sceneMemberID="firstResponder"/>
@ -79,7 +93,10 @@
<relationship kind="outlet" name="message_label" candidateClass="UILabel"/>
<relationship kind="outlet" name="pause_button" candidateClass="UIBarButtonItem"/>
<relationship kind="outlet" name="play_button" candidateClass="UIBarButtonItem"/>
<relationship kind="outlet" name="video_container_view" candidateClass="UIView"/>
<relationship kind="outlet" name="video_height_constraint" candidateClass="NSLayoutConstraint"/>
<relationship kind="outlet" name="video_view" candidateClass="UIView"/>
<relationship kind="outlet" name="video_width_constraint" candidateClass="NSLayoutConstraint"/>
</relationships>
</class>
</classes>