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 *play_button;
IBOutlet UIBarButtonItem *pause_button; IBOutlet UIBarButtonItem *pause_button;
IBOutlet UIView *video_view; IBOutlet UIView *video_view;
IBOutlet UIView *video_container_view;
IBOutlet NSLayoutConstraint *video_width_constraint;
IBOutlet NSLayoutConstraint *video_height_constraint;
} }
-(IBAction) play:(id)sender; -(IBAction) play:(id)sender;

View file

@ -4,6 +4,8 @@
@interface ViewController () { @interface ViewController () {
GStreamerBackend *gst_backend; GStreamerBackend *gst_backend;
int media_width;
int media_height;
} }
@end @end
@ -21,6 +23,10 @@
play_button.enabled = FALSE; play_button.enabled = FALSE;
pause_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]; gst_backend = [[GStreamerBackend alloc] init:self videoView:video_view];
} }
@ -42,6 +48,23 @@
[gst_backend pause]; [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 * Methods from GstreamerBackendDelegate
*/ */

View file

@ -12,15 +12,35 @@
<rect key="frame" x="0.0" y="20" width="768" height="1004"/> <rect key="frame" x="0.0" y="20" width="768" height="1004"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews> <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"> <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> <constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="50" type="user" id="7Z8-1b-Y41"/> <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> </constraints>
<fontDescription key="fontDescription" type="system" pointSize="16"/> <fontDescription key="fontDescription" type="system" pointSize="16"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/> <nil key="highlightedColor"/>
</label> </label>
<toolbar opaque="NO" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="MUi-CE-Ydy"> <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> <items>
<barButtonItem style="plain" systemItem="flexibleSpace" id="onU-hf-FS4"/> <barButtonItem style="plain" systemItem="flexibleSpace" id="onU-hf-FS4"/>
<barButtonItem systemItem="play" id="UlF-Ga-2VX"> <barButtonItem systemItem="play" id="UlF-Ga-2VX">
@ -36,36 +56,56 @@
<barButtonItem style="plain" systemItem="flexibleSpace" id="urI-U7-ALw"/> <barButtonItem style="plain" systemItem="flexibleSpace" id="urI-U7-ALw"/>
</items> </items>
</toolbar> </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> </subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<constraints> <constraints>
<constraint firstAttribute="trailing" secondItem="6tN-97-YoQ" secondAttribute="trailing" type="user" id="Ah6-li-39g"/> <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="6tN-97-YoQ" firstAttribute="top" secondItem="CqS-Gu-I1O" secondAttribute="top" type="user" id="Aql-a6-cst"/>
<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="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 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="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 firstAttribute="trailing" secondItem="iLX-h1-Ko5" secondAttribute="trailing" constant="20" symbolic="YES" type="user" id="ruI-5P-l7I"/>
<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 firstItem="MUi-CE-Ydy" firstAttribute="bottom" secondItem="CqS-Gu-I1O" secondAttribute="bottom" constant="20" symbolic="YES" type="user" id="w6K-xy-EJe"/> <constraint firstItem="MUi-CE-Ydy" firstAttribute="bottom" secondItem="CqS-Gu-I1O" secondAttribute="bottom" constant="20" symbolic="YES" type="user" id="w6K-xy-EJe"/>
</constraints> </constraints>
</view> </view>
<simulatedStatusBarMetrics key="simulatedStatusBarMetrics" statusBarStyle="blackTranslucent"/> <simulatedOrientationMetrics key="simulatedOrientationMetrics"/>
<connections> <connections>
<outlet property="message_label" destination="iLX-h1-Ko5" id="Q0Y-3J-zis"/> <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="pause_button" destination="J3O-8j-Tkt" id="Dls-sg-FPm"/>
<outlet property="play_button" destination="UlF-Ga-2VX" id="243-yq-GEe"/> <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_view" destination="6tN-97-YoQ" id="Q0n-dR-hqv"/>
<outlet property="video_width_constraint" destination="xcj-6M-2KJ" id="oTt-9z-KCW"/>
</connections> </connections>
</viewController> </viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iRS-GG-bR6" sceneMemberID="firstResponder"/> <placeholder placeholderIdentifier="IBFirstResponder" id="iRS-GG-bR6" sceneMemberID="firstResponder"/>
</objects> </objects>
</scene> </scene>
</scenes> </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"> <simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar" statusBarStyle="blackTranslucent"/> <simulatedStatusBarMetrics key="statusBar" statusBarStyle="blackTranslucent"/>
<simulatedOrientationMetrics key="orientation"/> <simulatedOrientationMetrics key="orientation"/>

View file

@ -12,6 +12,22 @@
<rect key="frame" x="0.0" y="20" width="320" height="548"/> <rect key="frame" x="0.0" y="20" width="320" height="548"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews> <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"> <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> <constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="50" type="user" id="WIW-Im-XnF"/> <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"/> <barButtonItem style="plain" systemItem="flexibleSpace" id="hSc-4x-myS"/>
</items> </items>
</toolbar> </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> </subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints> <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="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 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="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="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="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="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 firstItem="0dR-Db-Wxo" firstAttribute="top" secondItem="JOS-rK-Hts" secondAttribute="top" type="user" id="qsc-BJ-NM7"/>
<constraint firstAttribute="trailing" secondItem="EZT-e2-iX7" secondAttribute="trailing" type="user" id="sLo-Ka-Lf5"/>
</constraints> </constraints>
</view> </view>
<simulatedStatusBarMetrics key="simulatedStatusBarMetrics"/> <simulatedStatusBarMetrics key="simulatedStatusBarMetrics"/>
@ -59,7 +72,8 @@
<outlet property="message_label" destination="8wd-E5-Owx" id="7Xw-cg-3hH"/> <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="pause_button" destination="bfY-YY-jiu" id="GBf-vm-mbR"/>
<outlet property="play_button" destination="6LZ-7a-xKf" id="Tk2-4w-9Px"/> <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> </connections>
</viewController> </viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="25z-hu-OZW" sceneMemberID="firstResponder"/> <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="message_label" candidateClass="UILabel"/>
<relationship kind="outlet" name="pause_button" candidateClass="UIBarButtonItem"/> <relationship kind="outlet" name="pause_button" candidateClass="UIBarButtonItem"/>
<relationship kind="outlet" name="play_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_view" candidateClass="UIView"/>
<relationship kind="outlet" name="video_width_constraint" candidateClass="NSLayoutConstraint"/>
</relationships> </relationships>
</class> </class>
</classes> </classes>